FRNWTR

Adding Opengraph to Ghost

Introduction

user

Walter Franchetti

Started coding for passion at age 12 and professionally since age 18. In love with UX hacks. Currently Co-founder and CTO of https://earlyclaim.com


opengraph facebook ghost best integration

Adding Opengraph to Ghost

Posted by Walter Franchetti on .
Featured

opengraph facebook ghost best integration

Adding Opengraph to Ghost

Posted by Walter Franchetti on .

Googling on the net the better way to add Opengraph protocol on Ghost I came across a thread of the official forum where a staff Member suggest to add the single code injected handlebar (https://ghost.org/forum/using-ghost/371-facebook-opengraph-tag-issues/)

Thread reply by Ghost Staff
Thread reply by Ghost Staff

Hannah suggest to hard code the og in the theme following this way

Ghost Team promise a future automatic way to add them (now the current version is 0.4). I hope that they implement the Opengraph and all the meta as well with the right syntax for the kind of content, maybe can be intresting the implementation of the og:see_also (take a look on the Facebook Documentation about it and all other meta og)

But... because there is always a but... by now the only way is to hardcode the metatags so this is my implementation

Head.hbs

{{{block "meta"}}}

Index.hbs

{{#contentFor "meta"}}
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{@blog.url}}" />
    <meta property="og:title" content="{{@blog.title}}" />
    <meta property="og:site_name" content="{{@blog.title}}" />
    {{#if @blog.logo}}<meta property="og:image" content="{{@blog.logo}}" />{{/if}}
    <meta property="og:description" content="{{@blog.description}}"/>
    <meta property="fb:profile_id" content="<YOUR FACEBOOK ID>" />
    <meta property="fb:admins" content="<YOUR FACEBOOK ID>" />
{{/contentFor}}

Post.hbs

{{#post}}
    {{#contentFor "meta"}}
        <meta property="og:type" content="article" />
        <meta property="og:url" content="{{url absolute="true"}}" />
        <meta property="og:title" content="{{title}}" />
        <meta property="og:site_name" content="{{@blog.title}}" />
        <meta property="og:description" content="{{excerpt characters="220"}}..."/>
        <meta property="article:author" content="https://facebook.com/<YOUR FACEBOOK ID>" />
        <meta property="article:published_time" content="{{date format="YYYY-MM-DD"}}" />{{#foreach tags}}
        <meta property="article:tag" content="{{name}}" />{{/foreach}}
        <meta property="fb:profile_id" content="<YOUR FACEBOOK ID>" />
        <meta property="fb:admins" content="<YOUR FACEBOOK ID>" />
    {{/contentFor}}
...
...
{{/post}}

Page.hbs

{{#post}}
    {{#contentFor "meta"}}
        <meta property="og:type" content="website" />
        <meta property="og:url" content="{{url absolute="true"}}" />
        <meta property="og:title" content="{{title}}" />
        <meta property="og:site_name" content="{{@blog.title}}" />
        <meta property="og:description" content="{{excerpt characters="220"}}..."/>
        <meta property="fb:profile_id" content="<YOUR FACEBOOK ID>" />
        <meta property="fb:admins" content="<YOUR FACEBOOK ID>" />
    {{/contentFor}}
...
...
{{/post}}

Hope it could be usefull for someone.
I'm really courious to know about your implementation.

user

Walter Franchetti

http://frnwtr.com

Started coding for passion at age 12 and professionally since age 18. In love with UX hacks. Currently Co-founder and CTO of https://earlyclaim.com