Enabling Social Meta Tags in Orchard

I've been sharing some of the content I've written via LinkedIn, Twitter and Facebook - mainly reserving the recipes I've been putting together for Facebook and the more technical / professional stuff for LinkedIn and Twitter. Facebook and LinkedIn seem to be fairly aggressive about parsing the content of the linked page and extracting what they think is appropriate meta-data, e.g. any associated image, article title, etc, whereas Twitter seems to rely exclusively on in-page meta data and without it will do nothing other than leave the link in the tweet. This means that, as it's been fairly low down my list of things to do, I've been "faking out" my tweets to make them look kinda, sorta like they've got the metadata associated with them that twitter groks. That said, it's definitely a fake out, one of these things definitely does not look like the other!

Here's a selection of links to useful bits of information in this area

So, getting the markup into Orchard content

NOTE: This section deals with Open Graph Meta Tags; twitter doesn't seem to think much of these and the way to go is Twitter specific tags, which I cover further on down

My immediate thought was, "I know, I'll go and write a module to do this", quickly followed by "haaaaaang on, surely this is a solved problem for a CMS?", which turned out to be true. A quick search on the Orchard Module Gallery turned up a module called Social Meta Tags which does what it says on the tin, with the added advantage that it has documented compatibility with Orchard 1.10.x. The latter is important as there seem to have been a couple of changes introduced in 1.10.x that have broken a large number of modules, albeit it seems to be more of a problem for modules that haven't been updated in quite some time!

First step, install the module. I'm not going to go into detail on this because it's not very interesting and there's Orchard documentation for this. Once the module is installed, and the feature enabled, it does get a bit more interesting. The "Settings" area of your /Admin dashboard will now be home to a "Social Meta Tags" entry, click on this to bring up the Settings user interface for the module

From there, I decided that I was only going to configure Open Graph meta tags for now, so I clicked on the almost hidden "Configure" link under the "Open Graph Meta Tags" heading on the Settings Overview tab. This basically takes you to the "Facebook Open Graph Meta Tags" tab, where you can choose which tags are enabled, which ones aren't and default values for some of the settings. As you can see from the screenshot below, I was absolutely unable to resist the urge to override the local tag to en-GB, because, well, I can!

The next step is to add the Open Graph Meta Tags content part to the Blog Post content type so that values fore each of the tags can be specified on a per-post basis. This isn't difficult and the starting point is visiting Content Definition in the /Admin area of your Orchard site, finding Blog Post and clicking Edit.

Finding and modifying the Blog Post content type

Once you've clicked Edit, the next thing to do is to scroll down until you see Parts, click "Add Parts" and add the "Open Graph Meta Tags" content part

Adding the content part to the Blog Post content type

Once that's done, and you've clicked save, you should be presented with a top-hat that confirms that it's done.

Confirmation that the content part has been added

It's now a matter of navigating through the /Admin area back to one of your blog posts and adding some metadata to it. Once you've gone back into a blog and selected a post, you should see some additional UI for specifying the content of the Open Graph meta tags. In the case of Open Graph, these are hidden in a collapsed area so won't appear until you click on the chevron to expand it.

Editing the Open Graph meta tags for a blog post

Add some values into these fields, save your post and publish it. One "trick" I used to confirm that the meta tags are actually being picked up was to tweak the title of a post and then publish a link to it on Facebook. This is a quick and easy way to confirm that something that consumes these tags is consuming them in preference to the actual post/page title, for example. Et voila:

Blog post showing in Facebook with Open Graph meta tags consumed

Unfortunately, as I alluded to at the top of this section, running your page through the Twitter Card Validator won't show the meta tags being consumed - it looks like we need to use the Twitter specific ones!

Lighting up Twitter

This is much of the same, the process outlined above for configuring and ebaling Open Graph Meta Tags is repeated, except we're now using the Summary Cards Meta Tags content part (to attach to the Blog Post content type), setting which meta tags we want to expose in the Settings UI against Twitter Summary Cards Meta Tags and setting the specific values against a section of the same name which will have appeared in the Blog Post editing UI. Unfortunately, unlike Open Graph, the Twitter tags aren't in a collapsed section so are always on display.

Once these fields have been filled in, the post saved and published, returning to the Twitter Card Validator should show a card, just like this:

This blog post showing a card in the Twitter Card Validator

About Rob

I've been interested in computing since the day my Dad purchased his first business PC (an Amstrad PC 1640 for anyone interested) which introduced me to MS-DOS batch programming and BASIC.

My skillset has matured somewhat since then, which you'll probably see from the posts here. You can read a bit more about me on the about page of the site, or check out some of the other posts on my areas of interest.

No Comments