Log in Sign up

Thumbnails on social media?

I would like an image used in my blog post to appear when I share the post on Twitter, or Facebook.


6 months ago, 4 replies   developers   Edit question

You will need to edit your template's <head> section in the head.html template file. Add the following:

{{#entry}}
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{summary}}">
{{#thumbnail.large}}
<meta property="og:image" content="{{{url}}}">
{{/thumbnail.large}}
<meta property="og:url" content="{{{absoluteURL}}}">
<meta name="twitter:card" content="summary_large_image">
{{/entry}}

Source: The Essential Meta Tags for Social Media on CSS-Tricks.

Answered 4 years ago · Edit answer

I would like to edit the content for {{#thumbnail.large}} and {{summary}}. Where is they being pulled from?

Answered 3 years ago · Edit answer

On https://blot.im/questions/1718l they told me to add the following line to the metadata of the post, and it works!

Thumbnail: /path/To/Image.jpg
Answered 8 months ago · Edit answer

A tip:

I modified the above to include my blog's logo image for posts without images because quite a few platforms show a yucky no image thingy when sharing your links.

Here's what I added:

 {{^thumbnail.large}}
    <meta name="twitter:image" content="(link to your image)">
    <meta property="og:image" content="(link to your image)">
{{/thumbnail.large}}

...where it says (link to your image), pop in the URL to your logo or graphic you want to be used. I put mine in the /pages/_attachments folder for example.

You can preview your URLs here to see what it looks like across platforms.

Ray

Answered 6 months ago · Edit answer