Presentatie open graph bij jug071

Open Graph Meta TagsPresentatie voor JUG071

Op 1 maart 2016

Frits Jongbloets, Studio De Oorzaak 2016, [email protected]

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?


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.


Bron: https://developers.facebook.com/docs/sharing/webmasters/crawler

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 LinkedIno 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 overo 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

http://ogp.me/

http://ogp.me/

Optionele OG tagsVan 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

http://ogp.me/

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


Bron: http://ogp.me

http://ogp.me/

http://ogp.me/

Over afbeeldingen gesproken…Optimize images to generate great previews:


Bron: https://developers.facebook.com/docs/sharing/best-practices

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












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


Voorkom problemen met afbeeldingenZoek 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)


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


https://www.facebook.com/sharer/sharer.php







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


https://developers.facebook.com/tools/debug/og/object










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.


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

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 descriptiono Instellen van fallback voor afbeelding

Componenteno Handmatig invullen van alle tags per artikelo 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 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


http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/open-graph-protocol-solution

http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/open-graph-protocol-solution

http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graph

http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/phoca-open-graph

http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/perfect-open-graph-tags

http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/perfect-open-graph-tags

http://extensions.joomla.org/extensions/extension/site-management/seo-a-metadata/global-open-graph












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


http://extensions.joomla.org/extensions/extension/extension-specific/k2-extensions/facebook-open-graph-for-k2

http://extensions.joomla.org/extensions/extension/extension-specific/k2-extensions/facebook-open-graph-for-k2

http://extensions.joomla.org/extensions/extension/extension-specific/zoo-extensions/open-graph-for-zoo














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


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 componentComponenten > JK OpenGraph ProtocolDe lijst van items is aanvankelijk leeg!


JoomlaKave component instellenKlik op Opties rechtsbovenDefault image en type als fallback


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


JoomlaKave plugin front-end


JoomlaKave plugin descriptionDe 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.


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 storyo App - Every story includes attribution to the app that created ito Action - Activity the actor performso Object - The thing the actor interacts with

OpenGraph Stories voorbeeld


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

Open Graph Meta Tags

VRAGEN?


Presentatie open graph bij jug071

Internet

Transcript of Presentatie open graph bij jug071