Generate Open Graph and Twitter card tags

Fill in the fields, copy the head tags, and check an estimated Google result and social card. Nothing is fetched.

This page opens on the social card. Fill in the title, description, page address, site name and image address, then choose whether the page is a website or an article and whether the Twitter card is a large or a small image. The tags appear in a block you can copy: og:type, og:title, og:description, og:url, og:site_name and og:image, followed by twitter:card, title, description and image. Values are HTML-escaped, so quotes and ampersands in a title cannot break the tag. The card above the tags is a rough layout, with a plain box in place of the picture: the image address is written into the tags but is not requested, and the page cannot tell you whether the image exists or how a site will crop it. Each site draws its own card, so check the final link in the real app. The ordinary title, description and robots tags are in the same block.

How it works

  1. Fill in the title, description and address
  2. Choose type, robots and card options
  3. Copy the tags into your page head

What the tag block contains

The block starts with the title tag, the meta description, an optional canonical link and a robots tag that joins your two choices, such as index, follow or noindex, nofollow. An optional author tag follows. Then come the Open Graph tags that social sites read: og:type (website or article), og:title, og:description, og:url, og:site_name and og:image. The last group is for Twitter cards: twitter:card with Large image or Small image, plus title, description and image. A tag is left out when its field is empty, with three exceptions that are always written: robots, og:type and twitter:card, because they come from your choices. The Open Graph and Twitter titles reuse the page title and description, so write them once.

Escaping

Every value is escaped before it goes into a tag. An ampersand becomes &, angle brackets become < and >, a double quote becomes " and a single quote becomes '. That is why a title such as Tom & "Jerry" cannot close the attribute early or inject markup. Line breaks and runs of spaces inside a field are folded into one space, because a tag value is a single line. Each field is cut at 2,000 characters. Addresses are not rewritten: a value that does not start with http:// or https:// is still written, but the field shows a note, because Open Graph and canonical tags expect full web addresses.

The previews are estimates

The Google-style card measures your title with a width table for each character, at the 20 px size of a desktop result, and cuts it near 580 px with an ellipsis. Wide letters such as W use more room than i, so the cut falls at different lengths. The description is cut at a word near 160 characters. The counters under the fields say Long, Short or Fits using the same numbers: a title under 30 characters is called short, and a description under 70 is short. These are rules of thumb. Google often writes its own title and snippet from the page, and phones show a different width, so the card is a rough guide and not a promise. The social card is a rough layout only: every site draws its own.

What is not done

No page is fetched, so nothing is read from your live site and no other site is contacted. The image address is written into the tags but the picture is never requested; the card shows the address you typed in a plain box. The page does not check that the image exists, that its size suits a social site or that the canonical address is reachable. Tags do not decide what search or social sites show, and robots tags are requests, not locks. Your fields are kept in this tab only: they are not stored and not sent anywhere. Only your choices, such as noindex, are remembered in this browser.

Frequently asked questions

What size should the image be?

This page does not check it, because the picture is never loaded. Many sites show a wide image best at about 1200 by 630 pixels. Check the real link in the app that will show it.

What is the difference between website and article?

It sets og:type. Use website for a home page or tool, and article for a post with a date and an author. The value only tells a site how you classify the page.

Why is there a Twitter group when Open Graph exists?

Twitter cards read their own twitter: tags first and fall back to Open Graph on many sites. Writing both gives you a choice of a large or a small image card.

Why is my title cut in the preview when it is under 60 characters?

The cut depends on pixel width, not on the count. Wide letters such as W and M take more room than i or l, so 45 capital letters can be cut while 60 letters like i and l still fit.

Do I need both Open Graph and Twitter tags?

Twitter cards fall back to Open Graph tags on many sites, but writing both is harmless and this block does it. The Twitter group repeats the title, description and image, and adds the card type, Large image or Small image.

Is the image from my address loaded?

No. The address goes into the og:image and twitter:image tags and into the box in the card preview as text. The picture is never requested, so you cannot see in this page whether it loads or how it is cropped.

What does noindex do?

It asks search engines not to list the page. It is a request, and a page that is blocked from crawling in robots.txt may never be seen, so the tag may never be read. Use it on pages such as a thank-you page, not as a lock.

What is the canonical field for?

It names the preferred address when the same content opens at several addresses, such as with and without tracking parameters. Leave it empty and the tag is left out, and the search engine chooses.