Customising Facebook share content on Ghost

In this post, I describe how to fix your Ghost posts so that the descriptions in your Facebook shares aren't irrelevant and unreadable.

Clicking on the Facebook share button on your posts produces a description of the page that is ugly and makes very little sense at all. This is because, by default, Facebook scrapes your post to create a description. As the Facebook documentation notes, "On a regular HTML page this content is basic and may be incorrect, because the scraper has to guess which content is important, and which is not".

If you'd like your page descriptions to make sense, you can anotate your page's HTML head with Open Graph meta-tags. But, with Ghost, one has no direct control over the HTML generated for your posts. Even if one did, one would have to annotate each page individually.

This is where Handlebars.js, Ghost's templating system, comes in handy. A Ghost theme has two template files that are relevant to us at this point, default.hbs (the base template used to add the HTML that needs to appear on each page) and post.hbs (the template for all of your posts, which extends default.hbs).

If you were to open the above named files for your theme, you'll notice that the html <head> is defined in default.hbs, and not in post.hbs. However, you cannot access information about a post — such as its description — from default.hbs. This is where content blocks, a feature of express-hbs (a library that extends handlebars, and is used by Ghost), comes in handy.

So, to add the right OG tags to your posts, add the following line to the <head> section of your default.hbs.

{{{block "metaTags"}}}

Then, in your post.hbs, add the following lines after the line marked {{#post}} (so that you are in the context of your post).

    {{#contentFor "metaTags"}}
        <meta property="og:title" content="{{title}}" />
        <meta property="og:url" content="{{url absolute="true"}}"/>
        <meta property="og:description" content="{{excerpt}}"/>
        <meta property="article:author" content="{{author.website}}">
        <meta property="og:type" content="article">
    {{/contentFor}}

Push your changes through, and you should see clicking on the Facebook Share button at the bottom of your posts shows the excerpt of your blog.

Tailpiece

If you do not like how excerpts are just the first 150 words or so of your post, you might wish to customise these. Please check this excellent blog post out to see how you can specify exactly how much of your post you wish to set as a summary on the main page.

Update

It turns out that if you change the text in your og:description metatag after you use the share dialog once, the Share Dialog doesn't appear to read it off the page any more. Pah!