First off some general thoughts on how to use opengraph metatags.
Since the uprise of Social Media, sharing sites, deeplinking and snippetting content has become a important aspect of SEO and so almost every site has some kind of facebook-like-button to let user easily share the page.
Most sharing endpoints, facebook f.e, bring a more or less good parser/linter to summarize the page content. So the first text paragraph will be taken as text snippet and all images that fit certain requirements will be offered to chose a preview-thumbnail from.
So far so good.
But sometimes you want to have control of the content that is used for the preview on the sharer site.
And thats where the opengraph metatags come into play. With them you can specify title, description and image of the preview snippet.
Thats great, but it has some caveats, which i like to describe while introducing the silverstripe opengraph module by Damian Mooyman.
The module is pretty well done and delivers most content prefilled. So just install it and the rest comes automatically through the $MetaTags var in your template.
In the backend you can insert some information like locality and your facebook app id.
You should further add a default 200x200px image in your config:
OpenGraphPageExtension::$default_image = '/themes/myTheme/images/og_image.png';
and add the opengraph namespace var in your html tag:
<html lang="en" $OGNS>
Thats basically it, wow!
But of course you have to do some finetuning to represent your content best.
So these questions you should ask yourself for each site where you would like to implement the metatags:
Why should you use opengraph metatags?
To have control over the content of the sharer snippets.
Where should you use opengraph metatags?
Where you can control / predict the content.
Its not always a good idea to preselect the image.
F.E when you have RichText HTML Field where the Content Manager can insert images. Then those images might be good to be shared.
But with a preselected image via the og:image tag, the facebook share box will not list the other images.
So on some pagetypes it might be better to not use the og tags and let the facebook parser do its dirty work.
This you can achieve with overwriting the getOGType function in your pagetype:
NonOGPage extends Page
{
function getOGType() {
return null;
}
}
(thanx Damian)
How should you use it?
Treat your content right. So if you have a structured page type, think of which content fits and overwrite the resp. function of the module to serve the content you would like to see.
F.E. if you have multiple images and you want the user to choose from while in the share dialog then do something like that:
PageWithImages extends Page {
function OGImage() {
$imgs = array();
if ($this->Images()) {
$images = $this->Images();
foreach ($images as $value) {
$og_img = $value->Thumb()->CroppedImage(200, 200);
$imgs[] = $og_img->Url;
}
}
if(empty($imgs)){
$imgs[] = Director::absoluteURL(OpenGraphPageExtension::$default_image);
}
return $imgs;
}
}
Who uses the opengraph metatags?
– Facebook of course.
– Google+ seems to prefer schema.org annotation but uses opengraph as fallback and then meta tags and then content.
– Pinterest also seems to use it, partly.
Here is a interesting discussion about it:
http://stackoverflow.com/questions/6536213/are-there-tags-to-specify-the-google-1-story-format-in-google-like-og-meta-for
– and probably some more…
And at last here is the facebook debug tool to check your opengraph contents.
Hey Ivo,
I’m very impressed with your article. I’m really happy to see that my code could help someone else. This was the main intent of writing it.
Good luck with your project and let me know how it goes. ;)
Hey Ivo, I’ve updated my module docs. Hopefully this will make it easier to use in the future!
https://github.com/tractorcow/silverstripe-opengraph
I’ve also been using schema.org lately for a lot of things. Not sure if it’s module-worthy, but it’s certainly a useful tool.
where in the admin do those extra tabs show up?
Quote: In the backend you can insert some information like locality and your facebook app id.
I don’t see these on 2.4.5 version
hi stephen, you can find those tabs on the main node.