Obraz łącza do posta na Facebooku

95

Kiedy ktoś publikuje link na Facebooku, skrypt zwykle skanuje ten link w poszukiwaniu dowolnych obrazów i wyświetla krótką miniaturę obok posta. Jednak w przypadku niektórych adresów URL (w tym moich) FB nie wydaje się niczego wychwytywać, mimo że jest to wiele obrazów na tej stronie.

Czytałem, że FB preferuje tag rel "image_src" dla obrazu, który użytkownik chce określić, ale to nie generuje również tej miniatury dla mojej witryny.

Mój adres URL trafia bezpośrednio do DNS i nie jest przekazywany dalej, więc nie wyobrażam sobie, że może to być problem.

Czy ktoś ma pomysł, dlaczego FB nie może generować miniatur z mojej witryny?

facebook  thumbnails 
— GEOCHET
źródło
Byłoby pomocne, gdybyś podał nam link do swojej witryny (lub innej, która nie działa) - może to sprowokować kilka pomysłów.
— Nick Fortescue,
Tutaj możesz zobaczyć, jak to działa! Buduję go używając PHP + jQuery. Kod źródłowy jest dostępny do pobrania. Mam nadzieję, że ci się podoba! lab.leocardz.com/facebook-link-preview-php--jquery
— Leonardo Cardoso
a jeśli chcesz zrobić to samo w Google Plus, oto najlepszy link, jaki udało mi się znaleźć: stackoverflow.com/questions/7985398/…
— cregox.
— dcorking

Odpowiedzi:

119

Najprostszym sposobem jest po prostu tag linku:

<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />

Ale jest kilka innych rzeczy, które możesz dodać do swojej witryny, aby była bardziej przyjazna dla mediów społecznościowych:

Otwórz tagi wykresów

Tagi Open Graph to tagi, które dodajesz do <head>swojej witryny, aby opisać jednostkę, którą reprezentuje Twoja strona, czy jest to zespół, restauracja, blog czy coś innego.

Tag Open Graph wygląda następująco:

<meta property="og:tag name" content="tag value"/>

Jeśli używasz tagów Open Graph, wymaganych jest sześć następujących:

  • og:title - tytuł podmiotu.
  • og:type- rodzaj podmiotu. Musisz wybrać typ z listy typów Open Graph.
  • og:image- adres URL obrazu reprezentującego jednostkę. Obrazy muszą mieć co najmniej 50 na 50 pikseli. Obrazy kwadratowe działają najlepiej, ale możesz używać obrazów o maksymalnej szerokości trzykrotnie większej niż wysokość.
  • og:url- Kanoniczny, stały adres URL strony reprezentującej podmiot. Gdy używasz tagów Open Graph, przycisk Like publikuje łącze do og:urlzamiast adresu URL w kodzie przycisku Like.
  • og:site_name - Czytelna dla człowieka nazwa witryny, np. „IMDb”.
  • fb:adminslub fb:app_id- Lista oddzielonych przecinkami identyfikatorów Facebook administratorów stron lub identyfikatorów aplikacji platformy Facebook. Jako minimum podaj tylko swój własny identyfikator Facebooka.

Więcej informacji na temat tagów Open Graph i szczegółów dotyczących administrowania stroną można znaleźć w dokumentacji protokołu Open Graph.

http://developers.facebook.com/docs/reference/plugins/like

— WyrdNEXUS
źródło
5
Otrzymałem ten błąd z narzędzia lint. All the images referenced by og:image must be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the minimum specification.. Tylko fyi
— Trevor
Dodałem tagi og w swoim kodzie i kiedy przetestowałem go za pomocą narzędzia do debuggera obiektów og na Facebooku, pokazuje mi poprawne informacje, ponieważ zapisałem w tagach og, ale kiedy próbuję połączyć stronę na moim koncie fb, pokazuje Tylko kopia w pamięci podręcznej. Ile czasu fb przechowuje kopię w pamięci podręcznej? Czy istnieje inny sposób opróżnienia kopii z pamięci podręcznej?
— KAsh
Aby Cię poinformować, jedynym sposobem na dodanie obrazu do posta podczas korzystania z AppLinks ( applinks.org ) w aplikacji na Facebooku jest użycie tagu <link>, użycie tagu <meta> z og: image NIE zadziała .
— emerino
Zawiera listę typów itp. Oraz kilka innych przydatnych informacji.
— Wilf
61

