Facebook Open Graph meta tags

download Facebook Open Graph meta tags

If you can't read please download the document

  • date post

    13-Feb-2017
  • Category

    Internet

  • view

    1.061
  • download

    2

Embed Size (px)

Transcript of Facebook Open Graph meta tags

Open Graph Meta Tags

Open Graph Meta TagsPresentatie voor JUG030 op 11 januari 2016

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

De bekende buttons

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Pop-up scherm:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Resultaat op FaceBook:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Pagina van mijn klant:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Intro-afbeelding:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Weergave op FaceBook:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Wat ging er mis?En meer algemeen:Hoe werkt het eigenlijk?

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

ScrapingThe first time someone shares a link, the Facebook crawler will scrape the HTML at that URL to gather, cache and display info about the content on Facebook like a title, description, and thumbnail image.

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/webmasters/crawler

Opmerkingen bij scraping Het vindt plaats op url niveau, dus op artikel- of itemniveau Je kunt de crawler helpen De scraping resultaten worden door FaceBook in een cache geplaatst

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Open Graph meta tags De crawler helpen Extra functies Ontwikkeld door FaceBook Ook ondersteund door: Google+ LinkedIn Twitter

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Inhoudsopgave Wat zijn Open Graph meta tags Afbeeldingen Caching !*#&? Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Wat zijn Open Graph meta tags html meta tags, in de html head Ontwikkeld door FaceBook Ondersteuning van andere social media: Als OG aanwezig is nemen ze die over Zo niet, eigen crawler Twitter heeft ook eigen meta tags: Twitter Cards

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

In de html head

...

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

maar niet via de Joomla core De Joomla core genereert geen OG meta tags De crawler zoekt het zelf uit Of installeer een extensie (zie verderop)

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Basis (minimum) OG tags og:title - The title of your object og:type - The type of your object, e.g.: "article" or "video.movie" og:image - An image URL og:url - The canonical URL of your object

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: http://ogp.me

Optionele OG tagsVan dit rijtje is de Description het meest algemeen bruikbaar. De rest hangt van je content (-type) af.

og:audio og:description og:determiner og:locale og:locale:alternate og:site_name og:video

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: http://ogp.me

Opties bij afbeeldingenHet is niet verplicht deze te gebruiken. og:image:secure_url (if the webpage requires HTTPS). og:image:type (MIME type) og:image:width og:image:height

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: http://ogp.me

Over afbeeldingen gesprokenOptimize images to generate great previews:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/best-practices

De aanbeveling is dus:Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/best-practices

Nou, ok danIf your image is smaller than 600 x 315 px, it will still display in the link page post, but the size will be much smaller.

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/best-practices

Ok, maar lager gaan we echt nietThe minimum image size is 200 x 200 pixels. If you try to use an image smaller than this you will see an error in the URL Debugger.

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/best-practices

Problemen met afbeeldingen Er verschijnt geen afbeelding Of een andere afbeelding dan je bedoelde:

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Voorkom problemen met afbeeldingen

Zoek een extensie waarin je: een standaard afbeelding kunt instellen of per artikel handmatig de afbeelding kunt instellen of allebei (fall-back)

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingen Caching !*#&? Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Caching !*#&? De scraping resultaten worden door FaceBook in een cache geplaatst Automatisch verversen na 30 dagen (!) Lastig bij testen Vervelend als je iets wilt wijzigen NB je eigen broncode verandert WEL maar FB toont de wijzigingen NIET Maakt ook dat ik in de presentatie weinig live demonstreer

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Cache oplossing 1https://www.facebook.com/sharer/sharer.php

Tik je url in en klik op Delen De cache wordt gereset Je krijgt het share window te zien Je kunt van hieruit sharen

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Cache oplossing 2https://developers.facebook.com/tools/debug/og/object

Tik je url in Klik op Fetch new scrape information De cache wordt gereset Rapportage om je OG te debuggen Preview van het share window Je kunt hier niet sharen

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Nog een tip tijdens testenAls je op een share button klikt, opent het share window.Tijdens het testen zul je soms niet echt willen sharen maar alleen kijken hoe het eruit ziet in het share window.Sluit dit window daarna weer.Anders kun je dezelfde info te zien krijgen als je een andere pagina wilt testen.

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingenCaching !*#&? Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Joomla Open Graph extensies Plugins Componenten Extensie-specifiek (com_content, com_k2, ) Soms zit het al in een extensie K2 (het slechte voorbeeld uit het begin) BT Social Share plugin (share buttons n OG)

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Ga naar: http://extensions.joomla.org

Plugin of component?Plugins Instellen van globale parameters, bijv.: Neem bij og:description de inhoud van de intro tekst over of juist die van de meta description Instellen van fallback voor afbeelding Componenten Handmatig invullen van alle tags per artikel Plugin voor het geval er niets is ingevuld

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Verdere keuze-argumenten Extensie-specifiek (Joomla core artikelen, K2, VirtueMart, FlexiContent, ZOO) Ook Twitter Cards? En natuurlijk de JED reviews

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Enkele extensies uit de JEDJoomlaKave Open Graph Protocol Solution (c,p)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/open-graph-protocol-solutionPhoca Open Graph (p)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graphPerfect Open Graph Tags (p, ook Twitter Cards)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/perfect-open-graph-tagsGlobal Open Graph (p)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/global-open-graph

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Extensie-specifieke pluginsFacebook Open Graph for K2 (p)http://extensions.joomla.org/extensions/extension/extension-specific/k2-extensions/facebook-open-graph-for-k2Open Graph for ZOO (p)http://extensions.joomla.org/extensions/extension/extension-specific/zoo-extensions/open-graph-for-zoo

Deze lijst is niet volledig! Zoek ook zelf via:http://extensions.joomla.org

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingenCaching !*#&?Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

JoomlaKave Open Graph Protocol Solution

Mijn redenen om te gebruiken: K2 eigen OG tags overrulen De enige component die ik vond -> handmatig per K2 item bewerken Developer komt betrouwbaar over

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

JoomlaKave OG installatie Component en plugin In de juiste volgorde installeren!

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

JoomlaKave componentComponenten > JK OpenGraph ProtocolDe lijst van items is aanvankelijk leeg!

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

JoomlaKave component instellenKlik op Opties rechtsboven

Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

JoomlaKave plugin inst