hyperank.ai

Free tool

Open Graph Generator

Write the Open Graph tags, preview the card, copy the markup.

How it works

What is the Open Graph Generator?

The Open Graph Generator is a free tool that writes the meta tags a page needs for social share previews. From your title, description, URL, image and type, it builds the <title>, meta description, og: and twitter: tags, shows how the Facebook and X cards will look, and gives you the block to copy into your <head>.

How to use the Open Graph Generator

  1. Fill in the Title and Description you want the shared card to show.
  2. Enter the page's Canonical URL, and an Image URL if you have one. Use the full https:// address of an image around 1200x630.
  3. Add a Site name if you want one, and pick a Type: website, article, product or profile.
  4. Press Generate Open Graph tags, check the Facebook and Twitter previews, then press Copy Code and paste the block into your page's <head>.

What does the Open Graph generator create?

One block of tags for one page: a <title>, a meta description, og:title, og:description, og:url and og:type, plus og:image and og:site_name when you fill those fields. It adds twitter:card, twitter:title, twitter:description and, with an image, twitter:image.

Blank optional fields are left out rather than written as empty tags. twitter:card is set to summary_large_image when you give an image and summary when you do not, because the wide card is built around an image. Before you publish, open the Image URL in a browser to confirm it loads.

Where do Open Graph meta tags go?

Inside the page's <head>, in the HTML your server sends. Share crawlers read that HTML and generally do not run JavaScript, so tags added by client-side code after the page loads are not seen.

If your site has a metadata setting, use it instead of pasting raw tags: an SEO plugin in WordPress, or the metadata export in Next.js. The values then stay tied to the page and change when it does.

Which og:type should you use?

website suits most pages, and it is what a page is treated as when no type is declared. Use article for a dated post with an author, product for a page selling one item and profile for a page about one person.

The type decides which extra properties apply, such as article:published_time for articles. It is not a ranking signal, and website on a blog post breaks nothing.

Questions

What are OG meta tags?
OG meta tags are Open Graph <meta> tags in a page's <head> that set the title, description, image and URL shown when the page is shared. Facebook, LinkedIn, WhatsApp, Slack and X all read them to build the link preview.
How do I add Open Graph meta tags to my website?
Add Open Graph meta tags by pasting the generated block inside <head> on each page, or by entering the same values in your CMS or SEO plugin. Each page needs its own values, since a shared link shows the tags of the exact URL that was shared.
How do I add an Open Graph image in Next.js?
In the Next.js App Router, set openGraph.images in a page's metadata export, or put an opengraph-image.png file in the route folder. Next.js then writes the og:image tag for you, as an absolute URL once metadataBase is set.
Is og:title the same as the meta title?
No, og:title and the <title> tag are separate and can differ. The <title> is written for a search result, while og:title is what a shared card shows. This generator fills both with the same text as a starting point.
What values can og:type have?
The Open Graph protocol defines website, article, profile and book, plus music. and video. types. This generator offers website, article, product and profile, which cover most sites.
Do I need og:image:width and og:image:height?
No, og:image:width and og:image:height are optional. Declaring them lets a platform lay out the card before it has downloaded the image, which helps the first share of a new URL show its picture.

Technical SEO Tools

More in Technical SEO Tools

Opengraph Viewer

Paste a URL and see the card it produces when someone shares it — title, description, image.

View Opengraph

Robots.txt Checker

Fetch any site's robots.txt and test one URL against it: allowed, or blocked by which rule.

View robots.txt

Noindex Checker

Whether a page is set to noindex, checking the header and the meta tag both.

Check noindex

Ready when you are

Before your next buyer asks AI about you, ask AI about yourself

One check, four engines, about twenty seconds. We show you the answers before we ask for anything.

Check your brand freeAll free tools