FB OpenGraph og: obraz nie ciągnie obrazów (ewentualnie https?)

Po pierwsze -- ja nie wierzę że to jest duplikat sprawy. Szukałem tych samych lub podobnych problemów tak szeroko, a ze względu na charakter rozwiązywania problemów przed zapytaniem, uważam, że ten problem jest wyjątkowy.

Facebook nie może uchwycić moich plików og:image i próbowałem każdego zwykłego rozwiązania. Zaczynam myśleć, że to może mieć coś wspólnego z https://...

  • sprawdziłem http://developers.facebook.com/tools/debug i mają zero ostrzeżeń lub błędy.
  • to znajdowanie obrazów, z którymi połączyliśmy się w "og:image", ale są puste. Kiedy klikamy na obrazek(y), jednak one istnieją i trwa od razu do nich.
  • pokazuje jeden obraz -- obraz hostowany na serwerze non-https.
  • próbowaliśmy kwadratowych obrazów, JPEG, pngs, większych rozmiarów i mniejszych rozmiarów. Umieściliśmy zdjęcia bezpośrednio w public_html. Zero się pojawia.
  • to nie jest błąd buforowania, ponieważ gdy dodamy kolejny og:image do meta, Linter FB znajduje i czyta. Pokazuje podgląd. Podgląd jest pusty. Tylko wyjątek, który otrzymujemy, dotyczy Zdjęć, których nie ma na tej stronie.
  • pomyśleliśmy, że może na cpanel lub .htaccess jest jakiś anty-leach, który uniemożliwiał wyświetlanie obrazów, więc sprawdziliśmy. Nie było. Zrobiliśmy nawet szybki < img src="[remote file]" > na zupełnie innym serwerze i obraz pokazuje się dobrze.
  • myśleliśmy, że to może być og:type lub inny dziwactwo z innym meta tag. Usunęliśmy wszystkie, po kolei i sprawdziliśmy. Bez zmian. Tylko ostrzeżenia.
  • ten sam kod na innej stronie pojawia się bez problemu.
  • myśleliśmy, że może to nie było ściąganie obrazów, ponieważ używamy tej samej strony produktu(stron) dla wielu produktów (zmieniając ją na podstawie wartości get, czyli "details.php?id = xxx"), ale to nadal ciągnie w jednym obrazku (z innego adresu url).
  • pozostawiając jakiekolwiek og:image lub image_src wyłączone, FB Nie znajduje żadnych obrazy.

Jestem na końcu mojej liny. Gdybym powiedział, ile czasu spędziliśmy nad tym razem, byłabyś w szoku. Problem w tym, że jest to sklep internetowy. My absolutnie, pozytywnie nie możemy nie mieć obrazów. Musimy. Mamy około 10 innych stron... Tylko ten ma og:image problemy. Jest też jedyny na https, więc pomyśleliśmy, że może w tym tkwi problem. Ale nie możemy znaleźć żadnego precedensu w sieci na to.

Są to meta-tagi: 

<meta property="og:title" content="[The product name]" /> 
<meta property="og:description" content="[the product description]" /> 
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />      
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">

Jeśli chcesz, oto link do jednej z naszych stron produktowych, nad którymi pracowaliśmy. [Link skrócony, aby ograniczyć to wchodzenie do wyników wyszukiwania naszej Strony]: http://rockn.ro/114

EDIT - - - -

Za pomocą skrobaka "zobacz, co widzi facebook", byliśmy w stanie zobaczyć: 

"image": [          
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
      },
      {
         "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
      },
      {
         "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
      }
   ],

Przetestowaliśmy wszystkie znalezione linki dla jednej strony. Wszystkie były doskonale poprawnymi obrazami.

Edytuj 2 ----

We wypróbowałem test i dodałem subdomenę do strony NONSECURE (z której zdjęcia są faktycznie widoczne przez facebook). Subdomena była http://img. [nonsecuresite].com. następnie umieszczamy wszystkie obrazy w głównym folderze subdomeny i odnosimy się do nich. Nie wciągnie tych zdjęć na FB. Jednak nadal pobierałby wszystkie obrazy, do których odwołano się w nonsecure main domain.

POSTED WORKAROUND - - - -

Dzięki Keegan, teraz wiemy, że jest to błąd w Facebook. Na obejście problemu, umieściliśmy subdomenę w innej witrynie bez HTTPS i wrzuciliśmy do niej wszystkie obrazy. Odnieśliśmy się do koordynującego http://img.otherdomain.com/[like-image.jpg] obrazu w og:image na każdej stronie produktu. Następnie musieliśmy przejść przez FB Linter i uruchomić każdy link, aby odświeżyć dane OG. To zadziałało, ale rozwiązaniem jest obejście problemu, a jeśli problem https zostanie rozwiązany I wrócimy do korzystania z naturalnej domeny https, FB będzie buforował obrazy z innej strony internetowej, co komplikuje sprawy. Mam nadzieję, że ta informacja pomaga uratować kogoś innego przed utratą 32 godzin kodowania z ich życia.

Author: sakibmoon, 2012-01-13
Source

