Open Graph Meta Tags – Kontroller delinger på Facebook & Google+

0

Kender du Open Graph Meta Tags eller Open Graph Protocol ? Hvis ikke så vil jeg her forsøge at give dig nogle af de ting du kan bruge Open Graph til i dit arbejde med Sociale Medier og i særdeleshed Facebook. Normalen er gerne at de enkelte store virksomheder laver deres egene regler og sådan er det også med Facebook og Google+. Facebook bruger Open Graph og Google+ bruger Schema.org microdata. Det gode ved Open Graph er dog at hvis ikke du implementerer begge, som dog er anbefalet så følger Google+ rent faktisk retningslinjerne for Open Graph.

Så er du lidt doven eller er det blot nemmere at implementerer meta data og ikke Micro Data på de enkelte HTML elementer så kan du altså manipulerer, hvad de sociale medier får serveret når dine sider shares eller linkes til af dig eller andre.

Når du selv laver et link eller share på Facebook så har du til et vist punkt kontrol over hvilke billede du ønsker der bliver vist. Facebook giver dig nemlig muligheden for at vise et bestemt billede til dit indlæg og det kan du ofte vælge ved at bruge de små pile når du skriver til at vælge thumbnils. Ind i mellem findes dit ønskede billede bare ikke i blandt dem der er på din side og det er jo frustrerende.

Open Graph Meta Tags & Schema.org to the rescue

Det er her Open Graph Meta Data kommer ind og de er faktisk ret simple, speciel hvis du har statiske sider, da du blot skal indsætte dem som ganske almindelige meta tags- Problemet kan komme med WordPress, Prestashop,Magento og andre, som ikke lige tager højde for dette i de enkelte Themes.

Det er nemlig meget individuelt hvordan en udvikler designer sin template og selvom de følger Best Pratice, er det langt fra alle der bruger Open Graph eller Schema.org Micro Data. Hvis ikke du selv er teknisk skal du måske have lidt hjælp til den sidste del af artiklen hvor jeg for Prestashop viser hvordan du kan overtage kontrollen med hvilket billede og beskrivelse der er til rådighed for de Sociale Medier.

Du kender det sikker fra Yoast SEO plugin til WordPress, hvor du kan vælge hvordan beskrivelse skal være ved deling for Facebook og Google+. Yoast håndterer dog ikke billeder, men kun et enkelt af slagsen, hvilket jo også er rigeligt i de fleste tilfælde.

Nu skal du se hvordan man kan bruge Open Graph Meta Tags til at give dig flere muligheder. Jeg fortæller kun om de basale tags. Resten må du læse dig til på det øverste link. Her er de basale tags

og:title - Denne titel vises istedet for sidens meta title tag
og:description - Beskrivelse der vises istedet for meta description tag
og:image - Det billede du ønsker at Facebook eller Google+ viser når du eller andre deler din post.

Normalt vil du kun have et billede så du dermed kan sikre hvilket billede der vises når din post deles. Du dog angive flere billede og det gode ved tagget er at du kan angive en url til et billede der slet ikke vises i din post. Det kan f.eks. være til dit logo eller til et billede der er specielt designet til Facebook eller Google+

Eksempel for Open Graph

Hvis du bruger Open Graph skal du indsætte følgende tags og udfylde dem i din Meta Tags sektion, som typisk er noget af det øverste på din side

<meta property="og:title" content="..."/>
<meta property="og:image" content="..."/>
<meta property="og:description" content="..."/>

Eksempel med Schema.org Micro Data

Hvis du vil implementerer begge protokoller skal du også altså også kigge på Schema.org Micro Data. Det kan dog ofte være lidt mere besværligt for CMS systemer hvis ikke deres Theme eller Template har inplementeret dette, da det ikke sker i Meta sektionen, men i selve HTML koden. Her under ses du et eksempel på Micro Data.

Læg specielt mærke til body tagget og de enkelte tags som du kan bruge i din HTML. Husk at Google+ kun kigger på det første element og ikke alle hvis du har flere.

<body itemscope itemtype="http://schema.org/Product">
  <h1 itemprop="name">Produkt overskrift</h1>
  <img itemprop="image" src="url til dit billede du ønsker der skal vises"></img>
  <p itemprop="description">Beskrivelsen der skal vises på Google+</p>
</body>

