og태그를 이용한 제목,이미지 제공 및 페이스북 썸네일 수정

반응형


og태그를 이용한 제목,이미지 제공 및 페이스북 썸네일 수정


안드로이드 소스는 아니지만 유용한 자료이다. 하이브리드 웹을 구현하거나 페이스북 공유내용의 제목이나 이미지 수정시 자주 이용하는 방법이다.


홈페이지 썸네일(thumbnail) 또는 페이스북 공유를 할 때, 썸네일이 제대로 뜨지 않거나 수정 된 썸네일이 적용되기를 원할 때가 있다.

* 썸네일(thumbnail) : 페이지 전체의 레이아웃을 검토할 수 있게 페이지 전체를 작게 줄여 화면에 띄운 것



1. 태그(Tag) 를 이용한 방법(홈페이지에 적용)


<head>

<meta name=”title” content=”홈페이지 제목” />

<meta name=”description” content=”내용, 설명글” />

<link rel=”image_src” href=”이미지경로” />

</head>


위의 내용을 <head></head>에 사이에 넣으면 된다.



2. 페이스북 썸네일 수정


- http://developers.facebook.com/tools/debug 

- 접속 후 주소를 넣으면 된다.


일반적으로 적용이 잘 되어 있다.





Fetch new scrape information를 누르면 변화된 썸네일의 적용을 확인하자. 만약, 변경되지 않았다면 Fetch new scrape information를 여러번 클릭해보면 된다.





* 블로그의 경우 적용하고자 하는 블로그을 수정모드로 접근 후 저장만 다시 눌러고 Fetch new scrape information를 클릭하면 적용이 잘 된다.


* 참고로 og 태그에 대한 부분도 함께 공부할 수 있다. 

<meta name=“description” content=”내용, 설명글” />

description을 site_name 등으로 바꾸어서 쓸 수도 있다.




모든 사진은 저작권의 보호를 받습니다. 

ⓒ IT and life, like1@naver.com

상업적사용은 금하며, 퍼가실때는 출처를 명기해주시기 바랍니다


반응형

이 글을 공유하기

댓글

Designed by JB FACTORY