1. 메타 태그란
<meta>로 작성하는 HTML 태그로 메타데이터를 나타냅니다.- 메타데이터란 데이터를 설명하는 데이터입니다.
2. 메타 태그 사용 예시
웹 페이지 설정
<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정
initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정
<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드
<meta name="robots" content="noindex">
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않습니다. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있습니다.3. 왜 사용할까?
charset의 경우 브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 합니다.name=”description”은 브라우저가 검색 결과의 콘텐츠 요약에 활용하고, 이를 통해 사용자 유입이 보다 많아질 수 있습니다.name="viewport"설정으로 반응형 웹 사이트를 제작할 수 있습니다.name=”robots”설정으로 크롤러의 동작에 대해 규칙을 정할 수 있습니다.- OG, Twitter 태그 사용으로 SNS상 웹 사이트 클릭률을 높여 보다 많은 사용자 유입을 기대할 수 있습니다.
4. 어떻게 사용할까?
<head>안에 문서를 설명하는<meta>를 넣습니다. 메타 태그는 닫는 태그가 없습니다.- 메타 태그의 특성은 해당 링크를 통해 확인할 수 있습니다. 그리고, 메타 태그에
name으로 설정 가능한 값들은 해당 링크를 통해 확인할 수 있습니다. - OG 태그는 아래와 같이 사용하고, OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 됩니다.
<meta property="og:OOO" content="XXXX">- 링크를 참고하면 OG 태그에 대한 자세한 규약을 알 수 있습니다.
- Twitter 태그도 아래와 같이 OOO자리에는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 됩니다.
<meta name="twitter:OOO" content="XXXX" >- 링크를 참고하면 Twitter 태그에 대한 자세한 안내를 확인할 수 있습니다.
- 디버거를 활용하면, 내가 제대로 태그를 설정 했는지 빠르게 확인할 수 있습니다.
5. 주의 사항
동적인 OG 태그 (Twitter 태그도 동일)
<head>
<meta property="og:title" content={data?.title}>
</head>- 웹 페이지 데이터 요청 시 HTML이 최초로 만들어지고 난 뒤, 추가로 데이터를 요청하고 받아와서 동적으로 OG 태그를 만드는 것은 불가능합니다.
- 위의 예를 보면, 브라우저가 최초로 사이트에 데이터 요청할 때,
data?.title의 값은undefined인 상태로 HTML을 받고, 이후 브라우저가 데이터를 요청해서data?.title값이 채워집니다. 하지만, SNS 공유에서 링크 미리보기를 만들 때는 한번의 요청으로 받아온 데이터를 기준으로 미리보기를 만들고 끝나기 때문에content=undefined인 상태로 링크 미리보기를 만들어서 미리보기가 보이지 않거나 원하는 데이터를 볼 수 없습니다. - 그래서 이런 경우엔
data?.title에 해당하는 데이터를 먼저 받고나서 HTML을 생성해야 합니다. - 이를 위해서 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달하거나, 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법이 있습니다.
- 카카오톡 scrap(url 미리보기) 안될때 체크 리스트
job's done