Met OpenGraph Meta tags krijg je greep op hoe je webpagina's worden getoond op FaceBook en andere social media. In deze presentatie algemene info over OG en specifieke info voor het gebruik met het Joomla cms Bewerking van de presentatie die ik eerder gaf bij JUG030.
1. Open Graph Meta Tags
Presentatie voor JUG071
Op 1 maart 2016
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
2. Even voorstellen
Frits Jongbloets
Studio De Oorzaak
Broodwinning: websites
Joomla sinds 2008
JUG030
Samenwerkingen
…
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
3. Deze presentatie
Bevat links naar online info
Komt op Slideshare
… dus opschrijven, typen, foto’s maken mag
… maar hoeft niet
Vragen tussendoor mag
… maar sommige antwoorden komen
misschien aan het eind of na afloop
Schermvoorbeelden vs. online demo
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
10. Wat ging er mis?
En meer algemeen:
Hoe werkt het eigenlijk?
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
11. 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
12. 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
13. 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
14. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
15. 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
16. Wat is de html head
<html>
<head>
Meestal NIET zichtbaar in de layout voor bezoekers
(Koppelingen naar) css
(Koppelingen naar) JavaScrips
Meta gegevens, page title
…
</head>
<body>
Layout voor bezoekers
</body>
<html>
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
17. OG meta tags 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
18. … maar niet via de Joomla core
De Joomla core genereert geen OG meta tags
De crawler zoekt het zelf uit
Of… installeer een extensie
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
19. 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
20. Optionele OG tags
Van dit rijtje is de Description het meest algemeen
bruikbaar. De rest hangt van je content (-type) af.
og:description
og:audio
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
21. 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
22. 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
23. 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
24. 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
25. 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
26. Problemen met afbeeldingen…
Er verschijnt geen afbeelding
Of een andere afbeelding dan je bedoelde:
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
27. Voorkom problemen met
afbeeldingen
Zoek een extensie die:
de juiste afbeelding uit je content kiest
of waarin je per artikel handmatig de
afbeelding kunt instellen
en waarin je een standaard afbeelding kunt
instellen (fall-back)
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
28. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
29. 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
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
31. 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
32. 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
33. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
34. Joomla Open Graph extensies
Plugins
Componenten
Extensie-specifiek (com_content, com_k2, …)
Soms zit het ingebouwd 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
35. 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
36. 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
37. 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
38. 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
39. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
40. Phoca Open Graph plugin
Mijn redenen om te gebruiken:
Bekende, betrouwbare developer
Testen verliep simpel en probleemloos
Afzonderlijke settings voor artikelen,
features articles en categorieblog
Maar: beperkt tot Joomla core artikelen
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
41. Phoca Open Graph backend
“It is recommended to leave this parameter empty”
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
42. Phoca Open Graph image
Set image.
If image will be not set here, plugin will
try to find the image in article content.
If article does not contain any image,
plugin will try to search
/images/phocaopengraph/
folder for image which has the same name
as article ID has (e.g. article ID=1 ==> 1.jpg)
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
43. Phoca OG en speciale tekens
Vanwege veiligheid speciale tekens
omzetten in html entities
& wordt
&
Opgelost met
NoNumber’s
ReReplacer
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
44. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
45. 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
46. JoomlaKave OG installatie
Component en plugin
In de juiste volgorde installeren!
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
47. JoomlaKave component
Componenten > JK OpenGraph Protocol
De lijst van items is aanvankelijk leeg!
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
48. JoomlaKave component instellen
Klik op Opties rechtsboven
Default image en type als fallback
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
49. 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
52. JoomlaKave editor per item
Vereist JCE als editor bij artikelen!
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
53. 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
54. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
55. 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
56. 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
57. FaceBook OG dashboard scherm
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
58. OpenGraph Stories
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
Nog niet zelf onderzocht
Post rich, structured stories from your app
Open Graph stories have four basic elements:
o Actor - The person who posts the story
o App - Every story includes attribution to
the app that created it
o Action - Activity the actor performs
o Object - The thing the actor interacts with
59. OpenGraph Stories voorbeeld
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
Een app die weergeeft waar en hoe snel
iemand heeft hardgelopen op haar Nikes
60. Inhoudsopgave
Wat zijn Open Graph meta tags
Afbeeldingen
Caching !*#&?
Joomla extensies
Phoca Open Graph plugin
JoomlaKave Open Graph Protocol
Solution
Extra functies OpenGraph
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl
61. Open Graph Meta Tags
VRAGEN?
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl