Jak używać metatagu „og” (Open Graph) do udostępniania na Facebooku

118

Facebook pobiera wszystkie zdjęcia z mojej strony.

Chcę udostępnić tylko jedno zdjęcie, które jest na tej stronie.

Słyszałem o ogmetatagu, ale nie wiem, jak go umieścić.

facebook-opengraph meta Vignesh Babu MD
źródło

Odpowiedzi:

355

Posługiwać się:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Wypełnij treść = „...” zgodnie z zawartością Twojej strony.

Aby uzyskać więcej informacji, odwiedź stronę 18 metatagów, które powinna mieć każda strona internetowa w 2013 roku .

CarlosPinedaT
źródło

Czy wiesz, czy authortag powinien zawierać nazwisko autora, czy link do adresu URL profilu?

tobek

Myślę, że jedno i drugie jest możliwe. Jeśli chcesz, aby Twoje zdjęcie profilowe znajdowało się po lewej stronie posta na stronie wyszukiwania Google, należy podać link do swojego profilu Google +.

jurihandl

metatag authoroznacza autora strony internetowej lub autora aktualnego artykułu (przykład użycia w artykule na blogu)?

LuiGi

Czy to dobra realizacja? Czy Google / Facebook / Twitter nie znajdzie żadnych błędów z tym?

Jeromie Devera

1) Facebook odczyta tag <meta name = "author"> i wyświetli go w podglądzie, gdy ktoś udostępni stronę 2) Facebook obsługuje teraz <meta property = "article: author"> (szczegóły na giannopoulos.net/ 2015/06/20 /… ) i wyświetli link do Twojego profilu na Facebooku (jeśli faktycznie umieścisz link do niego w artykule: autor) 3) Google szuka teraz bogatych danych w postaci tego, co nazywa „Rich Snippets” ( developers.google.com/structured-data )

MarkG

Facebook korzysta z tak zwanego protokołu Open Graph, aby decydować, jakie elementy mają być wyświetlane, gdy udostępniasz łącze. OGP patrzy na twoją stronę i próbuje zdecydować, jakie treści pokazać. Możemy pomóc i powiedzieć Facebookowi, co ma zabrać z naszej strony.

Robimy to za pomocą og:metatagów.

Tagi wyglądają mniej więcej tak -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

Musisz umieścić te lub podobne metatagi w <head>pliku HTML. Nie zapomnij zastąpić wartości własnymi!

Aby uzyskać więcej informacji, możesz przeczytać wszystko o tym, jak Facebook używa tych metatagów w swojej dokumentacji. Oto jeden z samouczków stamtąd - https://developers.facebook.com/docs/opengraph/tutorial/

Facebook daje nam świetne małe narzędzie, które pomaga nam radzić sobie z tymi metatagami - możesz użyć Debugera, aby zobaczyć, jak Facebook widzi Twój adres URL, a nawet powie Ci, czy są z nim problemy.

Należy tu zauważyć, że za każdym razem, gdy wprowadzasz zmianę w metatagach, musisz ponownie przesłać adres URL przez debuger , aby Facebook wyczyścił wszystkie dane przechowywane w pamięci podręcznej na ich serwerach dotyczące Twojego adresu URL.

Lix
źródło

W moim opisie widzę tagi HTML, czy wiesz, jak to obejść?

Neil,

Zbudowałem narzędzie do generowania meta. Wstępnie konfiguruje wpisy dla Facebooka, Google+ i Twittera i możesz z niego korzystać bezpłatnie tutaj: http://www.groovymeta.com

Aby odpowiedzieć na to pytanie nieco dokładniej, OGtagi (Open Graph) działają podobnie do metatagów i powinny być umieszczane w sekcji HEAD pliku HTML. Zobacz najlepsze praktyki Facebooka, aby uzyskać więcej informacji o tym, jak efektywnie używać tagów OG.

Louis Otto
źródło

Dzięki @Mogsdad Odpowiednio rozszerzyłem moją odpowiedź.

Louis Otto

Niestety, łącze jest uszkodzone!

Vincent Sels