How meta tags and Open Graph work
Meta tags live in the <head> of your page and describe it to the software that reads it — browsers, search-engine crawlers and social-network scrapers. The two that matter most for SEO are the title and the meta description: together they form the clickable headline and summary that appear in a search result, so they are your pitch to someone deciding whether to visit. A canonical link tells search engines which URL is the authoritative version of a page, which avoids duplicate-content problems when the same content is reachable at several addresses.
Open Graph tags (the ones prefixed og:) and Twitter Card tags do the same job for social media. When your link is pasted into a post, the platform looks for og:title, og:description, og:image and og:url to build the preview card. Without them the platform guesses, often badly. This generator escapes every character that is special in HTML — &, <, >, " and ' — so a title containing, say, an ampersand produces valid markup rather than a broken tag.
Tips & Tricks becomes <title>Tips & Tricks</title> in the output. The raw & is escaped to & so the tag stays valid; a browser still displays it as Tips & Tricks.| Tag | What it controls | Recommended length |
|---|---|---|
<title> | Search-result headline & browser tab | ~50–60 characters |
meta description | Search-result summary snippet | ~150–160 characters |
link rel=canonical | Preferred URL of the page | Absolute URL |
og:image | Social preview image | ~1200×630 px |
twitter:card | Twitter/X card style | summary / large image |
Reference note: the generated tags follow the HTML living standard, the Open Graph protocol and the Twitter Cards specification. Search engines treat the title and description as strong hints, not exact instructions, and may rewrite a snippet when it better matches the search query.
Frequently asked questions
- What are meta tags?
- Meta tags are HTML snippets in the page
<head>that describe the page to browsers, search engines and social networks. The most important for SEO are the title and meta description, which can appear as the headline and summary in search results; the canonical link names the preferred URL of the page. - What is Open Graph?
- Open Graph is a protocol, originally from Facebook, that uses
og:meta tags to control how a page looks when shared. Tags likeog:title,og:description,og:imageandog:urldefine the headline, summary, image and link of the social preview card. - How long should a title and meta description be?
- Aim for a title of about 50–60 characters and a description of about 150–160 characters. Search engines measure displayed pixel width, so these are guides; longer text is not penalised but is usually truncated with an ellipsis in the snippet.
- Do meta keywords help SEO?
- No. Google and the other major search engines have ignored the meta keywords tag for years because it was abused. This tool can output one if you want, but it will not improve ranking — invest in a strong title, description and content instead.
- What image size should I use for og:image?
- Use about 1200×630 pixels (a 1.91:1 ratio) for a large card, under roughly 5 MB, served from an absolute
httpsURL that is publicly reachable so the network can fetch it when building the preview. - Where do I put these tags?
- Paste them inside the
<head>element, before the closing</head>and near your charset and viewport tags. They must be in the head, not the body, so crawlers and social scrapers read them before rendering the page.