Facebook에서 미리보기로 표시 될 웹 사이트 이미지를 설정하려면 어떻게해야합니까?

156

페이스 북에서 링크를 공유하면 자동으로 웹 사이트에서 이미지를 찾고 임의로 미리보기로 선택합니다. 미리보기 이미지에 어떤 영향을 줄 수 있습니까? 사람이 페이스 북에서 웹 사이트 링크를 공유 할 때?

image facebook preview

— 표
소스

234

1. HTML 선언에 Open Graph XML 네임 스페이스 확장 포함

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:fb="http://ogp.me/ns/fb#">

2. 내부 <head></head>에서 다음 메타 태그를 사용하여 사용하려는 이미지를 정의하십시오.

<meta property="og:image" content="fully_qualified_image_url_here" />

오픈 그래프 프로토콜 에 대한 자세한 내용은 여기를 참조하십시오.

위의 작업을 수행 한 후 이미지가 올바르게 표시되지 않으면 Facebook "Object Debugger"를 사용하십시오 . 또한 높이와 너비를 지정하지 않으면 처음으로 공유해도 여전히 표시되지 않습니다 . Facebook에서 공유-축소판이 처음으로 표시되지 않음을 참조하십시오.

— 선반
소스

@Martin 잘 모르겠습니다. 어쩌면 그들은 할 수 있지만 Open Graph Protocol Docs에 언급되지 않았습니다 . 캐시 된 값이 사이트에 표시되는지 확인 하려면 디버거 를 사용해보십시오 . SO에 Facebook Open Graph 라는 제목의 또 다른 질문 이이 문제와 관련된 캐시를 지우지 않는 것 같습니다 .

— Shef

@KDog의 댓글 : 문제가 있습니까? 페이스 북 디버그 도구에서 코드를 확인하십시오. Facebook 캐시 이미지, 제목 및 본문. 웹 사이트에 xml을 추가하는 동안 제목을 변경했으며 실수로 유효성 검사 오류가 거의 발생하지 않았기 때문에 Facebook의 공유 미리보기에는 아무런 변화가 없었습니다. Facebook은 유효하지 않은 새 데이터를 표시하는 대신 유효한 캐시를 사용했습니다. developers.facebook.com/tools/debug 사용하여 이러한 오류를 해결할 수있었습니다 . 이렇게하면 새로운 타이틀과 이미지가 바로 표시됩니다.

— Jeremy Thompson

@ScotterMonkey : 예, 예상되는 동작입니다. 사용할 컨텐츠를 FB에 알려줄 수 있습니다. BTW, 당신은 FB에 게시 할 때 선택할 수 있도록 요소 <meta property="og:image" content="your_image_here" />사이 에 여러 개 를 추가 할 수 있습니다 head.

— Shef

html 선언에서 fb로 그 것을 놓쳤습니다. 내 하루를 구했다! (이것이 3 살짜리 게시물 인 경우에도). 고마워요!

— 최고의 프로그래머

콘텐츠 링크는 실제 URL입니다-내가 찾은 상대 링크가 아닙니다. 즉 http://mywebsite.com.au/Images/prettypic.png,/Images/prettypic.png

— JumpingJezza

또한 워드 프레스를 사용하는 경우 편집 모드에서 웹 페이지 하단으로 스크롤하여 "추천 이미지"(화면 오른쪽 하단)를 선택하십시오.

— davea0511
소스

Weebly를 사용하는 경우 게시 된 사이트를보고 이미지를 마우스 오른쪽 단추로 클릭하여 이미지 주소 복사로 시작하십시오. 그런 다음 Weebly에서 사이트 편집, 페이지로 이동하여 사용하려는 페이지 인 SEO 설정을 클릭하고 헤더 코드 아래에서 Shef의 답변 코드를 입력하십시오.

<meta property="og:image" content="/uploads/..." />

/ uploads / ...를 복사 된 이미지 주소로 바꾸면됩니다. 변경 사항을 적용하려면 공개를 클릭하십시오.

네임 스페이스에 대한 Shef의 답변 중 일부는 Weebly에서 이미 기본적으로 설정되어 있기 때문에 건너 뛸 수 있습니다.

— 크루 보
소스