메타 태그란
메타 태그란 <meta> 로 작성하는 HTML 태그로 메타데이터를 나타냅니다.
메타데이터는 데이터를 설명하는 데이터를 말합니다. 즉, <meta> 는 HTML 데이터를 설명하는 데이터를 갖는 태그입니다.
이미 우리는 메타 태그가 적용된 것들을 많이 봐왔는데요.
구글 검색 페이지에 사이트 설명에 사용하기도 하고,
페이스북, 카카오, 트위터 등의 SNS 공유할 때 링크 미리 보기에도 사용됩니다.
위와 같은 미리 보기를 위한 설정뿐 아니라 어떤 종류의 메타 태그 설정들이 있고, 어떻게 사용하면 될지 알아봅시다.
웹 페이지에 설정하는 메타 태그 살펴보기
살펴볼 메타 태그들은 한 번 설정하면 변경할 일이 거의 없는 것들이에요.
지금 단계에서는 가볍게 이런 설정도 필요하구나 하고 넘어가도 좋습니다.
<meta charset="utf-8">
HTML 문서의 문자 인코딩을 utf-8로 지정해요.
브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐이 없도록 해요.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no">
name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있어요.
width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정해요.
initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정해요.
minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막아요.
maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막아요.
user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막아요.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드에요.
<meta name="robots" content="noindex">
name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있어요.
검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않아요. 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있어요.
사이트를 설명하는 데 사용하는 메타 태그
구글 검색 결과, 사이트 설명에 사용
<title>코드잇 | 코딩, 쉬워질 때도 됐다</title>
<meta
name="description"
content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!"
>
SNS 공유할 때 링크 미리 보기에 사용
- 페이스북
<meta property="og:image" content="/static/images/brand/og_tag.png">
<meta property="og:title" content="코드잇 | 코딩, 쉬워질 때도 됐다">
<meta
property="og:description"
content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!"
>
<meta property="og:url" content="https://www.codeit.kr">
- 트위터
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="/static/images/brand/og_tag.png"> <meta name="twitter:title" content="JavaScript 프론트엔드 개발자 - 커리어 강의 | 코드잇" > <meta name="twitter:description" content="예쁘고 편리한 웹사이트를 뚝딱 만들어 내는 프론트엔드 개발자를 꿈꾸고 게신가요? ..." >
사이트 설명 또는 링크 미리 보기에서 보는 이미지와 설명들은 위와 같은 메타 태그 설정이 있어야 합니다.
어떻게 사용할까?
<head> 안에 문서를 설명하는 <meta> 를 넣습니다. 메타 태그는 닫는 태그가 없습니다.
메타 태그의 특성은 해당 링크를 통해 확인할 수 있습니다. 그리고, 메타 태그에 name 으로 설정 가능한 값들은 해당 링크를 통해 확인할 수 있습니다.
OG 태그는 아래와 같이 사용하고, OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 됩니다.
<meta property="og:OOO" content="XXXX">
링크를 참고하면 OG 태그에 대한 자세한 규약을 알 수 있습니다.
Twitter 태그도 아래와 같이 OOO자리에는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력하면 됩니다.
<meta name="twitter:OOO" content="XXXX" >
링크를 참고하면 Twitter 태그에 대한 자세한 안내를 확인할 수 있습니다.
또한 디버거를 활용하면, 내가 제대로 태그를 설정했는지 빠르게 확인할 수 있습니다.
동적인 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 미리 보기) 안될 때 체크 리스트
'HTML' 카테고리의 다른 글
| HTML 포지셔닝 정리하기 (0) | 2023.10.20 |
|---|---|
| z-index에 오류가 있을 때 (1) | 2023.10.20 |
| HTML head 와 시맨틱 태그 (0) | 2023.10.20 |
| HTML link와 script 정리 (0) | 2023.10.20 |
| HTML 폼 정리 (0) | 2023.10.20 |
