Open Graph for Lazy Developers

Published Feb 19, 2024 - 2 min read

Open Graph is a protocol that allows you to control how your website appears when shared on social media through html meta tags. This guide will list down the necessary meta tags, what images to use, and how to test your website’s Open Graph data.

Meta Tags

The following meta tags are “required”, meaning you should always include them in your public website.

og:title - The title of your website.
og:type - The type of your website, e.g. website, article, video.
og:image - The image that will be displayed when your website is shared.
og:url - The URL of your website.

Here’s an example of how to include these meta tags in your website’s <head> section:

html

<head>
  <meta property="og:title" content="My Website" />
  <meta property="og:type" content="website" />
  <meta property="og:image" content="https://example.com/image.jpg" />
  <meta property="og:url" content="https://example.com" />
</head>

You can also include the following optional meta tags:

og:description - A social media optimized description of your website.
og:site_name - The name of your website.
og:locale - The locale of your website, e.g. en_US.

Image Requirements

These requirements come from the Facebook Sharing Best Practices as of February 2024.

Image should be at least 1080px in width, and 600px in height.
Image should be in 1.91:1 aspect ratio.

But, in practice, you should aim for a 1200x630px image, following popular sites’ approach.

You should also include an og:image:witdh and og:image:height meta tags to specify the image’s dimensions. This makes the image load faster on social media platforms.

html

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Testing

You can test your website’s Open Graph data using the Facebook Sharing Debugger. Just enter your website’s URL and click “Debug”. If there are any issues, the tool will tell you what’s wrong.

FAQ

What if I don’t have a featured image?

You can use a default image for your website. This can be your website’s logo, or a generic image that represents your website.

Do I need a open graph at all?

If you want your website to look good when shared on social media and messaging apps, then yes, you should include Open Graph meta tags.

Do I need Twitter/X meta tags?

No, unless you want to optimize how your website looks when shared on X. X has its own set of meta tags, but they will fall back to Open Graph meta tags if they are not present.