Free SEO Meta Tags Generator & Social Preview Studio
Use our free SEO meta tags generator to instantly create, preview, and copy HTML tags for Google, Facebook Open Graph, and Twitter Cards 100% offline.
Table of Contents
🏷️ SEO Meta Tags Studio
The 🔍 SERP tab renders your title and meta description exactly as Google displays them in search results — with the favicon, breadcrumb URL trail, and date prefix. Toggle between Desktop and Mobile previews with one click: the mobile view narrows to 360px and scales font sizes proportionally to match Android and iPhone screen rendering. The Featured Snippet simulator below the preview lets you paste your target content and preview it as a Paragraph, List, or Table snippet — the three formats Google uses for position-zero results. Character count bars turn green (ideal range), amber (borderline), or red (over limit) in real time as you type.
The 📣 Social tab previews your Open Graph data across four platforms simultaneously — Facebook (exact card layout with image, domain, title, description), Twitter/X (both Summary Large Image and Summary card types), WhatsApp (compact thumbnail link preview), and Discord (dark-mode embed with site name, title, description, and image). An OG Image Checker validates the image URL format. All four previews update live as you type in the core fields. The Open Graph Settings section adds og:type, og:site_name, og:locale, and twitter:site handle for complete tag coverage.
The 📊 Schema tab generates ready-to-paste JSON-LD for six schema types: Article (with author, publisher, datePublished, logo), WebPage, Organization (with social profiles and contact point), BreadcrumbList (auto-generated from any URL path), FAQPage (add unlimited Q&A pairs dynamically — the format Google uses to show accordion rich results in SERP), and Product (with price, currency, availability, and AggregateRating). The ✅ Audit tab runs a 15-point weighted checklist with ✅ ❌ ⚠️ per criterion, calculates an SEO score (0–100), and exports a full audit report as a .txt file.
Fill in the Page Title and Meta Description in the always-visible Core Fields panel at the top. Character count bars show green for ideal length (50–60 chars for title, 120–160 for description), amber for borderline, and red for over-limit. Enter your Page URL and OG Image URL to activate SERP breadcrumbs, favicon, and social card previews. Click 💡 Load Sample to see a fully populated example with all fields pre-filled.
Switch to 🔍 SERP to see your Google search result preview — toggle Desktop vs Mobile. Paste content in the Snippet Content field and pick Paragraph, List, or Table to simulate Featured Snippet formats. Switch to 📣 Social to see Facebook, Twitter/X, WhatsApp, and Discord previews — click each platform tab to switch. Add your OG settings (type, site name, locale, Twitter handle) in the Open Graph Settings card below the previews.
Switch to 📊 Schema. Click a schema type button (Article, WebPage, Organization, Breadcrumb, FAQ, Product). Fill in the type-specific fields — for Article: author, publisher, dates; for FAQ: click ➕ Add Question & Answer to build Q&A pairs; for Breadcrumb: paste any URL and click Generate. Click ⚡ Generate JSON-LD — the complete <script type="application/ld+json"> block appears in the code output, ready to paste into your page <head>.
Switch to ✅ Audit to run the 15-point SEO checklist. An SEO Score (0–100) shows instantly with color-coded rating. Priority fixes appear in the gold box below the checklist. Click 📤 Export Audit Report to download a .txt file. For meta tags: switch to 💻 Meta Tags, configure the robots builder, then click 📋 Copy All Tags — or use the per-section copy buttons (Basic / OG / Twitter) to copy each group separately.
Last updated: June 2026
🔴 Why Open Graph Tags Control Your Social Share Appearance
When someone shares a URL on Facebook, LinkedIn, Twitter, WhatsApp, Discord, or Slack, those platforms don’t display the raw URL. They make an HTTP request to the page, parse the HTML for Open Graph meta tags in the <head>, and render a rich preview card with image, title, and description. Without OG tags, platforms fall back to guessing — pulling the first image on the page, the <title> tag, and a random paragraph of text. The result is often a broken card with a logo, an unrelated image, or no image at all. OG tags give you precise control over exactly how your content appears when shared — which directly affects click-through rate from social platforms.
The minimum viable Open Graph tag set for a shared page is four properties: og:title, og:description, og:image, and og:url. Facebook caches OG tags aggressively — once a URL is shared with a broken image, that broken image shows in Facebook’s cache until you use the Facebook Sharing Debugger to force a re-scrape. For this reason, getting OG tags correct before a piece of content goes live is important. The og:image should be an absolute URL (not relative), ideally 1200×630 pixels, under 8MB in size, in JPEG or PNG format, and accessible without authentication or redirect chains.
🟡 JSON-LD Schema Markup — What It Is and How Google Uses It
Schema markup is structured data that tells search engines the meaning of your content — not just what the words say, but what type of entity the page describes. Google supports two formats: Microdata (inline HTML attributes) and JSON-LD (a separate <script> block in the <head>). Google’s official recommendation is JSON-LD because it doesn’t require modifying the visible HTML content and is easier to maintain. JSON-LD follows the Schema.org vocabulary — a joint project of Google, Bing, Yahoo, and Yandex that defines standard types like Article, Product, FAQPage, Organization, and BreadcrumbList.
The practical impact of schema markup: Google may use it to generate rich results — enhanced SERP appearances beyond the standard title, description, and URL. An Article schema enables byline and date display. A FAQPage schema can produce an accordion of questions directly in the search result — expanding without a click and occupying significantly more vertical space in the SERP. A Product schema with AggregateRating can show star ratings, price, and availability. BreadcrumbList schema overrides Google’s auto-generated breadcrumb trail in your result. None of these are guaranteed — Google chooses when to show rich results — but providing accurate schema markup is a prerequisite.
🟢 Article Schema — Required Fields for E-E-A-T Signals
Google’s E-E-A-T (Experience, Expertise, Authoritativeness, Trustworthiness) guidelines give weight to who wrote a piece of content and who published it. The Article schema’s author property establishes authorship — linking to an author page via @id creates an author entity that Google can associate with a named person’s credentials. The publisher property with a logo establishes the publishing organization. datePublished and dateModified in ISO 8601 format (YYYY-MM-DD or full 2025-06-15T09:00:00+00:00) help Google understand content freshness — important for time-sensitive queries where recency is a ranking factor. The headline property should match your <h1> tag — discrepancies between schema and on-page content can reduce schema trust signals.
- 🔵 FAQPage schema requires each question to be wrapped in a
Questiontype with a singleacceptedAnswer. Google typically shows 2–3 questions in the SERP accordion. The questions should match the actual H2/H3 headings on the page — if the schema FAQs don’t appear in the visible content, Google may not show the rich result. - 🟠 BreadcrumbList schema should mirror the actual URL hierarchy exactly. If your URL is
example.com/blog/seo/meta-tags, the breadcrumb items should be Home → Blog → SEO → Meta Tags. Mismatches between schema breadcrumbs and visual breadcrumbs can cause Google to ignore the schema. - 🟣 Product schema requires AggregateRating data to display star ratings in SERP. The
ratingValuemust be within thebestRating/worstRatingrange. Fabricated ratings are a violation of Google’s guidelines and can result in a manual action penalty.
🟡 Robots Meta Tag — Every Directive Explained
The robots meta tag (<meta name="robots" content="...">) gives page-level crawling and indexing instructions to search engine bots. It overrides robots.txt at the page level — a page disallowed in robots.txt can’t be crawled, but a page accessible to crawlers can use the meta robots tag to prevent indexing. The key directives: index/noindex controls whether the page appears in search results. follow/nofollow controls whether link equity passes through the links on the page to their destinations. These two are independent — a page can be indexed but have its links nofollowed, or be noindexed but its links followed.
noarchive prevents Google from storing and showing a cached copy of the page. nosnippet prevents Google from showing a description snippet in the SERP — the result shows title and URL only. noimageindex prevents images on the page from appearing in Google Images. max-snippet:-1 tells Google it can show any length snippet — removing the default length restriction. The full combined directive for a standard indexable page: content="index, follow, max-snippet:-1". For tag pages, author archives, or paginated pages that shouldn’t appear in search: content="noindex, follow" — nofollowing on archive pages discards link equity unnecessarily. Use our SEO Meta Tags Studio to build the exact robots string you need, then verify it in the ✅ Audit tab. For a deeper look at all meta tag types check our complete SEO meta tags guide.
What is the ideal og:image size for social sharing?
The recommended og:image size is 1200×630 pixels — a 1.91:1 aspect ratio. Facebook renders this as a full-width card image above the title and description. Twitter’s large image card uses the same 1.91:1 ratio. Images smaller than 600×315 may render as thumbnails instead of full cards on some platforms. Keep the file under 8MB and use JPEG or PNG format — WebP is not universally supported by all social crawlers. Place important content in the centre 60% of the image to avoid cropping on square previews (WhatsApp, Instagram).
Does schema markup directly improve Google rankings?
Schema markup is not a direct ranking factor — adding JSON-LD to a page does not cause Google to rank it higher for target keywords. Its value is indirect: rich results (star ratings, FAQ accordions, breadcrumbs) increase click-through rate from the SERP, and higher CTR at a given ranking position sends a positive relevance signal. Article schema with accurate author and publisher data contributes to E-E-A-T signals. The most measurable impact is through FAQ and Product schema, which can visually expand a result’s SERP footprint and significantly increase organic CTR.
What is the difference between robots.txt and the robots meta tag?
robots.txt controls whether Google’s crawler can access a URL at all — a disallowed URL won’t be crawled or indexed. The robots meta tag controls what Google does with a page it has already crawled: whether to index it, show a snippet, cache it, or pass link equity through its links. An important nuance: a URL blocked in robots.txt cannot be noindexed via meta robots — Google never crawls the page to read the tag. To noindex a page, it must be accessible to crawlers (not blocked in robots.txt) but have content="noindex" in the meta robots tag.
Why does Facebook show an old image even after I updated og:image?
Facebook caches Open Graph data aggressively — sometimes for weeks. After updating your og:image, use Facebook’s Sharing Debugger tool (search “Facebook Sharing Debugger”) and paste your URL, then click “Scrape Again.” This forces Facebook to re-fetch your page’s OG tags and update the cache. LinkedIn has its own Post Inspector tool for the same purpose. Twitter/X re-scrapes URLs more frequently and typically shows updated cards within a few hours without manual intervention.
How many FAQ schema questions should I include on a page?
Google typically displays 2–3 questions in the SERP FAQ accordion, even if your schema includes more. Including 4–8 well-written questions is a practical range — enough for Google to select the most relevant ones for a given query. Each question must appear as visible text on the page (not just in the schema) — Google may reject FAQ rich results if the questions exist only in the JSON-LD but not in the page content. Questions should be specific and answerable in one or two sentences in the accordions.
What’s the difference between twitter:card types?
summary_large_image shows a full-width image above the title and description — the format used for blog posts, articles, and content marketing. summary shows a small square thumbnail to the left of the title and description — appropriate for simple links, profile pages, or product listings where a large image isn’t necessary. Both require the twitter:title, twitter:description, and twitter:image properties. The Twitter card preview in the Social tab shows how each type renders before you commit to one.
When should I use noindex on a page?
Use noindex on pages that provide no unique value to search visitors: tag archives, date archives, author pages with only 1–2 posts, paginated results pages beyond page 2, thank-you/confirmation pages, login and account pages, duplicate content pages, and staging or preview URLs accidentally exposed to crawlers. Noindexing thin content pages prevents crawl budget waste and keeps Google’s index focused on your strongest content — which can positively affect overall site quality signals.
Should og:title match the page’s HTML title tag exactly?
They should be consistent but don’t need to be identical. The HTML <title> tag is optimised for Google’s SERP display (60-character target). The og:title is optimised for social card display (Facebook shows approximately 70 characters). A common pattern: the HTML title includes the site name suffix (“How to Write Meta Tags | MySite”) while og:title omits it (“How to Write Meta Tags”) since Facebook displays the domain separately. Significant mismatches between the two — different topics, contradictory information — can reduce trust signals from social platforms and search engines.
Does adding a canonical URL affect how social platforms fetch my OG tags?
The canonical tag (<link rel="canonical">) is a signal for search engines, not social platform crawlers. Facebook, Twitter, and WhatsApp crawlers read OG tags from whichever URL is shared, regardless of canonical. However, if a non-canonical URL is shared (e.g., a URL with tracking parameters like ?utm_source=email) and that URL redirects or includes the canonical OG tags, the platform typically follows the redirect and reads OG tags from the final URL. Always include canonical URLs in your meta tags — the SEO Audit tab checks for this specifically.
