English

Meta Tag Generator — Open Graph and X Cards

A generator for search and social sharing meta tags with link preview mock-ups

Runs in your browser · nothing is uploaded

Example values are filled in. Replace them with your page’s details.

Use the full address starting with https:// (or http://).

Full address of the image shown when the link is shared. The preview loads the image straight from that address.

With or without @. Leave empty to skip the tag.

Generated tags

12 tag lines generated, 2 things to check

  • Without an image, KakaoTalk and Facebook previews show no picture.
  • The large image card is selected but there is no image.
<title>Character Counter — Count Words and Characters</title>
<meta name="description" content="Paste your text to count characters with and without spaces, words and bytes instantly.">
<link rel="canonical" href="https://www.example.com/en/character-counter/">

<meta property="og:type" content="website">
<meta property="og:title" content="Character Counter — Count Words and Characters">
<meta property="og:description" content="Paste your text to count characters with and without spaces, words and bytes instantly.">
<meta property="og:url" content="https://www.example.com/en/character-counter/">
<meta property="og:site_name" content="Example Site">
<meta property="og:locale" content="en_US">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Character Counter — Count Words and Characters">
<meta name="twitter:description" content="Paste your text to count characters with and without spaces, words and bytes instantly.">

Paste them inside the <head> of your HTML.

Previews (mock-ups)

KakaoTalk link preview
No image

Character Counter — Count Words and Characters

Paste your text to count characters with and without spaces, words and bytes instantly.

example.com

Google search result

Example Site

https://www.example.com/en/character-counter/

Character Counter — Count Words and Characters

Paste your text to count characters with and without spaces, words and bytes instantly.

These are mock-ups of the real apps, so lengths and cut-off points can differ. Check Google title and description widths with the SERP preview tool. KakaoTalk may keep the preview of a link it has already seen for a while, so an old preview can appear after you change the tags.

Tag names follow the Open Graph protocol (ogp.me) and X (Twitter) Cards. KakaoTalk, Facebook, LinkedIn and Slack read og:title, og:description, og:image and og:url; X reads twitter:card and can fall back to the og: tags for the rest. Quotes, <, > and & in your text are escaped for HTML. Nothing you type is stored or sent.

What it is

This meta tag generator writes the head tags that control how a page looks in search results and when its link is shared. Messaging apps and social networks build their link cards from Open Graph tags, and X adds its own card tags. Fill in a short form and get HTML you can paste straight into the head of your page, with the quoting handled for you and mock-ups of a KakaoTalk link card and a Google result.

How to use

  1. Enter the title, description and page URL. Example values are filled in to start with.
  2. Add the full URL of the share image and a short description of it. Without an image, a warning reminds you that share cards will have no picture.
  3. Choose the site name, page type, language and X card type. The X handle is optional.
  4. Fix anything listed under the generated tags, such as relative URLs or an empty title.
  5. Copy the tags into the head of your page.
  6. Check the preview mock-ups for a rough idea of the result.

How it works

  • Tag names follow the Open Graph protocol (ogp.me): og:type, og:title, og:description, og:url, og:site_name, og:locale, og:image and og:image:alt, plus X Card tags: twitter:card, twitter:site, twitter:title, twitter:description and twitter:image.
  • The page URL is used for both the canonical link and og:url.
  • Quotes, <, > and & are escaped as HTML entities, line breaks and repeated spaces collapse to one space, and empty fields produce no tag.
  • X handles are accepted only as 1–15 letters, digits or underscores.
  • The previews are mock-ups; real apps use their own fonts and cut-off rules.

Examples

Input Generated tag
Title: Character Counter <title>Character Counter</title>, og:title, twitter:title
Description with “quotes” content="Description with &quot;quotes&quot;"
X handle: toolsnack <meta name="twitter:site" content="@toolsnack">
Image /og.png Warning: use a full https:// address

FAQ

Which tags do link previews use?

KakaoTalk, Facebook, LinkedIn and Slack read og:title, og:description, og:image and og:url. X reads twitter:card first and can fall back to the og: tags for the title, description and image.

Why is my image missing from the preview?

og:image must be a full address starting with https://. Relative paths such as /og.png are ignored by most crawlers, and the image must be publicly reachable.

I changed the tags but the old preview still shows.

Apps such as KakaoTalk may keep the preview of a link they have already seen for a while. It refreshes over time, and the platforms' developer tools can ask them to read the page again.

How long should the title and description be?

Google cuts snippets by width, not by character count. Use the SERP preview tool to see exactly where your title and description would be truncated.

Is my input stored?

No. The tags and previews are built in your browser. If you enter an image URL, your browser loads that image directly to show the preview.

Related tools

SERP Preview

A Google search result preview that measures title and description pixel width

Favicon Generator

Browser tool that builds favicon.ico, multi-size PNG icons, a manifest and HTML snippets

HTML Entity Encoder/Decoder

Encode and decode HTML entities for special and non-ASCII characters

Punycode Converter

A converter between Unicode domain names and their xn-- Punycode form

QR Code Generator

Create URL, Wi-Fi and contact QR codes and download them as PNG or SVG

Missing a tool?