Generate SEO meta tags, Open Graph properties and Twitter Card markup from one form. Includes canonical link and live length checks for title and description.
Generate SEO, Open Graph and Twitter Card tags from one form. Fill in the fields once and get the complete <head> block. Title and description length are checked live against the limits search engines use before truncating.
Most of the meta tags you will find in old tutorials are ignored. The ones that still influence what users see are few:
<title> — the single most important on-page element. It becomes the clickable headline in search results and the browser tab label.<meta name="description"> — not a ranking factor, but it usually becomes the snippet under the title, so it directly affects click-through rate.<link rel="canonical"> — tells search engines which URL is the authoritative version when the same content is reachable through several addresses.Notably absent is <meta name="keywords">. Google confirmed it stopped using the tag for ranking in 2009 after years of abuse. It is included here only because a handful of internal search systems still read it.
Search engines truncate titles and descriptions to fit a fixed pixel width, so a title of narrow characters fits more text than one full of capitals. Character counts are a practical approximation: around 60 characters for a title and 160 for a description keep you inside the desktop limit most of the time. Mobile results are narrower still.
Being over the limit is not an error. The description is a snippet, not a contract, and search engines routinely rewrite it anyway when a different passage matches the query better. Front-load the important words so the meaning survives truncation.
Open Graph originated at Facebook but is now the de-facto standard read by LinkedIn, Slack, Discord, WhatsApp, iMessage and most other platforms. Four properties do nearly all the work: og:title, og:description, og:url and og:image.
Twitter's parser falls back to Open Graph when its own tags are missing, so a full set of twitter:* properties is only needed when you want a different title, description or image on that one platform. The tag worth setting explicitly is twitter:card, which chooses between the large hero image layout and the compact thumbnail.
This is where most implementations fail. Use an absolute URL — relative paths break in every crawler. Aim for 1200 by 630 pixels, the 1.91:1 ratio that fills the large card without cropping. Keep the file under about 1 MB, use JPEG or PNG, and make sure the URL is publicly reachable without authentication, cookies or a redirect chain. Any text on the image should be large, because the card is often displayed at a fraction of its natural size.
Every major platform caches the preview aggressively, often for days. After updating your tags the old card will keep appearing until the cache expires or you force a refresh through the platform's own debugging tool. Facebook, LinkedIn and Twitter each provide one. If the preview still looks wrong after a refresh, check that the crawler can actually reach the page: a login wall, a robots.txt block or geo-restricted content all produce an empty card.