Opengraph MetaTags in SilverStripe

Ivo Bathke — Thu, 14 Jun 2012 15:33:41 +0000

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:

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.

The post Opengraph MetaTags in SilverStripe first appeared on Nerdpress.org.

Facebook | Nerdpress.org

Opengraph MetaTags in SilverStripe