Meta Tag Generator
Build SEO meta tags and Open Graph cards with a live Google / Twitter / Facebook preview.
<title>FreeApexGears — Free Browser Games & Dev Tools</title> <meta name="description" content="Play free arcade, puzzle, and card games — plus 40+ no-signup developer and design tools. Runs in your browser." /> <meta name="keywords" content="free games, browser games, dev tools" /> <link rel="canonical" href="https://freeapexgears.com" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://freeapexgears.com" /> <meta property="og:title" content="FreeApexGears — Free Browser Games & Dev Tools" /> <meta property="og:description" content="Play free arcade, puzzle, and card games — plus 40+ no-signup developer and design tools. Runs in your browser." /> <meta property="og:image" content="https://freeapexgears.com/opengraph-image" /> <meta property="og:site_name" content="FreeApexGears" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://freeapexgears.com" /> <meta name="twitter:title" content="FreeApexGears — Free Browser Games & Dev Tools" /> <meta name="twitter:description" content="Play free arcade, puzzle, and card games — plus 40+ no-signup developer and design tools. Runs in your browser." /> <meta name="twitter:image" content="https://freeapexgears.com/opengraph-image" /> <meta name="twitter:site" content="@freeapexgears" />
About the Meta Tag / Open Graph Generator
The Meta Tag / Open Graph Generator builds the head tags that decide how a page looks in Google results and when someone pastes your link into X, Facebook, or Slack. Writing them by hand means remembering exact property names, the og: and twitter: prefixes, and which tags repeat the same value. Miss one and your shared link shows a bare URL with no title or image.
You fill in a title, description, canonical URL, image URL, site name, Twitter handle, and keywords, then pick an OG type from website, article, product, video.other, or music.song. As you type, the tool rebuilds a full head block: the title tag, meta description, canonical link, and the Open Graph and Twitter Card sets. A live Google result and Twitter/X card render alongside so you see truncation and the image crop first.
It builds the tags in the page as you type, with no account required and no server round trip. Nothing you type is sent to a server; the tags are assembled in the page from your inputs, and the Copy tags button writes them to your clipboard. There is no upload step and no saved history, so you can paste real internal URLs and unreleased titles.
How to use the Meta Tag / Open Graph Generator
- 1Type your page title into the Title field and watch the character counter against the 60-character marker.
- 2Write your summary in the Description box, aiming to land under the 160-character marker beside the label.
- 3Fill in the Canonical URL, Image URL, Site name, and Twitter handle fields for your page.
- 4Pick the matching value in the OG type dropdown and add comma-separated terms in the Keywords field if you want them.
- 5Check the Google preview and Twitter / X preview panels to confirm the title, description, and image crop look right.
- 6Click Copy tags to put the whole head block on your clipboard, then paste it inside the <head> of your page.
What you can use it for
Fixing a bare shared link
A blog post shows up as a plain URL in Slack because it has no og:image or og:title. Enter the title, description, and a wide image URL, copy the tags, and the next share renders a proper card.
Shipping a product page
You are launching a store page and want it to preview as a product, not a generic website. Set the OG type dropdown to product, add the image URL, and paste the generated og: tags so social scrapers label it correctly.
Checking title truncation
Google cuts long titles. Before publishing, type your headline and read the Google preview, which clips at 60 characters. If the important words vanish past the cut, shorten the title until the preview reads clean.
Why the same value repeats across three tags
Search engines and social platforms read different tags for the same information. Google reads the <title> tag and meta description, Open Graph scrapers read og:title and og:description, and X reads twitter:title and twitter:description. There is no shared field, so this tool copies your title and description into all three sets. Each consumer trusts only tags in its own namespace, and leaving one out makes that platform guess from page content.
The image tags carry an implied shape. The Twitter preview renders the image at a 1.91:1 aspect ratio, the same wide crop summary_large_image and og:image expect. Point Image URL at a square or tall image and the preview crops it, as the live card will. Sizing your image near 1200 by 630 pixels keeps faces and text inside the frame.
Frequently asked questions
Does this send my titles or URLs to a server?
No. The tags are built in your browser from the values you type, using nothing but the page itself. There is no upload, no API call, and no stored history, and the Copy tags button uses your clipboard locally. Staging URLs and unpublished titles never leave your device.
Why does the Twitter card always say summary_large_image?
The tool writes twitter:card as summary_large_image every time; it is not adjustable. That card type shows the wide image preview most links use. If you need a different card, such as a plain summary, edit that one line by hand after copying the block.
The Google preview cuts my text but the tags look longer. Why?
The Google preview clips the title at 60 characters and the description at 160 so you see how a result will look, but the generated meta tags keep your full text. The counters next to the labels are guides, not hard limits, so nothing stops you typing past them.
What happens to fields I leave blank?
Empty optional fields are dropped from the output. Clear the Image URL and no og:image or twitter:image line is written. The same goes for keywords, site name, and the Twitter handle. Title, description, canonical URL, OG type, and the twitter:card line are always included.
Are special characters in my text handled safely?
Yes. Ampersands, angle brackets, and double quotes in your values are escaped to HTML entities before being placed in the tags. That keeps a title like Cats & Dogs, or a description with quotes, from breaking the surrounding markup when you paste the block in.