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

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.
Image Format Flexibility: Despite common belief and contrary to outdated sources ¹ ², 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.

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.
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.
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:

updateMeta.ts

        export function updateMeta(props: {
  title?: string;
  description?: string;
  img?: string;
  keywords?: string;
} = {}) {
  // Nuxt composable hooks for route and config
  const route = useRoute();
  const config = useRuntimeConfig().public;
  // 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.

Melodic Mind is building a platform for musicians

If you ever felt like you wanna learn how to play an instrument or sing, this is a call from the universe! Music is one of the most amazing things humans can experience, and it's even more amazing when we are actively making it.
We have been building apps that can help your journey in music, and we invite you to check them out. It's a space for you to explore, learn, and grow in your music-making. Whether you're looking to discover new techniques or refine your skills, we're here to support your passion.
More importantly though, we urge you to take a few minutes everyday and do something that you feel you can enjoy that is related to music.
Just remember, the most important thing is to have fun and enjoy the process.

Get Updates

Join thousands of others who are already subscribed

Join our community