Open graph data must be in head

This is part of the Semicolon&Sons Code Diary - consisting of lessons learned on the job. You're in the web-development category.

Last Updated: 2024-04-26

My Twitter and Facebook cards open graph cards (which enable nice images when the website is shared) were not being picked up. I tweaked and tweaked and tweaked them to no avail.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@semicolonandson">
<meta name="twitter:creator" content="@semicolonandson">
<meta name="twitter:title" content="<%= episode.name %>">
<meta name="twitter:description" content="<%= episode.meta_description %>">
<meta name="twitter:image" content="<%= raw episode.image_url(:twitter) %>">
<meta name="twitter:image:width" content="1280">
<meta name="twitter:image:height" content="720">

In the end the issue was that I placed them in my HTML body, instead of head, where they belong.