프로젝트를 진행할 때 기본적으로 세팅해야 하는 오픈 그래프 메타 태그를 기록해둔다.
🚨 단일 페이지가 아닌, 글이 많은 블로그나 페이지가 다양한 기업 홈페이지를 개발한다면 유동적으로 메타 태그가 생성되도록 해야한다.
이 글은 기본 메타 태그를 참고하기 위해 기록한 글이다.
Basic
최소한으로 추가해야 할 메타 태그
<meta property="og:title" content="Wallel" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://wallel.com/" />
<meta property="og:desciption" content="개인 기술 블로그입니다." />
<meta property="og:image" content="https://wallel.com/wp-content/uploads/2018/10/main-capture.png" />title= 페이지의 제목
사이트 이름이 아니라 ‘페이지’의 제목을 넣어야한다.
블로그라면 게시물의 제목이 되겠다.type= 페이지의 타입
website, video.movie, article 등 페이지에 알맞는 타입을 넣는다.url= 페이지의 URL
Canonical URL로 페이지의 고유 주소를 넣으면 된다.
페이지를 나눠서 같은 URL에서/?p=1,/?p=2같이 나뉜다면 대표적인 URL를 입력하자.description= 페이지 설명
페이지 요약글이나 일부 글을 발췌해 넣자.image= 페이지의 이미지
블로그 글이라면 게시물 대표 이미지(썸네일)를 넣어서 활용하면 된다.
이것 외에 더 많고 상세한 옵션은 opg.me 사이트에서 볼 수 있다.
SNS
1. 트위터
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="..." />
<meta name="twitter:description" content="..." />
<meta name="twitter:image" content="..." />twitter:card= 공유 형식
공유되는 카드의 타입을 정할 수 있다.
summary, summary_large_image, app, playertitle,description,image
기본적으로 og 데이터를 사용하고 override 하고 싶을 경우에만 사용하면 된다.
상세한 트위터 메타 태그의 설정은 공식 홈페이지 가이드를 참고하자.
2. 페이스북
<meta name="fb:app_id" content="..." />fb:app_id= 페이스북 인사이트용 앱 ID
앱 ID는 페이스북 공유 디버거에서는 필수 자산이라고 추가하라고 하는데, 공식 문서에 따르면 더 이상 사용할 수 없다고 한다. 어쩌란거지 🤔