react 프로젝트 생성 시에 index.html 파일에 작성되는
meta tag에 작성법에 대해 숙지하고 있는 내용이 빈약하다 생각되어
추가적으로 공부한 내용들을 토대로 정리해보고자 한다.
<meta>메타데이터는 어떤 데이터를 설명하는 데이터이다.
<head>요소 내부에 있으며 일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 뷰포트 설정을 지정하는 데 사용된다.name
description : 웹 페이지에 대한 설명을 정의
viewport : 웹사이트가 모든 기기에서 잘 보이도록 표시 영역 설정
keywords : 검색 엔진에 대한 키워드 정의
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">이 전에 했던 프로젝트에서 meta태그에 og 와 twitter 를 추가로 작성하신 내용을 찾아보았는데 오픈그래프라는 og태그라는 것이 있었다.
오픈그래프 Open graph
웹사이트가 카카오톡, 페이스북 등 sns로 공유 될 때 보여지는 미리보기창에 적용되는 정보들을 지정해주는 태그다.
여러가지 태그들이 있지만 사용되었던 부분만 정리해보았다.
트위터는 따로 설정해주어야한다.
- og:title : 콘텐츠 제목
- og:url : 웹페이지 url
- og:type : 웹페이지 타입
- og:image : 이미지 URL
- og:description : 웹페이지에 대한 간단한 설명
<meta property="og:title" content="" />
<meta property="og:url" content="" />
<meta property="og:type" content="" />
<meta property="og:image" content="" />
<meta property="og:description" content="" /> 트위터 공식 홈페이지 예시
- image : 표시되는 이미지
- card :
“summary”, “summary_large_image”, “app”, “player”타입 중 한가지로 적용- site : 사이트의 이름
- title : 페이지의 이름 (제목)
- description : 페이지 설명
<meta property="twitter:image" content="" /> <meta name="twitter:card" content="" /> <meta name="twitter:site" content="" /> <meta name="twitter:title" content="" /> <meta name="twitter:description" content="" />
서비스를 만든 후에 공유하게 되는 플랫폼이 SNS인 만큼 meta태그도 어떤방식으로 사용하면 좋은지 알게 된거 같다.
reference
twitter : https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started
Open Graph : https://ogp.me/
