OG Meta Tags in 2024: What Finally Worked For Me

TLDR: You can use Webp. You can use a CDN. Put your OG meta tags as high as possible in your <head> tag. Use a 16:9 aspect ratio for your images, but make sure it will look good when cropped to a square.

        <meta property="og:image" content="https://my-cdn/my-img.webp">
<meta property="og:image:width" content="448">
<meta property="og:image:height" content="256">
<meta property="og:image:alt" content>
<meta property="og:image:type" content="image/webp">

      

Seo Sh*t...

No one likes Seo(or so I wanna believe). But it's a necessary evil. And it's not that bad. It's actually quite fun to see how you can make your URL's social media preview look better.

I used this tool to test my URL's preview on different platforms: Meta Tags Toolkit to test my URL's preview on different platforms, as well as pasting it manually on whatsapp(cause it was important to me it will work there).

The Insights

1. Placement Matters: Position your OG meta tags as high as possible within your <head> element. In Nuxt, the tagPriority option in useHead is your best friend for achieving this. It ensures your meta tags are given the importance they deserve by the browser and social media crawlers. It didn't work for me when it was after the other imports.
2. Image Format Flexibility: Despite common belief and contrary to outdated sources ^{1 2}, webp images are fully supported across most major platforms. This revelation opens up opportunities for using high-quality, optimized images without sacrificing compatibility. The most recent source I found about the matter had this table:

But I tested it myself and it worked on both Slack and LinkedIn. I don't really care about Quora and Skype, and don't use Signals and not sure how common it is but if someone wants to test it, I'd be happy to hear about it and update this article.

1. Aspect Ratio Matters: There are so many sources online that say different things, most of them recommend 1200x630, but I found that 16:9 aspect ratio works as well. It looks good on all platforms.
2. You can use a CDN: There's a misconception that using a CDN for hosting images might cause issues. However, my testing confirms that images served from a CDN work seamlessly, ensuring fast, reliable delivery of your og images.
3. Tag Specificity Optional: I tested and saw that it works the same whether you put these or not, and more over it works even if they are incorrect(e.g you specify image/png and use a webp, or different width and height values then the image has). However, you should still make sure you use them properly for the sake of correctness and future compatibility.

Implementation in Nuxt

For the Vue people, here's how I implemented it in Nuxt:

        export function updateMeta(props: {
  title?: string;
  description?: string;
  img?: string;
  keywords?: string;
} = {}) {
  // Nuxt composable hooks for route and config
  const route = useRoute();
  const config = useAppConfig();
  // Destructuring default or page-specific properties
  const { description: configDesc, url: configUrl, ogImgUrl: configImg, keywords: configKeywords } = config;

  const title = props.title || '' as string;
  const description = props.description || configDesc as string;
  const url = configUrl + route.path;
  const img = props.img || configImg as string;
  const keywords = props.keywords || configKeywords as string;

  useHead({
    title,
    titleTemplate: '%s %separator %siteName',
    meta: [
      { name: 'description', content: description },
      { name: 'keywords', content: keywords },
      { property: 'twitter:title', content: title },
      { property: 'twitter:description', content: description },
      { property: 'og:title', content: title },
      { property: 'og:description', content: description },
      { property: 'og:url', content: url },
      { property: 'og:image', content: img },
      { property: 'og:image:width', content: '448' },
      { property: 'og:image:height', content: '256' },
      { property: 'og:image:type', content: 'image/webp' },
    ],
    // I also make sure each page has a canonical URL
    link: [{ rel: 'canonical', href: url }],
  }, { tagPriority: 'critical' });
}

      

Concluding Thoughts

I spend a whole freaking day on this, and I'm happy to say that I'm finally satisfied with the results. I get nice previews on whatsapp, slack, linkedin, and twitter. I hope this article helps you avoid the same headache I had. If you have any questions or insights, please share them in the comments below. I'd love to hear about your experience.