Fill the fields on the left. The right side shows the generated HTML and live previews of how your page will look in search results and on social platforms. See the FAQ below for an explanation of each field.
All fields are optional. Start with title and description.
Copy and paste into your page's <head>.
Fill the fields to see the generated tags.
Meta tags are small pieces of HTML in your <head> that tell search engines and social platforms what your page is about. Without them, search engines guess your title and description from page content (often poorly), and social shares look text-only — no preview image, no clear title.
The text shown as the clickable headline in search results and the title bar in social cards. Generates <title> and og:title / twitter:title. Keep it 50–60 characters — search engines truncate longer titles with "…" at around 580 pixels.
The summary text shown under your title in search results and inside social cards. Generates <meta name="description"> and og:description / twitter:description. Aim for 140–160 characters — search engines truncate at roughly 155 on desktop.
The full canonical URL of this page. Used to generate the <link rel="canonical"> tag (if enabled) and the og:url tag. The canonical URL tells search engines which URL is the "true" version of a page when several URLs serve the same content (with/without trailing slash, tracking parameters, etc.) — preventing duplicate-content issues.
The name of your website or brand. Appears as a small label in social cards (above the title on some platforms). Generates og:site_name. Example: "IndexWolf". Optional but useful.
An absolute URL (must start with https://) pointing to the image shown in social card previews. Generates og:image and twitter:image. Recommended size: 1200 × 630 pixels (1.91:1 aspect ratio). Optional — without an image, shares display as text-only cards.
A short description of what the image shows, for screen readers and accessibility. Generates og:image:alt. Example: "Screenshot of the IndexWolf homepage dashboard". Only used when an image URL is set.
Your X username without the @. Generates the twitter:site tag, which credits your account in the social card. Optional. Only matters if you want attribution on X shares.
Tells social platforms what kind of content this is. Generates og:type. website = a regular page (default). article = a blog post or news story (some platforms render a different card). product = a product listing. profile = a person's profile page. video.other = a video page. The default is fine for most pages.
The language and region of the page content, in BCP-47 form. Generates og:locale. Example: en_US for U.S. English, fr_FR for French (France). Helps social platforms and search engines show your content to the right audience.
Checkboxes to include or omit each tag group in the output. Open Graph = social card tags (works on most social and chat platforms). Twitter Card = X-specific tags (X also falls back to Open Graph if missing). Canonical = the duplicate-content prevention link. Robots = controls whether search engines index this page; off by default since most pages should be indexed (you only add a robots meta to override the default).
HTML = raw <meta> tags you paste into your page's <head>. Next.js Head = JSX for use inside next/head. React Helmet = JSX for the react-helmet library. All three produce the same final HTML in the browser — pick whichever matches your stack.
Meta description = the snippet that appears in search results. Open Graph (og:*) = how the page appears when shared on most social and chat platforms. Twitter Card (twitter:*) = how the page appears on X. Best practice: include all three. Most platforms fall back to Open Graph if a specific tag is missing.
1200 × 630 pixels (1.91:1 aspect ratio). Under 8 MB. PNG or JPG. Keep text large and centered — small screens crop the image down significantly.
Title: 50–60 characters (search engines cut off around 580 pixels on desktop, less on mobile). Description: 140–160 characters. Going over isn't disastrous (search engines truncate with "…"), but if your call-to-action is in the cut-off part, you lose clicks.
No. Everything happens in your browser. Open the Network tab in dev tools and confirm. When you type and the previews update, no outbound requests are made.