Roftr Labs

SEO

Meta and social tag generator

Build the title, description, canonical, Open Graph and X card tags for a page, with a preview of how it will look in search results and share cards.

Runs entirely in your browser. Nothing you paste is uploaded.

Your page

This runs entirely in your browser. Nothing you type is sent to us or to anyone else.

Enter at least a page title to generate the tags.

How to use it

  1. Fill in the formEnter the title, description, canonical and image for the page you are writing tags for. Nothing is sent anywhere: the file is built in your browser from what you type.
  2. Give the image an absolute URLSocial platforms fetch it from their own servers, so a relative path resolves against nothing. The tool does not load the image to preview it — fetching your URL would send a request to a third party from a tool that promises not to.
  3. Read the warnings about length and duplicationA title too long for a card, or a description that repeats it word for word, is flagged above the output. Neither breaks anything; both waste the only two lines you get.
  4. Do not expect paddingThere is no keywords tag and no revisit-after, because no search engine has used either for many years, and X tags that simply duplicate Open Graph are left out too.
  5. Read the warnings before you copy anythingWarnings appear ABOVE the generated code on purpose. A caution printed underneath output somebody has already copied has not been communicated, and the mistakes this tool warns about are the expensive kind.
  6. Copy or download the fileEach output block has its own Copy and Download button, so you can take one file without the other. Paste it where the block says it belongs.

About this tool

Fill in what your page is about and this builds the head markup for it: the title and description search engines show, the canonical that names the real URL, the Open Graph tags Facebook, LinkedIn, WhatsApp and Slack read, and the X card tags. The preview shows roughly how it will look in a search result and in a share card, which answers the question a character counter cannot: will my title survive?

It runs entirely in your browser — nothing you type is sent anywhere — and it is the counterpart to our title/heading analyser and social preview checker. Same knowledge, pointed the other way: those tools know a relative og:image is the commonest reason a share card has no picture, so this one refuses to hand you one quietly.

Understanding the result

The generated block goes inside your <head>. Values are escaped, so a quotation mark in your title cannot break the markup.

Warnings appear above the code, not below it — a caveat printed under something you have already copied has not been communicated. You always get both: a 200-character description generates its tags AND the note that search engines will cut it.

The X section is short on purpose. X falls back to Open Graph for the title, description and image, so duplicating them as twitter:* tags would give you two places to update and one to forget.

Example

Input

Title: "Nginx Configuration Guide" · image: /og/nginx.png

Output

<title>Nginx Configuration Guide</title>
<meta property="og:title" content="Nginx Configuration Guide">
<meta name="twitter:card" content="summary_large_image">

CRITICAL: the preview image URL is not absolute — most platforms will drop it.

Limitations

  • The preview is an approximation. Google truncates on pixel width rather than character count, and it rewrites descriptions it judges unhelpful — a fact no generator can work around.
  • The preview does not load your image. Fetching a URL you typed would send a request to a third party from your browser, which this tool promises not to do.
  • There is no keywords field. The meta keywords tag has been ignored by every major search engine for over a decade, and offering it would imply otherwise.
  • Tags are generated, not installed. Where they go depends on your CMS or framework.

Questions

Why does the output have no meta keywords tag?

Because it does nothing. Google confirmed it ignores the keywords meta tag in 2009 and the other major engines followed; it survives in tutorials, not in ranking systems. Generating it would pad the output and teach you something false.

Why so few twitter: tags?

X reads twitter:card first and falls back to your Open Graph tags for everything else — title, description, image. So the only tags worth writing separately are the card type and your handle. Adding twitter:title next to an identical og:title just means updating two things forever.

My og:image is a path like /og/image.png. Is that a problem?

Yes, and it is the single commonest reason a share card shows no picture. Open Graph requires a fully-qualified URL and most platforms drop a relative one rather than resolving it. That is why the tool marks it critical instead of quietly fixing it — we cannot know your production domain.

Should every page have a canonical?

It is not required, and plenty of well-ranking pages have none. It matters once the same content is reachable at more than one address — with and without www, with tracking parameters, with and without a trailing slash — because then something has to decide which is the real one, and it is better that you decide than the engine.

Last updated 2026-08-16.

Related tools