SEOAnalytics Lab

Open Graph Tags Explained: Control How Your Links Look When Shared

By SEOAnalytics Lab · Updated · 5 min read

Have you ever shared a link and seen a plain web address, the wrong picture or a title you never chose? That preview is controlled by small pieces of code called Open Graph tags. When they are set up well, your link appears as a clean card with a title, a short description and an image.

In this guide you will learn what Open Graph tags are, which ones matter, the right image size, how to add them to your page and how to fix a preview that will not update.

What are Open Graph tags?

Open Graph is a set of meta tags that tell social platforms how to show your page when someone shares a link. The system was created by Facebook, and it is now read by many other services, including LinkedIn, WhatsApp, Slack, Telegram and Discord.

The tags sit in the head of your page, so visitors never see them. Platforms read them when a link is pasted and use them to build the preview card.

Why Open Graph tags matter

A link with a good preview looks trustworthy and takes more space in a feed, so more people notice it and click. A link with no tags forces the platform to guess, and it often picks a wrong image, a cut title or nothing at all.

Open Graph tags are not a direct Google ranking factor, but the extra clicks and shares they bring can send more visitors to your page.

The Open Graph tags you need

  • og:title. The title shown on the card. Keep it clear and under about 60 characters so it is not cut off.
  • og:description. One or two short sentences about the page. Around 100 to 150 characters works well.
  • og:image. The picture shown on the card. Use a full web address, not a relative path.
  • og:url. The main address of the page. It should match your canonical URL, so shares and likes count for one address.
  • og:type. Use website for most pages and article for blog posts.
  • og:site_name. The name of your website, shown on some platforms above or below the title.

The best Open Graph image size

The most common recommendation is an image of 1200 by 630 pixels, a ratio of about 1.91 to 1. This size fills the card on Facebook, LinkedIn and most other platforms without being badly cropped. Most platforms ask for at least 600 by 315 pixels, and rules change from time to time, so check the current guide for each one.

Keep important text and faces in the centre of the image, because some apps crop the edges. Use JPG or PNG, and avoid tiny text that cannot be read on a phone.

How to add Open Graph tags step by step

  • Step 1: Write your title and description. Use the same message as your page, written for a person who sees it in a feed.
  • Step 2: Prepare the image. Create a 1200 by 630 pixel image and upload it to your website, so it has its own web address.
  • Step 3: Generate the tags. Enter your details in an Open Graph generator and copy the result.
  • Step 4: Paste into the head. Add the tags inside the head section of the page. Each page needs its own set.
  • Step 5: Test the preview. Paste the link into a debugging tool or send it to yourself in a chat app to see the card.

Open Graph tags and Twitter cards

X, formerly Twitter, has its own twitter:card tags. If they are missing, it can fall back to your Open Graph tags for the title, description and image. The one tag worth adding is twitter:card with the value summary_large_image, which asks for a large picture. Our Twitter Card Generator can create these tags for you.

How to fix a preview that will not update

  • The old preview is cached. Platforms save previews for a while. After you change your tags, use the platform's debugging tool, such as the Facebook Sharing Debugger or the LinkedIn Post Inspector, to fetch the page again.
  • The image does not show. Check that the image address is a full link, opens in a browser without a login and is not blocked by robots.txt.
  • The title or text is wrong. Make sure the page has only one set of Open Graph tags. Duplicates can confuse the platform.
  • The tags are added by a script. Platforms read the page source and many do not run scripts. Place the tags in the HTML your server sends.

Common Open Graph mistakes

  • Relative image paths. An address such as /image.png does not work. Use the full address, starting with https.
  • Images that are too small. Small images may be shown as a tiny thumbnail or skipped. Use 1200 by 630 pixels.
  • The same tags on every page. Each page should have its own title, description and, ideally, its own image.
  • A missing og:url. Without it, the same page can be counted under several addresses.

Create your Open Graph tags

Our free Open Graph generator builds the tags from a few fields, so you can copy and paste them straight into your page. It is free and needs no signup.

Frequently asked questions

What are Open Graph tags used for?

They control the title, description and image shown when your link is shared on social media and messaging apps.

Where do I put Open Graph tags?

Inside the head section of the page. Each page should have its own set of tags.

Do Open Graph tags affect SEO?

Not directly. They do not raise your rankings by themselves, but a better preview can bring more clicks and shares.

Why is my old image still showing?

Platforms cache previews. Fetch the page again in a debugging tool, such as the Facebook Sharing Debugger.

More guides