메타태그와 오픈 그래프, 트위터 카드

메타 태그

메타 태그는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그이다.

유저가 보게되는 웹페이지에는 영향을 주지 않지만 검색엔진이 웹페이지에 대한 정보를 파악할 수 있도록 돕는다.

 

주로 사용되는 메타 태그

<title>메타 태그를 통한 검색엔진 최적화</title>
<meta name="title" content="메타 태그를 통한 검색엔진 최적화" />
<meta name="description" content="기계가 웹페이지를 효과적으로 이해할 수 있도록 사용하는 메타 태그에 대해서 알아보겠습니다." />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="author" content="ehddud1006" />

 

 

 

오픈 그래프 (Open Graph)

사용자가 클릭하기 전에 크롤러가 해당 웹사이트를 방문하여 HTML head 의 메타데이터를 크롤링하여 미리보기 화면을 생성한다.

 

대표적으로 카카오톡에서 공유한 링크가 이에 해당된다.

 

https://seons-dev.tistory.com/entry/html-Meta-OG

 

자주 사용되는 og 메타 태그

<!-- 자주 사용되는 og 태그 -->
<meta property="og:type" content="website"> 페이지의 유형(E.g, `website`, `video.movie`)
<meta property="og:url" content="https://example.com/page.html">  페이지 주소(URL)
<meta property="og:title" content="Content Title"> 페이지의 이름(제목)
<meta property="og:image" content="https://example.com/image.jpg"> 페이지의 대표 이미지 주소(URL)
<meta property="og:description" content="Description Here"> 페이지의 간단한 설명)
<meta property="og:site_name" content="Site Name"> 속한 사이트의 이름

<!-- 추천하는 og 태그 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

 

 

트위터 카드 

트위터의 미리보기에 사용되는 메타 태그 이다.

<meta property="twitter:card" content="summary" />  페이지(카드)의 유형(E.g. `summary`, `player`)
<meta property="twitter:site" content="Starbucks" /> 속한 사이트의 이름
<meta property="twitter:title" content="Starbucks Coffee Korea" /> 페이지의 이름(제목)
<meta property="twitter:description" content="스타벅스는 세계에서 가장 큰 다국적 커피 전문점으로, 64개국에서 총 23,187개의 매점을 운영하고 있습니다." /> 페이지의 간단한 설명
<meta property="twitter:image" content="./images/starbucks_seo.jpg" /> 페이지의 대표 이미지 주소(URL)
<meta property="twitter:url" content="https://starbucks.co.kr" /> 페이지 주소(URL)

 

 

참고자료

1. https://seons-dev.tistory.com/entry/html-Meta-OG

2. https://www.daleseo.com/html-meta-tags-for-seo/#:~:text=%EB%A9%94%ED%83%80%20%ED%83%9C%EA%B7%B8%EB%9E%80%3F,HTML%20%ED%83%9C%EA%B7%B8%EB%A5%BC%20%EC%9D%98%EB%AF%B8%ED%95%A9%EB%8B%88%EB%8B%A4.