Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ Optymalizacja i pozycjonowanie stron - SEO _ Dziwny problem ze zdjęciem dla fb w open graph

Napisany przez: blackstone 1.10.2018, 18:10:55

Mam dziwny problem z pozycjonowaniem pewnej strony na fb, a dokładnie z działaniem zdjęcia. Sprawa wygląda tak że po prostu wczytuje się ono nieregularnie, przykładowo raz fb w ogóle nie pobiera ikony artykułu , innym razem daje mi wybór co wybrać ( ikona artykułu czy....pewien plik graficzny z logiem portalu na stronie ) , a jeszcze innym razem widzi mi tylko logo portalu. Wszystko na stronie u mnie ładuje się dobrze ( znacznimi open graf i ich zawartość) nie wiem w czym tkwi problem. Próbowałem różnych kombinacji ( np og:type zamiast "article" dałem na "image/jpeg" i reakcja ta sama ) i nic to nie daje. Poniżej kod i link do przykładowego artykułu portalu który współtworzę. Zgóry dzięki za info

[HTML] pobierz, plaintext 
  1. <http://december.com/html/4/element/html.html lang="pl-PL"><http://december.com/html/4/element/head.html><http://december.com/html/4/element/meta.html http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  2.         <http://december.com/html/4/element/meta.html http-equiv="content-language" content="pl" /> 
  3.  <http://december.com/html/4/element/meta.html property="og:locale" content="pl_PL"/ >
  4.  <http://december.com/html/4/element/meta.html property="og:type" content="image/jpeg"/ >
  5.  <http://december.com/html/4/element/meta.html property="og:title" content="USA: Stopy procentowe w górę"/ >
  6.  <http://december.com/html/4/element/meta.html property="og:description" content="Amerykański bank centralny znowu podnosi stopy procentowe" />
  7.  <http://december.com/html/4/element/meta.html property="og:image" content="http://wspectrum.eu/files/general/foto5620404030092018.jpeg"> 
  8.  <http://december.com/html/4/element/meta.html property="og:image:width" content="400" /> 
  9.  <http://december.com/html/4/element/meta.html property="og:image:height" content="400" />
  10.  <http://december.com/html/4/element/meta.html property="article:published_time" content="2018-09-30">
  11.  <http://december.com/html/4/element/meta.html property="og:site_name" content="wspectrum.eu" />
  12.  <http://december.com/html/4/element/meta.html property="og:url" content="http://wspectrum.eu/show/46822/fed-znowu-podnosi-stopy-procentowe/" />
  13.  
  14.  
  15.  <http://december.com/html/4/element/meta.html http-equiv="content-type" content="text/html; charset=iso-8859-2" />
  16.  <http://december.com/html/4/element/meta.html http-equiv="content-language" content="pl" />
  17.  <http://december.com/html/4/element/meta.html name="keywords" content="fed,dolar,stopy procentowe,Jerome Powell" />
  18.  <http://december.com/html/4/element/meta.html name="description" content="Amerykański bank centralny znowu podnosi stopy procentowe" />
  19.  <http://december.com/html/4/element/meta.html name="Author" content="wspectrum.eu">
  20.  
  21.  <http://december.com/html/4/element/title.html>USA: Stopy procentowe w górę</http://december.com/html/4/element/title.html>
  22.  
  23.  
[HTML] pobierz, plaintext


całosć strony : http://wspectrum.eu/show/46822/fed-znowu-podnosi-stopy-procentowe/

Napisany przez: werdan 2.10.2018, 05:50:47

A gdzie "<!DOCTYPE html>" ?

Dodaj doctype. Testuj na FB debuger.
https://developers.facebook.com/tools/debug/

Sprawdz także tutaj:
https://www.seocentro.com/tools/search-engines/metatag-analyzer.html
Źle jest parsowany twój html.

Może warto już zmienić kodowanie na utf-8.
"charset=iso-8859-2" to lekki archaizm.

Napisany przez: blackstone 2.10.2018, 18:07:55

Dziwna sprawa, obydwa debugery wskazują na to że nie mogą uchwycić znaczników meta z naciskiem na znaczniki typu open graph.

