facebook open graph meta tags
TRANSCRIPT
![Page 1: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/1.jpg)
Open Graph Meta TagsPresentatie voor JUG030
op 11 januari 2016
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 8: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/8.jpg)
Wat ging er mis?En meer algemeen:Hoe werkt het eigenlijk?
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 9: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/9.jpg)
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, [email protected]
Bron: https://developers.facebook.com/docs/sharing/webmasters/crawler
![Page 10: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/10.jpg)
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, [email protected]
![Page 11: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/11.jpg)
Open Graph meta tags De crawler helpen Extra functies Ontwikkeld door FaceBook Ook ondersteund door:
o Google+o LinkedIno Twitter
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 12: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/12.jpg)
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, [email protected]
![Page 13: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/13.jpg)
Wat zijn Open Graph meta tags html meta tags, in de html head Ontwikkeld door FaceBook Ondersteuning van andere social media:
o Als OG aanwezig is nemen ze die overo Zo niet, eigen crawler
Twitter heeft ook eigen meta tags: Twitter Cards
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 14: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/14.jpg)
In de html head…<head>…<meta property="og:title" content=
"Support overeenkomst" /><meta property="og:type" content=
"article" /><meta property="og:url" content=
"http://www.oorzaak.nl/diensten/177-support-overeenkomst" /><meta property="og:image" content=
"http://www.oorzaak.nl/images/algmeen/frits_jongbloets02.jpg" />...</head>
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 15: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/15.jpg)
… 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, [email protected]
![Page 16: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/16.jpg)
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, [email protected]
Bron: http://ogp.me
![Page 17: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/17.jpg)
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, [email protected]
Bron: http://ogp.me
![Page 18: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/18.jpg)
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, [email protected]
Bron: http://ogp.me
![Page 19: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/19.jpg)
Over afbeeldingen gesproken…Optimize images to generate great previews:
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
Bron: https://developers.facebook.com/docs/sharing/best-practices
![Page 20: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/20.jpg)
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, [email protected]
Bron: https://developers.facebook.com/docs/sharing/best-practices
![Page 21: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/21.jpg)
Nou, ok dan…If 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, [email protected]
Bron: https://developers.facebook.com/docs/sharing/best-practices
![Page 22: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/22.jpg)
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, [email protected]
Bron: https://developers.facebook.com/docs/sharing/best-practices
![Page 23: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/23.jpg)
Problemen met afbeeldingen… Er verschijnt geen afbeelding Of een andere afbeelding dan je bedoelde:
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 24: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/24.jpg)
Voorkom problemen met afbeeldingenZoek 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, [email protected]
![Page 25: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/25.jpg)
InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingen Caching !*#&? Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 26: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/26.jpg)
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, [email protected]
![Page 27: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/27.jpg)
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, [email protected]
![Page 28: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/28.jpg)
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, [email protected]
![Page 29: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/29.jpg)
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, [email protected]
![Page 30: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/30.jpg)
InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingenCaching !*#&? Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 31: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/31.jpg)
Joomla Open Graph extensies Plugins Componenten Extensie-specifiek (com_content, com_k2, …) Soms zit het al in een extensie
o K2 (het slechte voorbeeld uit het begin)o BT Social Share plugin (share buttons én OG)
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
Ga naar: http://extensions.joomla.org
![Page 32: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/32.jpg)
Plugin of component?Plugins Instellen van globale parameters, bijv.:
o Neem bij og:description de inhoud van de intro tekst over of juist die van de meta descriptiono Instellen van fallback voor afbeelding
Componenteno Handmatig invullen van alle tags per artikelo Plugin voor het geval er niets is ingevuld
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 33: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/33.jpg)
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, [email protected]
![Page 34: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/34.jpg)
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-solution
Phoca Open Graph (p)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graph
Perfect Open Graph Tags (p, ook Twitter Cards)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/perfect-open-graph-tags
Global Open Graph (p)http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/global-open-graph
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 35: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/35.jpg)
Extensie-specifieke pluginsFacebook Open Graph for K2 (p)http://extensions.joomla.org/extensions/extension/extension-specific/k2-extensions/facebook-open-graph-for-k2
Open 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, [email protected]
![Page 36: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/36.jpg)
InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingenCaching !*#&?Joomla extensies JoomlaKave Open Graph Protocol Solution Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 37: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/37.jpg)
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, [email protected]
![Page 38: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/38.jpg)
JoomlaKave OG installatie Component en plugin In de juiste volgorde installeren!
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 39: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/39.jpg)
JoomlaKave componentComponenten > JK OpenGraph ProtocolDe lijst van items is aanvankelijk leeg!
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 40: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/40.jpg)
JoomlaKave component instellenKlik op Opties rechtsboven
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 41: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/41.jpg)
JoomlaKave plugin instellingenExtensies > Pluginbeheer > System - Open Graph Protocol Ook actief in pop-ups, rss, Ajax? Backend settings Front-end settings
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 43: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/43.jpg)
JoomlaKave editor per item Vereist JCE als editor!
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 44: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/44.jpg)
JoomlaKave editor interface Niet vergeten: klik op Update OpenGraph en sla daarna het artikel / item op.
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 45: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/45.jpg)
InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingenCaching !*#&?Joomla extensiesJoomlaKave Open Graph Protocol Solution Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 46: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/46.jpg)
App id<meta property="fb:app_id” content="1510030362636113">
Aanmaken in FB via Ontwikkelaar > Apps beheren ID invullen in je Joomla OG-extensie “Betere werking” Dashboard
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 47: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/47.jpg)
FaceBook Open Graph dashboard
Zelf nog niet echt onderzocht In ieder geval statistieken en beveiliging En je doelgroep beter leren kennen Ongetwijfeld tegen de bekende prijs: FB kan je weer beter volgen Zie ook schermafbeelding op volgende dia
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]
![Page 49: Facebook Open Graph meta tags](https://reader035.vdocuments.site/reader035/viewer/2022062522/58a1e4fa1a28ab531e8b4c7b/html5/thumbnails/49.jpg)
InhoudsopgaveWat zijn Open Graph meta tagsAfbeeldingenCaching !*#&?Joomla extensiesJoomlaKave Open Graph Protocol Solution Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, [email protected]