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 and IoT integration. Currently Co-founder && CTO of https://lifegate.io


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 and IoT integration. Currently Co-founder && CTO of https://lifegate.io