Wiem, że to pytanie jest stare, ale ostatnio zajmowałem się dokładnie tym samym problemem i krążyłem wokół niego przez kilka tygodni. Wielokrotne wyszukiwania w Google dostarczyły wielu przydatnych informacji, ale większość z nich skupiła się na tagach Open Graph, których nie byłem zainteresowany używaniem. Okazuje się, że moja witryna miała wiele problemów, ale oto kilka podstaw.

  1. Jak powiedział EightyEight, upewnij się, że kod HTML jest prawidłowy - i to samo dotyczy kodu JavaScript i kodu po stronie serwera (PHP, ASP itp.). Wystąpił mały błąd PHP w fragmencie kodu wykonywanym jako oddzielne wywołanie serwera ze strony głównej. Z powodu wielu dziwnych zbiegów okoliczności kod ten generował błąd 500 - ale TYLKO dla IE6 i surowych silników parsujących, takich jak walidator W3C i robot indeksujący strony na Facebooku. Problem nie pojawił się w nowoczesnych przeglądarkach (Chrome 4, FF 3.5, IE 8 itp.), Więc nie widziałem go od razu, ale starsi / bardziej rygorystyczni klienci za każdym razem pokazywali 500 i to był główny powód, dla którego FB nie był nie indeksuje naszej strony (kiedy wszystko inne wydawało się być poprawne).

  2. Odnośnie odpowiedzi Randy'ego, ma rację, że Facebook zachowa starą kopię twojej strony w pamięci podręcznej długo po jej zaktualizowaniu. FB twierdzi, że trwa to tylko 24 godziny, ale ja doświadczyłem znacznie dłużej. NA POCZUCIE FB wydało swoje narzędzie „URL Linter”, które pokaże Ci podgląd Twojej strony podczas udostępniania na FB i zmusi FB do natychmiastowej aktualizacji pamięci podręcznej Twojej strony. To było narzędzie ratujące życie. Możesz go znaleźć pod adresem http://developers.facebook.com/tools/lint/

  3. Jeśli chodzi o narzędzie URL Linter, pamiętaj, że każda odmiana adresu URL jest przechowywana oddzielnie w pamięci podręcznej na Facebooku, więc „www.example.com” to nie to samo, co „example.com”. Ponadto, unikalna kapitalizacja jest przechowywana, tak więc „ExampleOne.com” to nie to samo co „exampleone.com”. (Doprowadziło to do wielu nieporozumień między moim klientem a mną, gdy okazało się, że pamięć podręczna została zaktualizowana dobrze, a klient twierdził, że nie widzi aktualizacji. Okazało się, że przeglądałem witrynę exampleone.com i użyłem Linter, aby zaktualizować pamięć podręczną, ale szukali witryny exampleOne.com, której nie przesłałem Linterowi. W rezultacie przesłałem Linterowi kilka odmian adresu URL, aby pokryć podstawy).

  4. Rada WyrdNEXUS dotycząca używania tagu linku image_src jest trafna. Dzięki temu masz pewność, że FB pobiera najlepszy możliwy obraz dla Twojej strony. Istnieje kilka różnych wytycznych dotyczących specyfikacji, które powinien mieć plik obrazu, ale z powodzeniem użyłem obrazu kwadratowego o rozmiarze 128 pikseli i widziałem, jak obraz 130x97 również przeszedł. Oto oficjalna dokumentacja Facebooka z http://developers.facebook.com/docs/reference/plugins/like/ :

    Obrazy muszą mieć co najmniej 50 na 50 pikseli. Obrazy kwadratowe działają najlepiej, ale możesz używać obrazów o maksymalnej szerokości trzykrotnie większej niż wysokość.

    Oczywiście FB zmieni dla Ciebie rozmiar dużego obrazu, ale prawie zawsze uzyskasz lepsze wyniki, jeśli wcześniej zmienisz rozmiar.

  5. Jeśli chodzi o link Mike'a Coopera do artykułu eHow, unikaj kroku 1 w tym artykule. To była ważna rada, kiedy artykuł został napisany i kiedy Mike zamieścił łącze, ale teraz lepiej jest użyć narzędzia URL Linter, aby wyświetlić podgląd strony podczas udostępniania. Używając Lintera, nie spowodujesz, że FB buforuje (potencjalnie) złą kopię strony, zanim będziesz miał szansę ją poprawić.

— OneRuler
źródło
Walczyłem przez wiele dni i moja miniatura nie była poprawnie aktualizowana. Narzędzie Facebook Linter natychmiast rozwiązało mój problem - Facebook zaktualizował swoją pamięć podręczną! Brawo!
— Hady
Bardzo dziękuję za to narzędzie linter. Niektóre posty na moim blogu zawierały obrazy, inne nie, mimo że były witryną opartą na bazie danych. Umieszczenie adresu URL strony naruszającej zasady w URL Linter zmusiło ją do buforowania obrazu! Woo-HOO!
— kristina childs
4
narzędzie lint zmieniło nazwę. teraz to tylko debugowanie : developers.facebook.com/tools/debug - z tego, co mogę powiedzieć, jest to wersja tl; dr tego wszystkiego: po prostu użyj narzędzia!
— cregox,
11

Aby zmienić tytuł, opis i obraz, musimy dodać kilka metatagów pod tagiem head.

KROK 1: Dodaj metatagi pod tagiem head

<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />

KOLEJNY KROK: Kliknij poniższy link https://developers.facebook.com/tools/debug

Dodaj swój adres URL w polu tekstowym (np. Http://www.test.com/ ), w którym wspomniałeś o tagach. Kliknij przycisk DEBUGUJ.

Zrobione.

Możesz zweryfikować tutaj https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/

W powyższym adresie URL u = link do Twojej witryny

CIESZYĆ SIĘ !!!!

— Gaurav123
źródło
Nie publikuj dokładnie tej samej odpowiedzi na wiele pytań: albo nie jest to dobre rozwiązanie dla wszystkich, albo pytania są duplikatami, które powinny zostać oznaczone / zamknięte jako takie.
— kleopatra
Cześć Kleopatra, myślałem o opublikowaniu odpowiedzi, aby pomóc innym. Myślę, że twój punkt widzenia jest całkowicie słuszny. Zajmę się tym. Dzięki przyjacielowi
— Gaurav123
@ Gaurav123 link testowy nie działa. Jednak sprawdziłem to, wysyłając sobie wiadomości na Facebooku. Bardzo dziękuję za bardzo pomocną odpowiedź!
— gsamaras
2

Właściwie, jeśli próbowałeś już połączyć tę stronę na Facebooku PRZED dodaniem linku „image_src”, Facebook będzie nadal używał starej kopii z pamięci podręcznej i nawet nie zobaczy twoich zmian. Spróbuj zmodyfikować adres URL, usuwając lub dodając „www” albo zduplikuj swoją stronę, aby ją przetestować.

— Niespokojny
źródło
1

Zauważyłem, że Facebook nie pobiera miniatur ze stron internetowych, jeśli zaczynają się od https, czy to może Twój przypadek?

— raRaRa
źródło
1

miałem ten sam problem i zorientowałem się, że tag zamykający moją głowę jest w złym miejscu

— Diego
źródło
0

Stare pytanie, ale ostatnio wydawało mi się, że mam ten sam problem z miniaturami z mojego linku, które nie są wyświetlane w aktualizacjach statusu na Facebooku. Publikuję dla wielu klientów i jest to stosunkowo nowe.

Wydaje się, że FB nie lubi już długich adresów URL - jeśli używasz narzędzia do skracania adresów URL, takiego jak goo.gl lub bitly.com, miniatura z linku / posta pojawi się w aktualizacji na FB.

— karen kouf
źródło
0

Spróbuj użyć czegoś takiego:

<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`

Wydaje się, że działa dobrze w przeglądarce Firefox, o ile używasz pełnej ścieżki do obrazu.

Problem polega na tym, że z jakiegoś powodu jest on pionowo przesunięty w dół. Obraz ma wymiary 200 x 200, zgodnie z zaleceniami gdzieś czytałem.

— user2494810
źródło
Zamierzam opublikować kod tagu linku, który nie został wysłany, ponieważ jestem głupi. Przepraszam.
— user2494810
-1

Jeśli używałeś jakiejkolwiek wtyczki do SEO, najpierw sprawdź ustawienia wtyczki seo, a następnie sprawdź ustawienie Noindex, jeśli Włącz Media for Noindex, a następnie je wyłącz.

— Milon Patowary
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.