18 answers

Napotkałem ten sam problem i zgłosiłem go jako błąd na stronie dewelopera Facebook. Wydaje się całkiem jasne, że Uri og: image przy użyciu HTTP działają dobrze, a URI przy użyciu HTTPS nie. Teraz przyznali, że " przyglądają się temu."

Błąd można zobaczyć tutaj: https://developers.facebook.com/bugs/260628274003812

 75
Author: Keegan Quinn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-18 13:25:16

Niektóre właściwości mogą mieć dołączone dodatkowe metadane. Są one określone w taki sam sposób, jak inne metadane z property i content, ale property będą miały dodatkowe :

Właściwość og:image ma pewne opcjonalne właściwości strukturyzowane:

  • og:image:url - identyczny z og:image.
  • og:image:secure_url - An alternatywny adres url do użycia, jeśli strona internetowa wymaga HTTPS.
  • og:image:type - A Typ MIME dla tego obrazu.
  • og:image:width - liczba pikseli szerokości.
  • og:image:height - Liczba pikseli wysoka.

Przykład pełnego obrazu: 

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="400" /> 
<meta property="og:image:height" content="300" />

Więc musisz zmienić właściwość og:image dla adresów URL HTTPS na og:image:secure_url

Ex:

HTTPS META TAG DLA OBRAZU: 

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

HTTP META TAG DLA OBRAZU: 

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />

Źródło: http://ogp.me/#structured Mam nadzieję, że to ci pomoże.

EDIT: nie zapomnij ping facebook serwery po aktualizacji kodów- URL Linter

 116
Author: Syed I.R,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-27 10:21:19

Nie wiem, czy to tylko u mnie, ale dla mnie og:image nie działa i wybiera logo mojej strony, mimo żefacebook debugger pokazuje poprawny obraz.

Ale zmiana og:image na og:image:url zadziałała. Mam nadzieję, że pomoże to każdemu, kto ma podobny problem.
 12
Author: lalit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-11 20:37:44

Dostałem się z Google, ale to nie było dla mnie zbyt pomocne. Okazało się, że dla logo wymagany jest minimalny współczynnik proporcji 3:1. Mój był prawie 4: 1. Użyłem Gimp ' a, żeby przyciąć go do dokładnie 3: 1 i voila-moje logo jest teraz pokazane na FB.

 8
Author: priiiiit,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-20 10:38:40

Tl; dr - Bądź cierpliwy

Wylądowałem tutaj, ponieważ widziałem puste obrazy serwowane ze strony https. Problem był jednak zupełnie inny:

Gdy zawartość jest udostępniana po raz pierwszy, robot Facebook zeskrobuje i buforuje metadane z udostępnionego adresu URL. Robot musi zobaczyć obraz przynajmniej raz, zanim będzie mógł zostać renderowany. Oznacza to, że pierwsza osoba, która udostępni fragment treści, nie zobaczy renderowanego obraz

[https://developers.facebook.com/docs/sharing/best-practices/#precaching]

Podczas testowania, facebook zajęło około 10 minut, aby w końcu pokazać renderowany obraz. Więc kiedy drapałem się po głowie i rzucałem losowymi znacznikami og na facebook (i podejrzewałem wspomniany tutaj problem https), wszystko, co musiałem zrobić, to poczekać.

Ponieważ może to naprawdę powstrzymać ludzi od udostępniania linków po raz pierwszy, FB proponuje dwa sposoby obejścia tego zachowanie: a) uruchomienie debuggera OG na wszystkich linkach: obrazek będzie buforowany i gotowy do udostępnienia po ~10 minutach lub b) podanie og:image:width i og:image:height. (Czytaj więcej w powyższym linku)

Wciąż się zastanawiam, co im tak długo zajmuje ...

 6
Author: panepeter,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-02 17:35:42

Miałem ten sam błąd i nic z poprzednich nie pomogło, więc próbowałem podążać za oryginalną dokumentacją Open Graph Protocol {[3] } i dodałem atrybut prefix do mojego znacznika html i wszystko stało się niesamowite.

<html prefix="og: http://ogp.me/ns#">
 4
Author: VoVaVc,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-11-07 22:46:09

Miałem podobne problemy. Usunąłem właściwość = "og: image: secure_url" i teraz będzie szorować tylko og: image. Czasami mniej znaczy więcej

 1
Author: HappaGirl,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-22 22:00:09

Odkryłem inny scenariusz, który może powodować ten problem. Przeszedłem przez wszystkie kroki opisane w pytaniu i odpowiedziach, nadal problem pozostał.

Sprawdziłem moje zdjęcia i okazało się, że niektóre z moich postów miały zbyt duże miniatury w og:image w zakresie kilku tysięcy pikseli i kilku megabajtów.

Stało się to z powodu niedawnej migracji z WP do Jekyll, zoptymalizowałem moje obrazy za pomocą gulp, ale użyłem oryginalnych obrazów w og: image by błąd.

Facebook daje nam następujące zalecenia od dzisiaj:

