페이스북 공유시 나오는 정보 수정 방법

일단 페이스북에 주소를 입력하거나 공유하게 되면 나오는 정보들이 있다.
이 정보들을 사이트에 설정하려면 아래 링크를 찾아가서 메타 태그를 헤더안에 넣으면 된다.

https://developers.facebook.com/docs/sharing/best-practices?locale=ko_KR

 

그리고 나온 정보가 제대로 반영되지 않을 때는 페이스북 개발툴에서 캐시를 삭제한다. 

https://developers.facebook.com/tools/debug/og/object/

위 주소로 접속하면 캐시를 지울 사이트 주소를 입력하는 칸이 나온다.
주소를 입력하고 'Show existing scrape information'를 누르면 설정된 값들이 나열 된다.
 'Fetch new scrape information' 라는 버튼을 누르면 캐시를 삭제하고 새로운 정보를 불러오게 된다.

앞으로 새로 바뀐 정보로 노출되게 된다.


추가) 공유시 정보가 나오게 하는 html 태그 입력 방법

페이스북에서 제공해주는 샘플 이미지를 이용해서 만들어 보도록 하겠다.

url을 입력하거나 공유하게 되면 이렇게 정보가 뜬다.
샘플 이미지에 있는 Forever21 Red ~~ 라고 쓰인 글은 og:title  , $2 Shipping ~ 라고 쓰인 글은 og:description , www.vinted.com 아라고 쓰인 글은 og:url 이다.

그러면 아래와 같이 코드를 <head>와 </head> 사이에 아무 곳에나 넣으면 된다.

<meta property="og:site_name" content="본인 사이트 이름 넣는 곳"/>
<meta property="og:title" content="공유되는 컨텐츠의 제목"/>    
<meta property="og:description" content="공유되는 컨텐츠의 설명" />
<meta property="article:author" content="컨텐츠 작성자" />
<meta property="og:url" content="공유될 접속 주소" />
<meta property="og:image" content="썸네일로 쓰일 이미지 주소" />

 위 코드에서 site_name과 author는 샘플 이미지에 노출되는 값은 없다.

하지만 다른 기능에서 활용되어질 때 사용되어지니 쓰는 편이 좋다.

그리고 썸네일로 쓰여질 이미지의 사이즈는 페이스북에서 1200 x 630 가 고해상도 디바이스에서도 잘 보이는 최적의 사이즈라고 한다.

그래도 너무 크다 싶으면 600 x 315 의 사이즈를 만들라고 한다. 이렇게 만들면 아래와 같이 큰 이미지로 위 아래 분할되어 나온다.

 

또는 이미지를 작게 해서 컨텐츠와 좌 우로 분할되어서 나오게 하려면 600 x 315 작게 만들면 된다.

이렇게 작게 나오면서 좌측에 배치되게 된다.

 

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

6 댓글
Oldest
Newest
Inline Feedbacks
View all comments
김지수
김지수
9 years ago

자세한 설명 감사합니다! 다만 제가 초보자라 그런데요 헤드가 홈페이지 헤드가 아니라 글을 쓸 때 본문에서 html 편집기에 들어간 헤드인가요? ㅠㅠㅠㅠ 정말 이런 걸 물어본다는 게 죄송하네요........

mynain
mynain
9 years ago
Reply to  김지수

사이트 제작할 때 head입니다. html 안의 소스예요.
html 구조는 html 안에 head와 body로 되어있고 그 중에 head입니다.
무슨 뜻인지 모르시면 무엇보다 html 기본 구조부터 파악하신 후에 적용해보셔야할 것 같습니다.

김지수
김지수
9 years ago
Reply to  mynain

알고 있습니다..ㅠㅠ 제가 말한 것은 다른 사람의 홈페이지 url을 제 홈페이지 게시판에 복사했을 때 그 링크의 값을 가져오는 것인데 여기 써진 것은 제 홈페이지 게시물 값을 페북에 넣는 게 아닌가요? ㅠㅠㅠㅠㅠㅠ

mynain
mynain
9 years ago
Reply to  김지수

직접 답변 드린 것처럼 요청하시는 기능은 각 포스팅(게시물) 마다 해당하는 컨텐츠로 공유되게 하는 것인데 이 기능은 스크립트와 php를 이용해서 각 페이지 헤더부분에 해당 정보를 자동으로 수정하게 하는 작업이 필요합니다.
xe를 쓰신 다고 하셨는데 아마 플러그인 중에 있지 않을까 생각해요.
워드프레스 경우 거의 기본 제공이라 가능합니다.

대협 김
대협 김
9 years ago
Reply to  mynain

워드프레스의 경우 외모 → 테마편집기에서 하는건가요?

mynain
mynain
9 years ago
Reply to  대협 김

워드프레스의 경우에는 각 포스팅마다 퍼말링크와 제목 내용이 다 다르니까 그에 해당되는 내용이 제대로 적용되려면 직접 php를 건드리시거나 유용한 플러그인을 설치하시는게 좋을 것 같아요.

TOP