Jak mogę ustawić obraz witryny, który będzie wyświetlany jako podgląd na Facebooku?

156

Kiedy udostępnisz link na Facebooku, automatycznie znajdzie obrazy na stronie i losowo wybierze jeden jako podgląd. Jak możesz wpłynąć na podgląd obrazu? Kiedy ktoś udostępnia link do strony na swoim Facebooku?

image facebook preview znak
źródło

Odpowiedzi:

234

1. Dołącz rozszerzenie przestrzeni nazw Open Graph XML do deklaracji HTML

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

2. Wewnątrz <head></head>użyj następującego metatagu, aby zdefiniować obraz, którego chcesz użyć

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

Przeczytaj więcej o protokole Open Graph tutaj.

Po wykonaniu powyższych czynności użyj Facebooka „Object Debugger”, jeśli obraz nie wyświetla się poprawnie. Pamiętaj również, że przy pierwszym udostępnieniu nadal nie pojawi się, chyba że określono również wysokość i szerokość, zobacz Udostępnij na Facebooku - Miniatura nie jest wyświetlana po raz pierwszy

Shef
źródło
2
@Martin nie jestem świadomy. Może tak, ale nie widzę tego w dokumentacji protokołu Open Graph . Wypróbuj debugera, aby sprawdzić, czy wartości zapisane w pamięci podręcznej są wyświetlane dla Twojej witryny. Wydaje się, że w SO zatytułowanym Facebook Open Graph nie czyści pamięci podręcznej związanej z tym problemem.
Shef
7
Komentarz @KDog: Masz problemy? Sprawdź swoje kody na facebookowym narzędziu do debugowania. Obraz, tytuł i treść w pamięci podręcznej Facebooka. Zmieniłem tytuł podczas dodawania XML do mojej strony internetowej, a ponieważ przypadkowo utworzyłem kilka błędów walidacji, nic się nie zmieniło w podglądzie udostępniania Facebooka. Facebook użył poprawnej pamięci podręcznej zamiast pokazywać nieważne nowe dane. Udało mi się rozwiązać te błędy za pomocą developers.facebook.com/tools/debug . Po wykonaniu tej czynności mój nowy tytuł i obrazy pojawiają się od razu.
Jeremy Thompson
3
@ScotterMonkey: Tak, to jest oczekiwane zachowanie. Jesteś w stanie powiedzieć FB, jakiej treści użyć. Przy okazji, możesz dodać wiele elementów <meta property="og:image" content="your_image_here" />między headelementami, dzięki czemu będziesz mógł wybierać, kiedy publikujesz na FB.
Shef
2
Przegapiłem tę rzecz z fb w deklaracji HTML. Uratowałem mój dzień! (nawet jeśli jest to post sprzed trzech lat). Wielkie dzięki!
bestprogrammerintheworld
17
link do treści to rzeczywisty adres URL, a nie odnośnik względny, którego się dowiedziałem. czyli http://mywebsite.com.au/Images/prettypic.pngnie/Images/prettypic.png
JumpingJezza
4

Zwróć również uwagę, że jeśli masz wordpress, po prostu przewiń stronę w dół w trybie edycji i wybierz „wyróżniony obraz” (dolna prawa część ekranu).

davea0511
źródło
1

Jeśli używasz Weebly , zacznij od wyświetlenia opublikowanej witryny i kliknięcia prawym przyciskiem myszy obrazu, aby skopiować adres obrazu. Następnie w Weebly przejdź do Edytuj witrynę, Strony, kliknij stronę, której chcesz użyć, Ustawienia SEO, w sekcji Kod nagłówka wprowadź kod z odpowiedzi Shefa:

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

wystarczy zamienić / uploads / ... na skopiowany adres obrazu. Kliknij Opublikuj, aby zastosować zmianę.

Możesz pominąć część odpowiedzi Shefa na temat przestrzeni nazw, ponieważ jest ona już ustawiona domyślnie w Weebly.

krubo
źródło