11
3 Comments

An easy tip to increase engagement on social

Open Graph images increase engagement with your social content and lead to higher conversion rates.

What are they? They’re the image preview that Twitter and Facebook show for a link. They look like this.

Example Twitter card

Let’s talk about Open Graph images!

🤔 What are they?
👩‍💻 How do I use them?
📈 Why should I care?

What are they?

The Open Graph protocol “gives developers one thing to implement” – it’s an agreed upon standard to tell the world meta data about your site.

In practice, Open Graph images are the little “preview” pictures you see when sharing a link on social media. All I have to do is type a website and Twitter automatically takes care of the rest.

Try it for yourself. Open Twitter, compose a new tweet, and add a URL. After you hit the spacebar you should see a little preview come up if that website is set up correctly. For example, try my blog: masilotti.com.

How do I use them?

Open Graph images, or og:image, is a special meta tag added to the head section of your HTML page. (Replace the three dots with a URL.)

<head>
  <meta property=“og:image” content=“…” />
</head>

Pro tip: The URL can point to anywhere on the web. It isn’t limited to your site. So you can upload an image to imgur and use that URL directly. You don’t have to download and upload it to your site.

Why should I care?

Your audience is much more likely to notice and click a link with associated media.

Don’t believe me? Squint and scroll through your feed. The images will stand out compared to little blue links.

According to Buffer, tweets with images receive 18% more clicks than those without.

So if you’re trying to get more eyes on your content, or raise awareness, make sure you add an og:image. Also, don’t forget to set og:title and og:description. Facebook will use these to generate a more structured preview of your link.

For Twitter, you need specific tags. But you can use the same content.

<meta name=“twitter:card” content=“summary_large_image”>
<meta name=“twitter:title” content=“…”>
<meta name=“twitter:description” content=“…”>
<meta name=“twitter:image” content=“…”>

Pro tip: Make sure everything is working before you tweet with Twitter’s Card Validator.

Make Open Graph images

If you don’t consider yourself a designer you can use Mugshot Bot to generate your Open Graph images. This is a little tool I made that simplifies the entire process. All you have to do is type in your website and you get a beautifully designed image for free.


What’s stopping you from adding Open Graph tags to your website or blog?

If you need help send me a message or comment below and I can lend a hand!

  1. 3

    Did you know you don't even need the Twitter meta tags if you already have the OG attributes? And visa versa? Twitter, Facebook, Slack etc will happily use whatever is available if they can't find "their" tags.

    Another fun fact: did you know that the Twitter card validator, the Facebook sharing debugger and the LinkedIn post inspector are all outdated by 2 or more designs? You can't use them to make sure that your description fits, or check where your title is cut off.

    I found this out at the beginning of 2020 when I built the social media previews for Polypane. I wanted to make sure I captured exactly how each social generated their previews so I could make something that was pixel perfect. This took a lot of work to build and also a lot of work to keep up to date, but the end result is totally worth it. You never have to double check because the preview you see in Polypane is exactly correct.

    For example, here's Twitter and Facebook (both in Dark mode) for this post:

    This article as shared on Twitter and Facebook

    1. 1

      Honestly, it doesn't surprise me that those validators are out of date. I mean, the Twitter one looks like it hasn't been touched in 5 years!

      Awesome work on the custom ones you've built. Are they publicly available by any chance?

      1. 1

        For now it's "exclusive" to Polypane, but you can get a 14 day free trial with just an email and your first name :)

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments