요즘 SNS 공유하기 버튼은 필수!~
그런데 원하는 내용으로 공유가 잘 안되어 골치아프다..
meta태그를 이용하면, 공유하기 연동시 원하는 내용으로 설정할 수 있는데 SNS마다 조금씩 차이가 있기에 정리해본다.
meta태그 뿐 아니라 웹페이지의 기본속성인 <title>과 <meta name="description">, <meta name="keywords"> 등의 값은 검색에도 도움이 되니 꼭 설정해 주도록 하자!
- <!-- 페이스북 -->
- <meta property="og:title" content="제목"/>
- <meta property="og:site_name" content="사이트명"/>
- <meta property="og:type" content="분류 (website,article,place,product,event ...)"/>
- <meta property="og:url" content="주소"/>
- <meta property="og:image" content="썸네일 (200x200.jpg)"/>
- <meta property="og:description" content="요약글"/>
- <!-- 트위터 -->
- <meta name="twitter:card" content="분류 (summary, photo, gallery ...)">
- <meta name="twitter:title" content="제목">
- <meta name="twitter:site" content="사이트명">
- <meta name="twitter:creator" content="작성자명">
- <meta name="twitter:image" content="썸네일">
- <meta name="twitter:description" content="포스트 내용">
- <!-- 미투데이 -->
- <meta property="me2:post_body" content="포스트 내용"/>
- <meta property="me2:post_tag" content="태그"/>
- <meta property="me2:image" content="썸네일"/>
- <meta property="me2:latitude" content="위도"/>
- <meta property="me2:longitude" content="경도"/>
- <meta property="me2:post_icon" content="포스트 아이콘 (1~12 숫자"/>
- <meta property="me2:category1" content="카테고리1"/>
- <meta property="me2:category2" content="카테고리2"/>
이 외에도 몇가지 속성이 있기에.. 필요하다면 각 SNS의 개발 레퍼런스를 참고하자~
추가로 개발 레퍼런스의 주소가 바뀌는 경우도 있어서 캡쳐한 화면을 올리는데, 속성값이 변경될 수 있으니 적용이 안되면~ 가이드를 다시 찾아보자~
(2013년 11월 1일 기준)
페이스북
글 종류를 type으로 구분하여 사용
속성: https://developers.facebook.com/docs/opengraph/creating-object-types/#properties
타입분류: https://developers.facebook.com/docs/opengraph/property-types/
트위터
트위터는 글 종류를 card 타입으로 구분하여 사용
속성: https://dev.twitter.com/docs/cards/markup-reference
미투데이
사실 미투데이는 잘 안쓰고, 레퍼런스도 잘 못찾겠어서.. 일단 대충 패스 ㅎㅎ
플러그인 레퍼런스: http://me2day.net/me2/plugin/guide/metoo_plugins
API 레퍼런스: http://developer.naver.com/wiki/pages/Me2dayAPI
■ 연관된글
-
수용화(수원,용인,화성)커뮤니티(구)수원성 페이스북 그룹 오픈
-
메르스 관련 페이지 오픈
-
메르스 첫번째 희생자의 페이스북 내용
-
수수료 관련 메뉴 보완 및 기사 기본정보 툴팁기능 업데이트 안내