Presentatie open graph bij jug071

Open Graph Meta Tags
Presentatie voor JUG071
Op 1 maart 2016
Frits Jongbloets, Studio De Oorzaak 2016, oorzaak@oorzaak.nl

Even voorstellen
 Frits Jongbloets
 Studio De Oorzaak
 Broodwinning: websites
 Joomla sinds 2008
 JUG030
 Samenwerkingen
 …

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

De bekende buttons

Pop-up scherm:

Resultaat op FaceBook:

Pagina van mijn klant:
Joomla 2.5 site met K2

Intro-afbeelding:

Weergave op FaceBook:

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

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.
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

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

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

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

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>

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>

… maar niet via de Joomla core
 De Joomla core genereert geen OG meta tags
 De crawler zoekt het zelf uit
 Of… installeer een extensie

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
Bron: http://ogp.me

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
Bron: http://ogp.me

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
Bron: http://ogp.me

Over afbeeldingen gesproken…
Optimize images to generate great previews:
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.”

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.

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.

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

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)

Inhoudsopgave
 Wat zijn Open Graph meta tags
 Afbeeldingen
 Caching !*#&?
Solution

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

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

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

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.

Inhoudsopgave
 Afbeeldingen
 Caching !*#&?
Solution

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)
Ga naar: http://extensions.joomla.org

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

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

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

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

Inhoudsopgave
 Afbeeldingen
 Caching !*#&?
 Joomla extensies
Solution

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

Phoca Open Graph backend
“It is recommended to leave this parameter empty”

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)

Phoca OG en speciale tekens
 Vanwege veiligheid speciale tekens
omzetten in html entities
 & wordt
&
 Opgelost met
NoNumber’s
ReReplacer

Inhoudsopgave
 Afbeeldingen
 Caching !*#&?
 Phoca Open Graph plugin
Solution

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

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

JoomlaKave component
Componenten > JK OpenGraph Protocol
De lijst van items is aanvankelijk leeg!

JoomlaKave component instellen
Klik op Opties rechtsboven
Default image en type als fallback

JoomlaKave plugin instellingen
Extensies > Pluginbeheer >
System - Open Graph Protocol
 Ook actief in pop-ups, rss, Ajax?
 Backend settings
 Front-end settings

JoomlaKave plugin front-end

JoomlaKave plugin description
De bron van de description instellen

JoomlaKave editor per item
 Vereist JCE als editor bij artikelen!

JoomlaKave editor interface
 Niet vergeten: klik op Update OpenGraph
en sla daarna het artikel / item op.

Inhoudsopgave
 Afbeeldingen
 Caching !*#&?
 JoomlaKave Open Graph Protocol
Solution

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

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

FaceBook OG dashboard scherm

OpenGraph Stories
 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

OpenGraph Stories voorbeeld
Een app die weergeeft waar en hoe snel
iemand heeft hardgelopen op haar Nikes

Inhoudsopgave
 Afbeeldingen
 Caching !*#&?
 JoomlaKave Open Graph Protocol
Solution
 Extra functies OpenGraph

Open Graph Meta Tags
VRAGEN?

Presentatie open graph bij jug071

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (13)

Similar a Presentatie open graph bij jug071

Similar a Presentatie open graph bij jug071 (20)

Presentatie open graph bij jug071