Użyj obrazów o rozdzielczości co najmniej 1200 x 630 pikseli, Aby uzyskać najlepszy wyświetlacz na urządzenia o wysokiej rozdzielczości. Co najmniej, należy użyć obrazów, które są 600 x 315 pikseli, aby wyświetlać posty na stronie z linkami z większymi obrazami. Obrazy mogą mieć rozmiar do 8 MB.

Więc jest górna granica 8MB.

 1
Author: Mark,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-31 10:56:17

Natknąłem się na ten sam problem i zauważyłem, że mam inną domenę dla og:url

Kiedy upewniłem się, że domena jest taka sama dla og:url i og:image to działało.

Mam nadzieję, że to pomoże.
 1
Author: Darren Hall,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-02 21:04:19

Nie zapomnij odświeżyć serwerów poprzez:

Facebook Debugger

I kliknij "Zbierz nowe informacje"

 1
Author: FrenchFalcon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-24 18:48:48

W moim przypadku problem polegał na nie udostępnieniu Ca Root Certificate . Domyśliłem się po użyciu: https://www.ssllabs.com/ssltest/analyze.html do analizy konfiguracji SSL.

 1
Author: instead,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-10 00:57:09

Widzę, że debuger pobiera 4 og:image tagi z twojego adresu URL.

Pierwszy obraz jest największy i dlatego ładowanie trwa najdłużej. Spróbuj zmniejszyć ten pierwszy obraz lub zmień kolejność, aby najpierw wyświetlić mniejszy obraz.

 0
Author: Lix,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-13 23:44:44

Ponadto problem ten występuje również, gdy dodajesz historię generowaną przez użytkownika (gdzie nie używasz og:image). Na przykład: 

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

Powyższe będzie działać tylko z http, a nie z https. Jeśli używasz https, pojawi się błąd, który mówi:: Dołączony obraz () nie udało się przesłać

 0
Author: Aamir Quraishi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-13 22:48:51

Jak przypadkowo znalazłem, przezroczysty pusty obraz zawiera nagłówek odpowiedzi wskazujący możliwą przyczynę problemu.

  1. przejdź do debuggera na https://developers.facebook.com/tools/debug/og/object /
  2. Umieść swój URL
  3. na dole facebook pokazuje twoje "zdjęcie" (przezroczysty GIF 1x1)
    1. obraz jest połączony z oryginalnym obrazem-nie ma sensu go naciskać
    2. Naciśnij w prawo i zobacz obraz (dostaniesz coś w rodzaju https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
  4. Włącz Net tab na Firebug / developer tools, odśwież stronę w razie potrzeby
  5. otrzymasz x-error-detail nagłówek odpowiedzi z wyjaśnieniem

Na przykład w moim przypadku było to Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

Prawdziwy problem w moim przypadku był związany z prerender.io .

Jak się okazuje, jeśli obraz jest żądany przez prerender, jest konwertowany do HTML. Coś takiego: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

To albo bug w samym prerenderze, albo ma być skonfigurowany w proxy nie używać prerender dla *.jpg żądania (nawet jeśli są one wymagane przez bota Facebook).

Naprawdę trudno to zauważyć, ponieważ prerender jest używany tylko na niektórych nagłówkach user-agent.

 0
Author: Marius Balčytis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-31 19:07:55

Z tego, co zaobserwowałem, widzę, że gdy Twoja strona jest publiczna i mimo że adres URL obrazu jest https, po prostu działa dobrze.

 0
Author: AK M,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-07 10:42:48

Dla mnie to zadziałało: 

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/>
 0
Author: Dr.MTR,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-29 11:48:14

Podobne objawy (Facebook i inni nieprawidłowo pobierają obraz og: i inne zasoby przez https) mogą wystąpić, gdy certyfikat https witryny nie jest w pełni zgodny.

Certyfikat https Twojej witryny może wydawać się ważny( zielony klucz w przeglądarce i w ogóle), ale nie będzie skrobał poprawnie, jeśli brakuje certyfikatu pośredniego lub łańcucha. Może to prowadzić do wielu zmarnowanych godzin sprawdzania i ponownego sprawdzania wszystkich różnych pamięci podręcznych i meta tagów.

Może to nie był twój problem, ale może być inne z podobnymi objawami(jak moje). Jest wiele sposobów, aby sprawdzić swój cert - ten, którego akurat użyłem: https://www.sslshopper.com/ssl-checker.html

 0
Author: Lance,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-01 02:38:03

Po kilku godzinach testów i prób...

Rozwiązałem ten problem tak prosto, jak to tylko możliwe. Zauważyłem, że używają "stron testowych" wewnątrz strony deweloperów Facebook, która zawiera tylko tagi" og " i trochę tekstu w tagu body, który odwołuje się do tych tagów og.

Więc co ja zrobiłem?

Utworzyłem drugi widok w mojej aplikacji, zawierający te same rzeczy, których używają.

A skąd wiem, że Facebook ma dostęp do mojej strony, żebym mógł zmienić widok? Mają unikalny Agent użytkownika: "facebookexternalhit / 1.1"

 -3
Author: Bonieky Lacerda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-01 19:01:22