Adding Link Preview to your Hexo Blog

As discussed here, I use Hexo for this Blog. When sharing to LinkedIn or Twitter I noticed that my links were lacking the title image for the blog post. For example:

The Link Preview image is controlled via the OG Meta Tag. The question is how to add these tags via Hexo.

There are two steps.

Front Matter

Each Hexo post contains a [Front Matter] (https://hexo.io/docs/front-matter.html) section that contains the post’s metadata such as Title, Tags etc. Any data added to this section is parsed into the Page object for use during rendering. All that’s needed then is to add the data we want to use in the OG Meta tags. Here Ive added a new tag ‘ogimage’ to hold the data.

Template update

The last thing to do is update the EJS template used to render the page headers. This is found under ‘Themes//layout/_partial’. Simply add some code to render the meta tags if the value is provided in the post. For example:

<% if (page.ogimage){ %>
<meta property="og:image" content="<%= page.ogimage %>"/>
<meta property="og:description" content="<%= page.excerpt %>"/>
<% } %>

All Done

Now when you generate your site the OG metadata is set if you provided the data in your Front Matter. It should look something like this:

Happy blogging…