뭐에요 ?
- 웹 페이지(Web Page)의 요약.
- Head Tag 사이 또는 뒤에 있어도 되지만, 무조건 BODY 앞에 위치해야 한다.
- 속성에는 뭐가 있나요?
-
http-equiv
-
name
-
content
http - equiv
- 웹 브라우저 서버에 명령을 내리는 속성
- name 속성을 대신해 사용할 수 있다
- html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전성되었을 때만 의미를 가짐
- content 속성의 정보/ 값을 위한 HTTP Header를 제공
- html5 에서는 meta charset = "UTF - 8" 로 사용 가능
name
- 정보 이름
- 몇 개의 메타 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv와 같은 기능
content
- meta 정보의 내용을 지정
- name 속성과 http-equiv와 연관된 값을 준다
-
그럼 Meta Tag에 필수로 들어가야 할 속성이 뭐가 있는지 보자.
import React from 'react'
import HeaderBar from '@/components/headerBar'
import Login from '@/components/loginpagecomponents/login'
import Head from 'next/head'
function LoginPage() {
return (
<>
<Head>
<meta charSet="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Login</title>
<meta name="author" content="양진우" />
<meta name="title" content="Login" />
<meta name="application-name" content="Login" />
<meta name="Date" content="2021-09-01" />
<meta name="description" content="User Login Page" />
<meta name="keywords" content="Login, User, Authentication" />
<meta name="robots" content="index, follow" />
{/* Open Graph */}
<meta property="og:title" content="Login" />
<meta property="og:url" content="/temp" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/images/Login" />
<meta
property="og:description"
content="User Authentication Page"
/>
</Head>
<Login />
</>
)
}
export default LoginPage
하나씩 보자
<meta charSet="UTF-8" />- 문서의 문자 인코딩을 지정(UTF-8)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />- name : 메타 태그의 이름
- content : 뷰포트의 너비를 장치의 너비로 설정하고 초기 배율을 1.0으로 설정
<meta name="author" content="홍길동" />- 문서의 저자 정보
<meta name="title" content="Login" />- 문서의 제목
<meta name="application-name" content="Login" />- 애플리케이션의 이름
<meta name="Date" content="2021-09-01" />- 문서의 날짜
<meta name="description" content="User Login Page" />- 문서의 설명
<meta name="keywords" content="Login, User, Authentication" />- 문서와 관련된 키워드
<meta name="robots" content="index, follow" />- 검색 엔진 크롤러에게 페이지를 인덱스하고 링크를 따라가도록 지시
<meta property="og:title" content="Login" />- property : Open Graph 프로토콜 속성
- content : OG 제목
<meta property="og:url" content="/temp" />- 페이지의 URL
<meta property="og:type" content="website" />- 콘텐츠의 유형 ( 여기서는 웹 사이트)
<meta property="og:image" content="/images/Login" />- 공유 시 표시될 이미지의 URL
<meta property="og:description" content="User Authentication Page" />- Open Graph 설명
OG 는 뭐에요?
- Open Graph의 약자로 웹 페이지의 메타 데이터를 정의하는 포로토콜임. OG 태그를 사용하면 소셜 미디어에서 어떻게 표시될 지를 제어한다.
장점 : 미리보기 개선, SEO 향상
ex ) 카톡에 링크만 보내면 사진+ 페이지 내용 조금 + 설명 + 링크 등등이 같이 뜨는 것.
