More About Open Graph and YouTube Thumbnails

Recorded on April 27th, 2016

Here’s Part 2 of what I started last night with the YouTube thumbnail issue. I knew from doing some reading that Facebook looks for an og:image Open Graph meta tag in your HTML when you share a post from your site. If you have an embedded YouTube video that you hope generates a thumbnail, you need a meta tag that looks something like this:

<meta property="og:image"  
wRnfXxsPQNQ/hqdefault.jpg" />  

I’m running this blog on Statamic, which has the handy ability to let you define a new field in the YAML at the top of the text file of your post, like this. I called my static image URL field my_og_image:

title: 'Public Service Announcement: I've Got A Knife'. categories: [ music, safety first ]

And then, to make it show up in every post, you add this to Statamic’s _themes/THEME_NAME_HERE/layouts/default.html  file:

<meta property="og:image"  
content="{{ my_og_image }}" />

That’s technically not the entirely correct way to do it, because it’s not conditionally adding the meta tag. If you don’t define a value for my_og_image in your post’s YAML, you’re still going to get a meta tag for og:image and it’s going to be blank, which isn’t great. But I’m still learning about how to properly define fieldsets and stuff in Statamic, so I hope to figure that out later. This will work well enough for me now.

blog comments powered by Disqus