Facebook Open Graph meta tags

817 views
255 views

Published on

Wat zijn Facebook Open Graph meta tags en hoe gebruik je ze in een Joomla website. Presentatie gegeven op 11 januari 2016 bij de Joomla Users Group (JUG) 030

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
817
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Facebook Open Graph meta tags

  1. 1. Open Graph Meta Tags Presentatie voor JUG030 op 11 januari 2016 Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  2. 2. De bekende buttons Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  3. 3. Pop-up scherm: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  4. 4. Resultaat op FaceBook: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  5. 5. Pagina van mijn klant: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  6. 6. Intro-afbeelding: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  7. 7. Weergave op FaceBook: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  8. 8. Wat ging er mis? En meer algemeen: Hoe werkt het eigenlijk? Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  9. 9. Scraping The 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
  10. 10. 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
  11. 11. Open Graph meta tags  De crawler helpen  Extra functies  Ontwikkeld door FaceBook  Ook ondersteund door: o Google+ o LinkedIn o Twitter Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  12. 12. 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
  13. 13. 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 over o Zo niet, eigen crawler  Twitter heeft ook eigen meta tags: Twitter Cards Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  14. 14. 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, oorzaak@oorzaak.nl
  15. 15. … 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
  16. 16. 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
  17. 17. Optionele OG tags Van 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
  18. 18. Opties bij afbeeldingen Het 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
  19. 19. Over afbeeldingen gesproken… Optimize images to generate great previews: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/best-practices
  20. 20. 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
  21. 21. 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, oorzaak@oorzaak.nl Bron: https://developers.facebook.com/docs/sharing/best-practices
  22. 22. Ok, maar lager gaan we echt niet The 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
  23. 23. Problemen met afbeeldingen…  Er verschijnt geen afbeelding  Of een andere afbeelding dan je bedoelde: Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. Cache oplossing 1 https://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
  28. 28. Cache oplossing 2 https://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
  29. 29. Nog een tip tijdens testen Als 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
  30. 30. 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
  31. 31. 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, oorzaak@oorzaak.nl Ga naar: http://extensions.joomla.org
  32. 32. 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 description o Instellen van fallback voor afbeelding  Componenten o Handmatig invullen van alle tags per artikel o Plugin voor het geval er niets is ingevuld Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  33. 33. 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
  34. 34. Enkele extensies uit de JED JoomlaKave 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, oorzaak@oorzaak.nl
  35. 35. Extensie-specifieke plugins Facebook 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, oorzaak@oorzaak.nl
  36. 36. 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
  37. 37. 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
  38. 38. JoomlaKave OG installatie  Component en plugin  In de juiste volgorde installeren! Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  39. 39. JoomlaKave component Componenten > JK OpenGraph Protocol De lijst van items is aanvankelijk leeg! Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  40. 40. JoomlaKave component instellen Klik op Opties rechtsboven Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  41. 41. JoomlaKave plugin instellingen Extensies > Pluginbeheer > System - Open Graph Protocol  Ook actief in pop-ups, rss, Ajax?  Backend settings  Front-end settings Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  42. 42. JoomlaKave plugin front-end Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  43. 43. JoomlaKave editor per item  Vereist JCE als editor! Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  44. 44. JoomlaKave editor interface  Niet vergeten: klik op Update OpenGraph en sla daarna het artikel / item op. Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  45. 45. 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
  46. 46. 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, oorzaak@oorzaak.nl
  47. 47. 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, oorzaak@oorzaak.nl
  48. 48. FaceBook OG dashboard scherm Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
  49. 49. 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
  50. 50. Open Graph Meta Tags VRAGEN? Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

×