What Open Graph tags do

Open Graph tags are lines of code that tell social media platforms, messaging apps, and search engines what image, headline, and description to display when someone shares your link. Without them, the platform guesses — and usually guesses wrong. With them, you control exactly what appears in that preview box.

When you paste a URL into Facebook, Twitter, LinkedIn, or Slack, the platform reads these tags from the page's HTML and pulls the image, title, and summary you specified. If the tags are missing, the platform scrapes whatever text and images it finds, which might be your navigation menu, a logo, or the first sentence of an article — rarely what you intended.

Open Graph tags live in the <head> section of your HTML, invisible to visitors but visible to any bot that reads your page. They were created by Facebook in 2010 and have become the standard that most platforms now follow.

Key Takeaways

  • Open Graph tags control the image, title, and description that appear when a link is shared on social media or messaging apps.
  • The four most important tags are og:title, og:description, og:image, and og:type, and they go in the page's HTML head section.
  • The og:image tag requires a full URL (starting with http or https), not a relative path, or the image will not load.
  • You can test whether your tags are working by pasting the URL into Facebook's Sharing Debugger or a similar tool, which shows exactly what will display.
  • Different page types — articles, products, videos — may need different og:type values to display correctly on each platform.

The four tags you need most

Most pages need only four Open Graph tags to work well. The first is og:title, which sets the headline that appears in the preview. This should be the same as your page title or close to it — usually 50 to 60 characters so it does not get cut off on mobile.

The second is og:description, the text that appears below the headline. Keep it between 150 and 160 characters. This is often the same as your page's meta description, but you can write it differently if the social preview needs different wording.

The third is og:image, the picture that displays in the preview box. This must be a full URL — starting with http:// or https:// — not a relative path like /images/photo.jpg. The image should be at least 1200 pixels wide and 630 pixels tall, though 1200 × 630 is the standard size. Smaller images may display blurry or get cropped.

The fourth is og:type, which tells the platform what kind of content this is. The most common values are website (for general pages), article (for blog posts and news), and product (for items for sale). Most pages can use website and work fine.

How to write Open Graph tags in HTML

Open Graph tags are written as meta tags in the HTML head section. Here is what the four essential tags look like:

<meta property="og:title" content="Your Page Title Here"> <meta property="og:description" content="A brief summary of what this page is about."> <meta property="og:image" content="https://yoursite.com/images/preview-image.jpg"> <meta property="og:type" content="website">

The property attribute always starts with og: (for Open Graph). The content attribute holds the actual text or URL. Paste these into your page's HTML head section, between the opening <head> tag and the closing </head> tag, usually near other meta tags like the description and viewport tags.

If you are using a website builder like WordPress, Wix, or Squarespace, you usually do not need to write the HTML yourself. These platforms have fields in the page settings where you can enter the title, description, and image, and they generate the tags automatically. Look for a section called "Social sharing", "SEO", or "Open Graph".

Why og:image is the hardest part

The og:image tag causes more problems than the others because it requires a full URL, not a relative path. If you write /images/photo.jpg, the platform will not find it. You must write https://yoursite.com/images/photo.jpg with the full domain name.

The image also needs to be hosted on a server that the platform can reach. If your image is stored only locally on your computer, or behind a login, the platform cannot read it and the preview will show no image at all.

Test the image size before you publish. Platforms crop images to fit their preview boxes, and a poorly sized image may show only a corner of what you intended. A 1200 × 630 pixel image displays correctly on nearly all platforms. If you use a different size, test it in the platform's sharing tool before you go live.

Testing your tags with a sharing debugger

After you add Open Graph tags to a page, test them before you share the link publicly. The easiest way is to use Facebook's Sharing Debugger, a free tool at facebook.com/developers/tools/debug/sharing/. Paste your page URL into the box and click Debug. The tool will show you exactly what image, title, and description will appear when someone shares the link on Facebook.

The debugger also tells you if there are problems — a missing image, a broken URL, or a tag that is formatted incorrectly. If you see an error, fix the tag in your HTML and click the Scrape Again button to refresh.

Other platforms have their own testing tools. Twitter has the Card Validator at cards-dev.twitter.com/validator. LinkedIn has a Post Inspector at linkedin.com/feed/inspector/. These tools work the same way: paste the URL, see what will display, and fix any problems before sharing.

When og:type matters

For most websites, setting og:type to website is fine and covers everything. But if your page is a blog post, news article, or product, using a more specific type can improve how the preview displays.

Use og:type="article" for blog posts and news stories. This type lets you add extra tags like og:published_time (the date the article was published) and og:author (the writer's name). Some platforms display these details in the preview, which can make the link look more credible.

Use og:type="product" for items you are selling. This type works with tags like og:price_currency and og:price_amount, though not all platforms display pricing in the preview.

For most other pages — your home page, an about page, a contact page — og:type="website" is the right choice and requires no extra tags.

Common mistakes and how to fix them

The most common mistake is forgetting the full URL in the og:image tag. If your preview shows no image, check that the image URL starts with http:// or https:// and includes your full domain name. Test the URL in your browser to make sure it loads.

The second mistake is using special characters in the og:title or og:description without escaping them. If your title contains a quotation mark or an ampersand, wrap the content in quotes and use HTML entities: use & instead of &, and " instead of a quotation mark. Most website builders handle this automatically.

The third mistake is not updating the tags when you update the page. If you change your page title or image, update the Open Graph tags to match. Platforms cache the old preview for a while, but the tags should reflect your current content.

The fourth mistake is using an image that is too small or the wrong shape. Test your image in the platform's sharing tool before you publish. A 1200 × 630 pixel image works on all platforms.

Frequently Asked Questions

Do I need Open Graph tags on every page?

You should add them to any page you might want someone to share — blog posts, product pages, and your home page. For internal pages that are rarely shared, like a privacy policy or terms of service, they are less important. Most website builders let you set default tags for the whole site, so pages without custom tags will still display something reasonable.

What if I do not have an image to use for og:image?

You can use your site logo or a generic branded image. The image does not have to be unique to each page, though a custom image for each page usually gets more clicks when the link is shared. If you have no image at all, leave the og:image tag out and the platform will show no image in the preview.

Will changing my Open Graph tags hurt my search engine ranking?

No. Open Graph tags are for social media and messaging apps, not for search engines. Google ignores them. Changing your tags will not affect how your page ranks in Google search results.

Can I use the same og:image for every page on my site?

Yes, but it is not ideal. A custom image for each page usually gets more clicks when shared because it looks more relevant to the content. If you use the same image everywhere, at least make sure it is a high-quality, branded image that represents your site well.

How long does it take for platforms to show my new Open Graph tags?

Most platforms cache the preview for a few hours to a few days. If you change a tag and want to see the update when ready, use the platform's sharing debugger tool — it will scrape the page fresh and show you the new preview right away. The cached version will update on its own within a day or two.