Log in Sign up

Dynamic image for a Twitter Card for each post / permalink

I'm trying to work out a way to generate a unique twitter card for each of my posts, so when an article / permalink is shared on socials it gives a summary based on the first couple lines of the post and uses the first image in the post as the preview image.

Currently I have a share card coming up with the text part of the preview but can't work out how to incorporate the image into it.

Any help would be greatly appreciated.


a year ago, 5 replies   developers   social-media   Edit question

Does your template contain the <meta> tags which ship with the default templates? See head.html lines 8 through 19

<meta property="og:title" content="{{> title}}">
<meta property="og:description" content="{{> description}}">
<meta property="og:type" content="website">
{{#entry}}
{{#thumbnail.large}}
<meta property="og:image" content="{{{url}}}">
<meta name="twitter:card" content="summary_large_image">
{{/thumbnail.large}}
<meta property="og:url" content="{{{absoluteURL}}}">
{{/entry}}
Answered 2 years ago · Edit answer

Yes it does, but it uses a single head template for all pages. So currently I'm using the following in my head, which will generate the Twitter Card using a pre-determined image on sharing: -

    <meta name="twitter:card" content="summary" />
    <meta name='twitter:site' content='@franczv' />
    <meta name="twitter:creator"  content='@franczv' />
    <meta name='twitter:title' content='{{> title}}' /> 
    <meta name="twitter:description"  content='{{> description}} | Link to {{title}}' />
    {{#entry}}
    <meta name="twitter:card" content="summary_large_image">
    <meta name='twitter:image' content='https://blotcdn.com/blog_1fd6e52b11464888b57d1ebdf17eaebb/_image_cache/4057df64-cb97-435b-a4a3-6eedf76a6fae.jpg' />
{{/entry}}

This adds the generic share image I use but I wanted to know what variable would work to use the first image in a post if there was one available.

Answered 2 years ago · Edit answer

So what you're really trying to do is add a fallback thumbnail if none exists in the post?

Here's how:

<meta property="og:title" content="{{> title}}">
<meta property="og:description" content="{{> description}}">
<meta property="og:type" content="website">
{{#entry}}
{{#thumbnail.large}}
<meta property="og:image" content="{{{url}}}">
<meta name="twitter:card" content="summary_large_image">
{{/thumbnail.large}}
{{^thumbnail.large}}
<meta property="og:image" content="https://blotcdn.com/blog_1fd6e52b11464888b57d1ebdf17eaebb/_image_cache/4057df64-cb97-435b-a4a3-6eedf76a6fae.jpg">
<meta name="twitter:card" content="summary_large_image">
{{/thumbnail.large}}
<meta property="og:url" content="{{{absoluteURL}}}">
{{/entry}}
Answered 2 years ago · Edit answer

So I implemented the above code, two interesting results.

If the post has a Youtube video embedded, the preview image defaults to the image in the video embed.

The fall back for posts without any images has stopped working, I have tested the link to the default image and it resolves but doesn't display.

Any suggestions?

Answered a year ago · Edit answer

It's possible that Twitter is not following redirects, try replacing the URL to your fallback image with this:

https://cdn.blot.im/blog_1fd6e52b11464888b57d1ebdf17eaebb/_image_cache/4057df64-cb97-435b-a4a3-6eedf76a6fae.jpg

We recently changed CDN host from 'blotcdn.com' to 'cdn.blot.im'.

Does that resolve the issue?

Please note that Blot made this switch for all the images in your posts, etc. it's just the URL encoded in your template statically, that was left as-is

Answered a year ago · Edit answer