SNS 공유하기 버튼 제작을 진행하고 나서 알게 된 META 태그 내용을 한번 정리해봤습니다.
평소 HTML 소스보기에 보이던 태그들이 무슨 의미인지 이번 기회에 정확히 이해할 수 있을 겁니다.
개발자 혹은 마케터 분들의 현업에 유용한 정보로 잘 사용되길 바랍니다.
HTM 상단 필수 태그
<link rel="image_src" href="http://사이트.com/대표이미지.png" /> 대표 이미지 URL (이미지를 여러 개 지정할 수 있음)
<link rel="image_src" href="http://사이트.com/대표이미지2.png" /> 대표 이미지 URL (이미지를 여러 개 지정할 수 있음)
<meta name="description" content="C.m.A API 이야기,API,OPEN API,XML,PHP,MYSQL,Jvascript,Html,chongmoa.com,홈페이지,cms,쇼핑몰,큐알코드생성,QR Code Generator,IP Address Lookup,유닉스타임변환,Unix Timestamp Converter,유닉스타임을 날짜로 변환,Unix timestamp to DateTime" /> 페이지 설명대대표 이미지는 복수 설정도 가능하다는 것 아셨나요?
description 은 반드시 채우시는 것을 권장해 드립니다.
트위터(현재 X) 관련 메타태그
<meta name="twitter:card" content="summary" /> 트위터 카드 summary는 웹페이지에 대한 요약정보를 보여주는 카드로 우측에 썸네일을 보여주고 그 옆에 페이지의 제목과 요약 내용을 보여준다.
<meta name="twitter:url" content="http://chongmoa.com" /> 트위터 카드를 사용하는 표시하고싶은URL
<meta name="twitter:title" content="C.m.A API 이야기 [chongmoa.com]" /> 트위터 카드에 나타날 웹 사이트의 제목
<meta name="twitter:description" content="C.m.A API 이야기,API,OPEN API,XML,PHP,MYSQL,Jvascript,Html,chongmoa.com,홈페이지,cms,쇼핑몰,큐알코드생성,QR Code Generator,IP Address Lookup,유닉스타임변환,Unix Timestamp Converter,유닉스타임을 날짜로 변환,Unix timestamp to DateTime" /> 트위터 카드에 나타날 요약 설명
<meta name="twitter:image" content="http://chongmoa.com/대표이미지.png" /> 트위터 카드에 보여줄 대표 이미지 URL
<meta name="twitter:site" content="@트위터아이디" /> 트위터 카드에 사이트 배포자 트위터아이디
<meta name="twitter:creator" content="@트위터아이디" /> 트위터 카드에 배포자 트위터아이디하X(트위터) 인기가 이전만 못하지만, 그래도 정의해두시는게 트래픽에 도움이 될 것입니다.
페이스북(FB) 관련 메타태그
<meta property="fb:app_id" content="앱아이디" /> 앱아이디
<meta property="og:title" content="C.m.A API 이야기" /> 웹 사이트의 제목
<meta property="og:type" content="website" /> 사이트 종류
<meta property="og:image" content="http://chongmoa.com/대표이미지.png" /> 대표 이미지 URL (이미지를 여러 개 지정할 수 있음)
<meta property="og:image" content="http://chongmoa.com/대표이미지2.png" /> 대표 이미지 URL (이미지를 여러 개 지정할 수 있음)
<meta property="og:site_name" content="C.m.A API 이야기 [chongmoa.com]" /> 웹 사이트의 제목
<meta property="og:url" content="http://chongmoa.com" /> 표시하고싶은URL
<meta property="og:description" content="C.m.A API 이야기,API,OPEN API,XML,PHP,MYSQL,Jvascript,Html,chongmoa.com,홈페이지,cms,쇼핑몰,큐알코드생성,QR Code Generator,IP Address Lookup,유닉스타임변환,Unix Timestamp Converter,유닉스타임을 날짜로 변환,Unix timestamp to DateTime" /> 페이지 설명페페이스북(FB) 메타태그는 SEO측면에서 중요합니다. 꼭 설정해 두시는걸 권장해 드립니다.
og:image 규칙
- 이미지의 사이즈는 최소 50×50 이상이어야 한다.
- 이미지의 가로세로 혹은 세로가로 비율이 3:1이 넘지 말아야 한다.
- 이미지 포맷은 png, jpeg, gif를 지원한다.