Open Graph Generator

What is an Open Graph generator?

An Open Graph generator is a free online tool that creates the meta tags social networks use to build link previews. When someone shares your page on Facebook, LinkedIn, WhatsApp or Slack, those platforms read your Open Graph tags to decide which title, description and image to show. This tool writes the tags for you and shows a live preview, so you can check how your link will look before you publish.

You fill in a few fields, such as the title, description, page URL and image URL, and the generator produces clean HTML that you can paste into the head of your page. It also creates matching Twitter Card tags for X. Everything happens in your browser, and nothing you type is uploaded or saved.

Features of this free OG tag generator

• Live link previews: See a Facebook and LinkedIn style card and an X card update as you type.
• All the key tags: Create og:title, og:description, og:type, og:url, og:image, og:site_name and og:locale in one go.
• Twitter Card tags: Choose summary or summary_large_image and add your X handle.
• Image details: Add alt text and the image width and height, so platforms know the image size before they load it.
• Safe code: Special characters are escaped, so your tags never break the page.
• One-click copy: Copy the finished HTML and paste it straight into the head of your page.

What are Open Graph tags?

Open Graph is a protocol created by Facebook in 2010 that lets any web page become a rich object when it is shared. In practice, it is a set of meta tags with a property attribute, such as og:title and og:image, placed in the head of the page.

Today many platforms read Open Graph tags, including Facebook, LinkedIn, WhatsApp, Telegram, Slack and Discord. X uses its own Twitter Card tags first and falls back to Open Graph tags when they are missing. Without these tags, a platform has to guess a title and an image from your page, and the result is often a plain link with no picture.

Open Graph tags this tool generates

• og:title: The headline shown on the preview card.
• og:description: One or two sentences that explain the page.
• og:type: The kind of content, such as website for most pages and article for blog posts.
• og:url: The main address of the page, which helps platforms count shares for one URL.
• og:image: The picture shown on the card, plus optional alt text, width and height.
• og:site_name: The name of your website or brand, shown above or below the title.
• og:locale: The language and region of the content, for example en_US.
• twitter:card and related tags: The card type, title, description, image, site handle and author handle for X.

Best Open Graph image size

The most widely used Open Graph image size is 1200 by 630 pixels, which has an aspect ratio of about 1.91 to 1. It fills the large preview card on Facebook, LinkedIn and X without being cropped. Use at least 600 by 315 pixels, and avoid very small images, because many platforms then show only a tiny thumbnail instead of a large card.

Use JPG or PNG, use a full https address for the image URL, and keep the file size small, ideally a few hundred kilobytes, so the preview loads quickly. Place important text and faces near the center, because some apps crop the edges. If your image is the wrong size, you can fix it with our Image Resizer, which has an Open Graph preset.

Open Graph vs Twitter Card tags

If you only add Open Graph tags, X will still use them. Adding the twitter:card tag is recommended, because it lets you choose how the card looks. There are two common card types:

• summary: A small square image next to the title and description.
• summary_large_image: A large image above the title and description. This is the best choice for most pages.

How to add Open Graph tags to your website

• Plain HTML: Paste the generated tags inside the head element of your page, before the closing head tag.
• WordPress: Most SEO plugins have a social tab where you can set the title, description and image. You can also paste the code into your theme header.
• Next.js and React frameworks: Use the openGraph field of the metadata feature, for example in the Next.js App Router, and copy the values from the generator.
• Website builders: Wix, Shopify, Squarespace and similar platforms have a social sharing section where you can upload an image and add a title and description.

How to test and refresh your link preview

After you add the tags, test your page with the Facebook Sharing Debugger and the LinkedIn Post Inspector. Platforms keep a saved copy of the preview, so changes may not show up straight away. These tools let you fetch the page again and refresh the saved preview. If a shared link still shows an old image, refresh the preview there first and then share the link again.

Do Open Graph tags help SEO?

Open Graph tags are not a direct ranking factor in Google. Their value is indirect. A clear title and an attractive image make people more likely to click and share your link, which can bring more visitors and more people who talk about and link to your content. They are also quick to add and make your pages look professional everywhere they are shared.

Common Open Graph mistakes

• A relative image URL: Always use the full address of the image, starting with https://. A path such as /images/share.jpg will not work.
• An image that is too small: Small images produce a tiny thumbnail instead of a large card.
• Missing og:url: Without it, shares of the same page with different URLs may be counted separately.
• The same title and description on every page: Each page should have its own tags, so every shared link looks different and relevant.
• Forgetting to refresh the saved preview: Platforms keep the old preview until you refresh it in their debugging tool.
• An image that cannot be fetched: An image behind a login, or blocked in robots.txt, cannot be loaded by the platform.