Obecny kod :

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2.  
  3. <http://december.com/html/4/element/html.html lang="pl">
  4.  
  5. 	<http://december.com/html/4/element/head.html><http://december.com/html/4/element/meta.html http-equiv="content-type" content="text/html; charset=utf8" />
  6.         <http://december.com/html/4/element/meta.html http-equiv="content-language" content="pl" /> 
  7. <http://december.com/html/4/element/meta.html property="og:locale" content="pl_PL" >
  8. <http://december.com/html/4/element/meta.html property="og:type" content="article" >
  9. <http://december.com/html/4/element/meta.html property="og:title" content="USA: Stopy procentowe w górę" >
  10. <http://december.com/html/4/element/meta.html property="og:url" content="http://wspectrum.eu/show/46822/fed-znowu-podnosi-stopy-procentowe" >
  11. <http://december.com/html/4/element/meta.html property="og:description" content="USA: Stopy procentowe w górę" >
  12. <http://december.com/html/4/element/meta.html property="og:image" content="http://wspectrum.eu/files/general/foto5620404030092018.jpeg" >
  13. <http://december.com/html/4/element/meta.html property="og:image:width" content="484" >
  14. <http://december.com/html/4/element/meta.html property="og:image:height" content="252" >
  15. <http://december.com/html/4/element/meta.html property="og:site_name" content="wspectrum.eu" >
  16.  
  17.  <http://december.com/html/4/element/meta.html name="description" content="Amerykański bank centralny znowu podnosi stopy procentowe" />
  18.  <http://december.com/html/4/element/title.html>USA: Stopy procentowe w górę</http://december.com/html/4/element/title.html>
[HTML] pobierz, plaintext

(adres strony: http://wspectrum.eu/show/46822/fed-znowu-podnosi-stopy-procentowe/ )


Na seocentro na czerwono ( czyli że bład) jest informacja ze: "Webpage has no title." ( Podczas gdy istnieje <title>USA: Stopy procentowe w górę</title> ) oraz "Webpage has no description" (podczas gdy tuż nad tytułem jest opis)

Na debugu facebooka, pokazane jest że zamiast adresu zdjęcia ( w og:image) pobrany jest obraz części loga strony ( i wstawiony jako og:image przez system faceb.) . Równierz komunikat "he 'og:image' property should be explicitly provided, even if a value can be inferred from other tags" sugeruje że jest problem z odebraniem tego znacznika . Znacznik og:url i og:title są poprawne ale na szczegółowym debugerze jest wyjaśnione że system sam się domyślił. Przykłądowo w znaczniku og:description debuger facebooka wziął opis z tradycyjnego opisu strony dla googla a nie fb ( fb powinien wychwycić opis "USA: Stopy procentowe w górę" a wychwycił "Amerykański bank centralny znowu podnosi stopy procentowe" .

Dodałem doctype i kodowanie ale nie mogę doszukać się żadnego błędu. Jedyny ślad na jaki wpadłem jest taki że gdy w mozilli podglądam kod strony to znaczniki "<!DOCTYPE html><html lang="pl"><head>" oraz "</head><body>" są zaznaczone na czerwono. Nie rozumiem tego bo wszystko wydaje mi się być "podomykane", sprawdzałem wiele razy a trudno o błąd na samym początku dokumentu.

Napisany przez: viking 2.10.2018, 18:34:58

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwspectrum.eu%2Fshow%2F46822%2Ffed-znowu-podnosi-stopy-procentowe%2F

Napisany przez: werdan 2.10.2018, 18:42:53

Masz jakies białe znaki przed <!doctype>. Musisz się tego pozbyc, mozliwe, że to utf-8 z BOM.

U ciebie jest identyczna sytuacja jak w przykładzie:
https://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html

Napisany przez: xaban 8.10.2018, 13:23:58

Kiedyś miałem podobny problem i okazało się, że obrazki były po prostu za małe - Facebook wtedy szukał większych w treści strony.

Spróbuj z większymi obrazkami, może to pomoże.

Napisany przez: Mega_88 8.10.2018, 16:48:36

Możliwe, że tutaj znajdziesz odpowiedź: https://developers.facebook.com/blog/post/2017/06/27/API-Change-Log-Modifying-Link-Previews/, a tutaj odpowiedź jak to obejść, ale nie testowałem tego jeszcze: https://meetedgar.com/blog/facebooks-new-link-previews-need-know-2018/

Napisany przez: blackstone 21.10.2018, 16:47:04

Dzięki za sugiestie i podpowiedzi. Głównym problemem były jednak białe znaki, sprawa załatwiona. Każda rada okazała się pomocna. Dzięki i daje "pomógł". Do następnego wink.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)