A compelling OG image can boost engagement and click-through rates.
When you share a link on social media like Twitter, LinkedIn, Facebook, or via messaging apps like WhatsApp, Slack, or Telegram, a thumbnail preview image usually appears. This image, called the Open Graph or OG image, is meant to represent your content.
Without the correct setup, you might end up with missing images, cut-off titles, or irrelevant descriptions appearing in the social media cards. This leads to previews that look unprofessional and unappealing, which can deter engagement and reduce click-through rates.
Learn how your content is read by Search Engines and social media
Use the debugger to find warnings about opengraph tags and tags from social platforms that are either incomplete, or completely missing.
What are meta tags?
Meta tags provide useful information about your website content to search engines, visitors to your website, and when you share content. There are certain rules about each meta tag that you can make use of to position your content more effectively.
<title>Product Hunt – The best new products in tech.</title>
<meta name="description" content="Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking about.">
Why are meta tags so important?
When you search with Google, or other search engines, the title and description meta tags act like advertising copy! This is why it’s super important to get them right, if not, you're losing out on website visitors. The <title> acts as a headline, whilst the description (AKA a snippet) is a hook to pull people in with, typically describing the content of the page.
Titles aren't just used by search engines, they’re also used on bookmarks, and browser tabs. Google usually truncates descriptions to around 155-160 characters.
Recommended reading- Best practices for influencing title links
- Common issues with title tags, and how google manages them
- Best practices for creating quality meta descriptions
What are Open Graph meta tags?
Much like how meta tags can be used to describe your content to search engines, Open Graph Meta tags can be used to describe your content to social media channels and to augment and enhance your content in more places, such as rich snippets.
<meta property="og:title" content="A guide to Open Graph meta tags" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://ogimage.info/og.png" />
<meta property="og:url" content="https://ogimage.info/guides/open-graph-meta-tags" />What are Twitter cards?
When you share a link on Twitter a thumbnail preview image usually appears in a card. There are four kinds of Twitter card, each suited to particular media types, find out more here.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A guide to Open Graph meta tags" />
<meta name="twitter:description" content="Open Graph meta tags are used to specify how a page should be represented on social media. Learn how to leverage them to make your content stand out and increase engagement with the content you share." />
<meta name="twitter:image" content="https://imgsrc.io/og.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />
ZippyStarter