-
메타 태그 이해하기코드잇 부스트 2024. 7. 13. 16:10
메타태그
- 메타태그란?
- 메타 태그란 <meta> 로 작성하는 HTML 태그이다.
- 이는 구글 검색 페이지의 사이트 설명 및 링크 미리보기에서 사용된다.
- 메타 태그 사용 예시 1
- HTML 문서의 문자 인코딩을 utf-8로 지정한다. 브라우저가 웹페이지를 해석하는 방식을 지정해서 문서의 깨짐을 방지한다.
- name="viewport" 설정으로 반응형 웹 사이트를 제작할 수 있다.
- width=device-width: 장치의 화면 너비를 따르도록 페이지 너비를 설정한다.
- initial-scale=1: 브라우저에서 페이지를 처음 로드할 때 배율을 1로 설정한다.
- minimum-scale=1: 최소사이즈를 1배로 처리해서 축소를 못하게 막는다.
- maximum-scale=1: 최대사이즈를 1배로 처리해서 확대를 못하게 막는다.
- user-scalable=no: 사용자크기변화를 no로 처리해서 크기변화를 못하게 막는다.
- 인터넷 익스플로러에서 최신 표준 모드로 보여주는 코드이다.
- name="robots" 설정으로 크롤러의 동작에 대해 규칙을 정할 수 있디.
- 검색결과에 이 페이지, 미디어 또는 리소스를 표시하지 않는다.
- 이 규칙을 지정하지 않으면 페이지, 미디어 또는 리소스가 색인 생성되어 검색결과에 표시될 수 있다.
<meta name="robots" content="noindex"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale, user-scalable=no"> <meta charset="utf-8">- 메타 태그 사용 예시 2
<title>코드잇 | 코딩, 쉬워질 때도 됐다</title> <meta name="description" content="월 2만원대로 Python, JavaScript, HTML/CSS 등 3,000개 이상 프로그래밍 강의를 배워보세요!">
<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="예쁘고 편리한 웹사이트를 뚝딱 만들어 내는 프론트엔드 개발자를 꿈꾸고 게신가요? ..."> - 메타 태그 활용
- 필요할 때 들어가서 참고하자!
- https://ogp.me/ og 태그에 대한 규약디버거를 활용하면 태그 설정을 빠르게 확인할 수 있다.
- https://www.codeit.kr/topics/bc-html-metatag/lessons/6485#:~:text=카카오톡 디버거-,페이스북 디버거,-트위터
- https://cards-dev.twitter.com/validator
- https://developers.kakao.com/tool/debugger/sharing
- https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards Twitter태그에 대한 안내
- https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta/name 메타 태그에서 name으로 설정 가능한 값
- https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta 위 링크에서 메타 태그의 특성을 확인할 수 있다.
- 메타 태그 설정 시 주의사항
동적으로 OG 태그를 만드는 것은 불가능하다.이런 경우엔 data?.title 에 해당하는 데이터를 먼저 받고 나서 HTML을 생성해야 한다. 이를 위해서 프론트엔드 서버에서 데이터를 받아서 HTML을 생성한 뒤 전달하거나, 소스 코드를 빌드하는 단계에서 미리 데이터를 받아 HTML을 생성하는 방법이 있다.카카오톡 미리보기 안 될 때.<head> <meta property="og:title" content={data?.title}> </head> - https://devtalk.kakao.com/t/scrap-url/116202
- 브라우저가 최초로 사이트에 데이터 요청할 때, data?.title의 값은 undefined 인 상태로 HTML을 받고, 이후 브라우저가 데이터를 요청해서 data?.title 값이 채워진다.
- 동적인 OG 태그 (Twitter 태그도 동일)
'코드잇 부스트' 카테고리의 다른 글
쿠키, 세션, 스토리지, 로컬 스토리지 이해하기 (0) 2024.07.13 자바스크립트 웹 개발 기본기 (0) 2024.07.13 인터랙티브 자바스크립트 (0) 2024.07.13 자바스크립트로 리퀘스트 보내기 (0) 2024.06.28 비동기 자바 스크립트 (0) 2024.06.28 - 메타태그란?