Ch1. 메타 태그
1️⃣ 메타 태그
01. 메타 태그란?
→ <meta> 로 작성하는 HTML 태그로 메타데이터(데이터를 설명하는 데이터)
→ HTML 데이터를 설명하는 데이터를 갖는 태그
02~03. 메타 태그 사용 예시
-
웹 페이지에 설정하는 메타 태그
<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="예쁘고 편리한 웹사이트를 뚝딱 만들어 내는 프론트엔드 개발자를 꿈꾸고 게신가요? ..." >
-
-
04. 메타 태그 활용
→ <head> 안에 문서를 설명하는 <meta> 삽입 (+ 메타 태그는 닫는 태그가 없음)
- 메타 태그의 특성 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta
- 메타 태그에
name으로 설정 가능한 값 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name
🩶 OG 태그
<meta property="og:OOO" content="XXXX">
→ OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력
→ 규약 : https://ogp.me/
🩶 Twitter 태그
<meta name="twitter:OOO" content="XXXX" >
→ OOO 자리는 원하는 속성을, XXXX 자리에는 속성에 해당하는 값을 입력
→ 자세한 안내 : https://developer.x.com/en/docs/twitter-for-websites/cards/overview/abouts-cards
➕ 디버거
05. 메타 태그 설정 시 주의사항
-
동적인 OG 태그 (Twitter 태그도 동일)
<head> <meta property="og:title" content={data?.title}> </head>→ 브라우저가 최초로 사이트에 데이터 요청할 때,
data?.title의 값은undefined인 상태로 HTML을 받고, 이후 브라우저가 데이터를 요청해서data?.title값 충족→ But SNS 공유에서 링크 미리 보기를 만들 때는 한 번의 요청으로 받아온 데이터를 기준으로 미리 보기를 만들고 끝나기 때문에
content=undefined인 상태로 링크 미리 보기를 만들어서 미리 보기가 보이지 않거나 원하는 데이터를 볼 수 없음→
data?.title에 해당하는 데이터를 먼저 받고 나서 HTML을 생성- 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달
- or 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법
-
카카오톡 링크 미리 보기가 동작하지 않는 경우