Værd opmærksom på at her er der tale om et billede i selve HTML koden og ikke et meta data tag. Det betyder at dette billede rent faktisk vises og kan ikke manipuleres som ved Facebook og vise et helt andet billede

Open Graph Meta Tags og Facebook billed dimensioner

Om du vælger at bruge begge eller Open Graph alene er op til dig. Personligt ville jeg nok vælge begge dele,da du dermed er sikret og kan skabe indhold der henvender sig til forskellige segmenter

Du skal dog være opmærksom på at Facebook ikke viser billederder er mindre end 200×200 pixel i Open Graph. Husk derfor at designe billederne i en god kvalitet og brug altid “Best Practices” for dimensioner på Facebook. Du har f.eks. et fedt billede på din hjemmeside du gerne vil have vist, men når det deles så skæres der noget af i begge sider eller i højden. Ved Open Graph kan du fortælle Facebook at du vil have dem til at bruge et Facebook optimeret billede i stedet.

filatopost-no-ogI eksemplet til venstre kan du se hvordan min side www.filato.dk ser ud når man bare indsætter linket i et Facebook  indlæg uden at gøre noget ved billederne.

Det er rigtig irriterende at have designet noget lækkert indhold, som bare ikke ser pænt ud på Facebook når det deles. Problemet er også at de fleste enten vil have vist deres logo eller i hvert fald vælge hvilket billede der bruges.

Læg mærke til her at der kun i følge Facebook er 1 af 1 billede. Så vil jeg ændre billedet skal jeg selv uploade et, hvilket er fint nu, men hvis du deler dit link i en tråd eller en anden gør det så ser de altså dette her.

Kig på dette link for at se de dimensioner som Facebook arbejder med. Se dem her og her

Debug – Test om du har implementeret det korrekt

Når du har implementeret alt det du ved nu så vil du jo gerne vide om det virker. Problemet er at Facebook kun “scraper” dit site hver 24. time. Det er i hvert fald hvad de selv siger. Nogle gange går der altså et par dage før det virker og andre gange hurtigere.

I mellem tiden kan du jo bruge Facebooks Open Graph Meta Data Debug Tool. Her kan du også se hvordan din side tolkes af Facebook uden brug af disse meta tags.

Hvis du vil vide om du også har implementeret Schema.org Micro Data korrekt kan du bruge Google Rich Snippet Testing Tool

Prestashop – Den tekniske del

Med den ovenstående viden kan du implementerer Open Graph Meta Tags i langt de fleste CMS systemer uden de store problemer. Du kan også vælge et Theme som understøtter det i forvejen eller få en til at tilrette dit eksisterende. Her giver jeg en kort gennemgang af hvordan du kan gøre på Prestashop. Læg mærke til at der kan være forskelle og denne er kun testet på Prestashop 1.5.6.1

Det første du gør er enten at lave en override classe af FrontController.php i /override mappen. Hvis ikke du har lyst til at rode med override classes så kan du også rette direkte i filen /classes/controller/frontController.php
Find metoden

public function initContent()

Nederst i denne metode indsætter du følgende linjer kode

              
If(isset($_GET['id_product']))
{
	$product = new Product($_GET['id_product'], false, intval($this->context->language->id));
	if (Validate::isLoadedObject($product))
		self::$smarty->assign('product', $product);

	$images = $product->getImages(intval($this->context->language->id));
	foreach ($images AS $k => $image)
	if ($image['cover'])
	{
		$cover = $image;
		$cover['id_image'] = intval($product->id).'-'.$cover['id_image'];
		$cover['id_image_only'] = intval($image['id_image']);
	}
}
if (!isset($cover))
	$cover = array('id_image' => Language::getIsoById($this->context->language->id).'_default', 'legend' => 'No picture', 'title' => 'No picture');
self::$smarty->assign('cover', $cover);

Den ovenstående kode sørger for at billeder for produkterne er tilgængelige allerede ved load af siden og altså mens du skal lave dine Meta Tags.
Nu kan du den problemer bruger Open Graph Meta Tags i din Header.tpl i din Theme folder. Husk at der på forsiden og CMS sider mv. ikke er nogle produkter og her skal du altså selv styre hvilke billeder du vil have vist.
Deraf koden herunder, hvor du selv kan ændre i de billede URL’er du har brug for.

<meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>
<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>
<meta property="og:site_name" content="{$shop_name|escape:'htmlall':'UTF-8'}"/>
<meta property="og:type" content="website">
<meta property="og:description" content="{$meta_description|escape:html:'UTF-8'}">
{if $page_name=='product'}
<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}">
{else}
<meta property="og:image" content="{$img_ps_dir}logo.jpg" />
{/if}

Hvis du gerne vil have flere billeder at vælge i mellem på Facebook kan du skrive sådan her for forsiden.

<meta property="og:title" content="{$meta_title|escape:'htmlall':'UTF-8'}"/>
<meta property="og:url" content="http://{$smarty.server.HTTP_HOST}{$smarty.server.REQUEST_URI}"/>
<meta property="og:site_name" content="{$shop_name|escape:'htmlall':'UTF-8'}"/>
<meta property="og:type" content="website">
<meta property="og:description" content="{$meta_description|escape:html:'UTF-8'}">
{if $page_name=='product'}
<meta property="og:image" content="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}">
{else}
<meta property="og:image" content="{$img_ps_dir}logo.jpg" />
<meta property="og:image" content="http://www.ditdomain.dk/billede1.jpg" />
<meta property="og:image" content="http://www.ditdomain.dk/billede2.jpg" />
<meta property="og:image" content="http://www.ditdomain.dk/billede3.jpg" />
{/if}

Du kan udover product, test for følgende for at identificerer hvilken side du har fat i og dermed hvilket billedet du gerne vil vise

Forsiden = index
Kategori = category
Produkter = product
Producenter = manufacturer
Nyheder = new-products
Tilbud = prices-drop
Text sider = cms
Kassen = [Dette kan varierer alt efter hvilket modul du har installeret] Du kan indsætte nedenstående meta tag i din header og selv tjekke
<meta name=”page” content=”{$page_name}”>

Hvis du vil gå endnu dybere kan du også kigge på det ID, som siden har. Det kan være brugbart hvis du under en bestemt CMS side, som f.eks. er en artikel med mange billeder ønsker at vise et bestemt billede.
<meta name=”page” content=”{$cms->id}”>

Hvis du er på produkt sider eller kategori sider giver det nok ikke så meget mening men herskifter du $cms ud med hhv. $product eller @category

 

Du skal blot være opmærksom på at Facebook ikke har nogle regler for hvordan de vælger default billedet. Nogle siger det er det første og andre det sidste. Jeg har oplevet begge dele.

Løsningen – Sådan virker den nu

Som du kan se nu efter der er implementeret Open Graph, er det et helt andet billede der vises og at det er 100% optimeret til Facebook- De få ændringer gør at nu er mit indhold lige pludselig lidt mere dele-venligt, samt at modtageren måske får lidt mere lyst til at se nærmere på mit hårde arbejde

Hvis du tjekker din side med Facebook Open Graph Debug Tool, kan du se de billeder som Facebook vil benytte. Du kan indsætte alle URL’er i dit system for at tjekke hvordan det ser ud og du kan lave flere if sætninger hvis du vil have at der skal leveres forskellige billeder til de forskellige områder af dit site. Du har måske en side som du har dedikeret til at opdaterer hver gang der sker noget i TV, eller når en højtid nærmer sig.

Brug Open Graph aktivt i din markedsføring.

Nu tænker du måske at det var dog en masse arbejde for næsten ingenting. Jeg mener bare at du er helt galt på den.
For det første ser jeg det som en måde at servicere mine kommende kunder på og forhøje min mulige konvertering.

Der er dog andre måder du kan vælge at bruge det på og det er her den største forskel på Open Graph og Schema.org Micro Data gør sig gældende. Du kan nemlig bruge det til reklame og højtider.

Reklamen giver sig selv i og med at du kan vælge det billede der skal bruges, men er du lidt smartere så skifter du billedet ud ved de forskellige højtider, som Jul, Påske, Valentine, Mors dag, Fars dag, Bøf og Blow Job dag mv.

Hvis du udnytter dette er du lige pludselig høj-aktuel ved en ganske almindelig deling fra enhver bruger der deler dit budskab. Langt de fleste brugere gider ikke eller ved ikke at man kan skifte billede og tekst og trykker bare OK.

Det trick kan man ikke med Schema.org.

Så se at komme i gang med at bruge Open Graph på din side og i din markedsføring.

Share.
Loading Facebook Comments ...

Leave A Reply