Twitter Cards

I was actually hoping for the same thing. Although, I'm not sure what will become of Twitter, if it sticks around, I'd love to have this for imageless posts.

You can do this by editing the head.html file in your template and adding the appropriate meta tags. Here's a good guide, and also Twitter's official card guide.

For reference, Here's what I put for mine:

and the raw code:

<!-- Twitter -->
    <meta name="twitter:card"         content="summary" />
    <meta name="twitter:site"         content="@HeyDingusNet" />
    <meta name="twitter:creator"      content="@_heyjarrod" />
    <meta name="twitter:title"        content="{{title}}" />
    <meta name="twitter:description"  content="Link to {{title}}" />
    <meta name="twitter:image"        content="https://heydingus.net//_files/hd-square-1024.png" />

Key here is that you need to have an appropriate image at the URL that you point the twitter:image tag to. For example, I made this image and put it in my files folder, and then used its static URL in that tag. So this is the image that Twitter uses in the card:

And the resulting Twitter Card:

7 Things (Which Are Some Twitter Users I Need to Thank) This Week, 2022-11-13 https://t.co/5osTLuj1BF

— HeyDingus.net (@HeyDingusNet) November 14, 2022

Note that you could use `"{{> description}}" in the Twitter description tag if you want it to pull the first few sentences from a post instead.

You'll also have to add the OpenGraph meta tags if you want a similar effect for shares on Facebook and other places that use OG:

  <!-- Open Graph -->
    <meta property="og:title"          content="{{title}}" />
    <meta property="og:type"           content="article" />
    <meta property="og:article:author" content="{{metadata.author}}" />
    <meta property="og:url"            content="{{{absoluteURL}}}" />
    <meta property="og:image"          content="https://heydingus.net//_files/hd-square-1024.png" />
    <meta property="og:description"    content="Link to {{title}}" />

Thanks Jarrod, but I think I need some kind of conditional, so that when I do have an image, it becomes a large Twitter card with the image.

BTW - I've been meaning to ask you how you did the footer in your RSS feed.

Thanks! Fixed most of my issues, just for some reason it’s ignoring my {{title| and just puts website title not post title.

If you ever figure out how to make that conditional, I'd be interested, too.

As for the footer, I made a new HTML file called blogblurb.html in my template folder. The only thing in that file is the html code for that text string:

<p><em>HeyDingus</em> is a blog about technology, the great outdoors, and other musings. If you like what you see — the <a href="/blog">blog posts</a>, <a href="/tagged/wallpapers">wallpapers</a>, <a href="/tagged/shortcuts">shortcuts</a>, <a href="/tagged/scripts">scripts</a>, or anything — please consider <a href="https://ko-fi.com/heyjarrod">leaving a tip</a>, checking out my <a href="https://cottonbureau.com/people/heydingus">merch</a>, or just sharing my work. Your support is much appreciated!</p>

Then in the footer.html file, I call up that file within a span:

<span class="blogBlurb">{{> blogblurb}}</span>

And for the RSS feed, in the feed.rss file I include it in the description tag after a horizontal rule tag:

<description><![CDATA[ {{#encodeXML}} {{{body}}} <hr />{{> blogblurb}} {{/encodeXML}} ]]></description>

That is so helpful, thanks. Also, where did you put your author info in the feed.rss file, so that you get blog title and author in the metadata?

For the Twitter card, what I usually do is add a standard thumbnail image of my blog logo, if the post doesn't have a feature image. I wish I could scale that back to a small Twitter card (only when I don't have a feature image).

Here's my whole feed.rss file with the relevant lines highlighted. That should get you going!

I think there's probably a way to get the Twitter card to surface what we want (generic logo when no image, hero image when there is) using the Thumbnail metadata tag. I remember reading in Blot's documentation that if there's no Thumbnail image link specified in the metadata for the post, it'll automatically use whatever image is the largest from the post.

If you had a text shortcut to put your generic logo in the metadata for most posts, and then just left that out for posts that have images included, I think you could use the {{metadata.thumbnail}} attribute within the Twitter card meta tags in head.html.

But that's just a theory, I haven't tested it.

Thanks, that's really helpful.

Who knows, in a few days the ability to get good Twitter cards might be moot.