Γεννήτρια Ετικετών Meta
ΝέοΔημιουργήστε ετικέτες meta για SEO, Open Graph και Twitter Card με ζωντανή προεπισκόπηση.
Page title
Your meta description preview appears here.
Runs entirely in your browser. Nothing is uploaded.
Generate SEO, Open Graph and Twitter tags in one place
This meta tag generator turns one short form into a complete, copy-ready set of SEO, Open Graph, and Twitter Card meta tags. Fill in your title, description, URL, and preview image and it writes the <head> block for you: title, meta description, canonical, robots, charset, and viewport, plus every og: and twitter: tag a rich social preview needs. Nothing to install, no sign-up: it runs entirely in your browser, so the page details you enter are never uploaded.
As you type, three live previews — Google, Facebook, and X — update in real time so you can see exactly how your page will look in search results and social feeds before you publish. Character counters turn amber when your title or description runs long, catching the most common SEO mistake before it ships.
The meta tags that matter
A modern page needs only a handful of HTML meta tags to be search-ready and share-ready. The <title> and <meta name="description"> drive your Google snippet and are the two fields that most directly affect click-through rate. The viewport and charset tags make the page render correctly on mobile. The canonical link prevents duplicate-content dilution when the same content is reachable at multiple URLs. The robots tag controls whether the page is indexed at all.
This generator always includes the essentials and adds the optional keywords and author fields only when you fill them in. The keywords tag no longer affects Google rankings — it has been ignored since 2009 — but the generator includes the field for completeness and for any internal search engines that still read it.
Better link previews with Open Graph and Twitter Cards
When someone shares your link on Facebook, LinkedIn, WhatsApp, Slack, Discord, or X, those platforms look for Open Graph (og:) and Twitter Card (twitter:) tags to build a rich preview card. Without them a link shows as plain text; with them it shows your headline, description, and a 1200×630 image. That visual difference in social feeds can meaningfully change how many people click.
The open graph generator here produces a full og: set and the matching twitter: tags, including image alt text, in a single pass. X/Twitter reads its own tags first but falls back to your og: tags for anything missing, so a complete og: set plus twitter:card and twitter:site is all you need to cover both platforms.
Control indexing with the robots meta tag
The built-in robots meta tag generator lets you flip a page between index and noindex and between follow and nofollow with a click. Use noindex on thank-you pages, staging sites, admin pages, and thin filter pages you do not want in Google. Use nofollow on pages where you do not want to pass ranking signals through outbound links. Leave the default index, follow on everything you want found.
When a page is set to noindex, the Google preview card flags it with a warning so you cannot accidentally ship the wrong robots setting. The generated tag also supports advanced directives like noarchive (prevents Google from showing a cached version) and nosnippet (prevents the description being shown in results).
How it compares to SEMrush, Yoast, and Rank Math
Most alternatives have a dependency or a cost. SEMrush includes meta tag analysis in its site audit but starts at $129/month. Yoast SEO and Rank Math are WordPress plugins — they work well inside WordPress but cannot be used for Shopify, Webflow, Next.js, or hand-coded HTML. Ahrefs has an SERP snippet preview tool but requires a subscription. Many standalone meta tag generators are ad-heavy, require email sign-up, or only generate the basic title and description without OG or Twitter tags.
This generator covers the full tag set — title, description, canonical, robots, all og: fields, all twitter: fields, image alt text — with live Google and social previews, no account, no cost, and no CMS dependency. It works for any website on any stack and runs client-side, so no page details are ever sent to a server.
A meta tag generator for any stack
Because the output is plain HTML, it drops into any project. Paste the block into a hand-coded static site, a WordPress theme header, a Shopify theme.liquid, a Webflow custom code section, or a React or Vue layout component. In Next.js, add the values to your Metadata export in layout.tsx. In Astro, pass them as props to your Layout.astro head component. The generator writes clean, standards-compliant HTML that works the same way regardless of the framework.
Bookmark this tool for whenever you launch a new page, refresh a title, or want a link to look its best when shared. Fill in the form, copy the <head> block, paste it in, and your page is ready for search engines and every major social platform.
Open Graph protocol in depth
The Open Graph protocol was created by Facebook in 2010 to give web publishers a standard way to control how their content appears as a rich link preview on social platforms. Every OG-compliant implementation requires four tags at minimum: og:title (the headline displayed in the card), og:type (the kind of content — website for most pages, article for blog posts, video.movie, music.song, or product for specialized content), og:image (an absolute HTTPS URL to the preview image), and og:url (the canonical address of the page). Beyond the four required tags, the most impactful optional additions are og:description, og:site_name, og:locale (e.g. en_US), and og:image:width, og:image:height, and og:image:alt — the last of which is essential for accessibility and is also read by Slack when building its link unfurl.
Image specifications matter more than most publishers realize. Facebook recommends a 1.91:1 aspect ratio and a minimum of 1200×630 pixels for the full-size card display; the platform supports images as small as 600×315 but will render them as a smaller thumbnail. The file size cap is 8 MB. Because the same image file typically serves og:image and twitter:image simultaneously, designing to the 1200×630 target covers both platforms without creating separate assets. Use an absolute URL — a relative path like /images/og.png will fail because the social platform's scraper fetches the image server-side without a base URL.
When you publish or update a page, Facebook's and LinkedIn's scrapers cache the old preview for days. The Facebook Sharing Debugger at developers.facebook.com/tools/debug/ lets you paste your URL, see the tags the scraper currently sees, and force a cache refresh with the "Scrape Again" button — essential after fixing a broken og:image or updating a title. Adding fb:app_id with your Facebook App ID gives Facebook's scraper faster and more reliable access to your page, and it associates shares with your app so you can track them in Facebook Insights. For og:type set to article, you can add the extended properties article:published_time (ISO 8601 timestamp), article:author (a profile URL or name), and article:section (the topic category) — these appear in the Facebook object viewer and inform algorithmic content recommendations.
Twitter/X Cards: types, requirements, and validation
X (formerly Twitter) supports four Twitter Card types, each producing a different layout in the timeline. Summary shows a small square thumbnail on the left alongside a title and description — suitable for general web pages and articles where the image is supplementary. Summary with large image (summary_large_image) renders a wide banner image above the text, which dominates the visual space and consistently earns higher engagement; it is the right choice for content-heavy pages with strong hero images. App cards are designed for mobile-app promotion and include App Store and Google Play download links, star ratings, and pricing pulled from the respective stores via the twitter:app:id:iphone and twitter:app:id:googleplay tags. Player cards embed an iframe directly in the tweet to play audio or video without leaving the platform — they require Twitter's explicit approval before they go live.
The required tag for any card type is twitter:card itself, set to one of the four values above. twitter:site takes the @username of the website (e.g. @utilokit), while twitter:creator takes the @username of the individual author of the specific piece of content — both appear in the card's byline. Image requirements differ by card type: for summary, the minimum is 144×144 pixels with a maximum of 4096×4096 and a 5 MB file limit; for summary_large_image, the minimum is 300×157 pixels with a 2:1 aspect ratio and the same 5 MB cap. JPG, PNG, WEBP, and GIF are all accepted.
One of the most useful features of Twitter Cards is graceful fallback: if twitter:title or twitter:description are absent from a page, X falls back to og:title and og:description automatically. This means a complete Open Graph set plus just twitter:card and twitter:site gives you full coverage on both platforms without duplicating every tag. Validation was historically done via the Card Validator at cards.twitter.com/validator, but following Twitter's API policy changes in 2023 the tool now requires a logged-in account and has rate limits — the live preview in this generator lets you catch layout problems without touching the validator at all.
The title tag and meta description: ranking signals and click-through rate
The <title> tag is technically not a meta tag — it is a standalone HTML element — but it is the single most important on-page SEO signal. It appears in the browser tab, in the blue headline of a Google search result, and as the default text when a page is bookmarked or shared via copy-link. Google uses it as one of the clearest signals for understanding what a page is about. The optimal title length is 50–60 characters: Google truncates titles when they exceed approximately 600 pixels of rendered width, which at typical font sizes corresponds to 50–60 characters. A title that runs to 80 characters will be cut with an ellipsis in the SERP, hiding the most specific part of your headline — usually the brand name or differentiating keyword at the end.
The meta description is not a direct ranking signal — Google announced in 2009 that it does not use the description tag for ranking — but it remains one of the highest-leverage fields on the page because it is what users read before deciding whether to click. A well-written description that matches the searcher's intent and includes a clear call-to-action can lift click-through rate (CTR) significantly, and CTR feeds back into ranking indirectly through engagement signals. The optimal length is 120–160 characters: desktop SERPs support up to about 158 characters before truncation, while mobile SERPs truncate earlier at around 120 characters. Writing the most important information in the first 120 characters makes the snippet work on both.
A critical nuance is that Google frequently ignores your meta description and generates its own snippet by pulling a relevant passage directly from the page body. This happens when Google's algorithms determine that the page content better answers the specific query than your authored description does — particularly for long-tail searches. This does not mean you should skip the description: for branded searches and head-terms where users are making a deliberate brand choice, Google uses the authored description more often, and the snippet shown on those high-intent searches is exactly where first impressions are formed. Lead both the title and description with the primary keyword — not for ranking, but because Google bolds matching terms in the snippet, making your result more visually prominent on the results page.
Technical meta tags: viewport, charset, robots, and canonical
Four technical meta tags form the foundation of every well-built page, regardless of content or platform. The charset declaration — <meta charset="UTF-8"> — instructs the browser how to decode the bytes of the HTML document. It must appear as the first element inside <head>, before any title, description, or script, because the browser needs to know the encoding before it can correctly parse anything else. Placing it later or omitting it can cause garbled special characters (’ instead of ') on browsers that default to a different encoding. The viewport meta tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — is the mobile responsiveness declaration. Without it, mobile browsers render the full desktop layout at 980 pixels wide and then shrink it to fit the screen, making text tiny and unreadable. The viewport tag is a prerequisite for responsive CSS to function, and Google's mobile-first indexing treats its absence as a usability failure that can suppress rankings on mobile queries.
The robots meta tag — <meta name="robots"> — controls how search engine crawlers treat a specific page at the HTML level, as opposed to the site-wide rules in robots.txt. The noindex directive prevents the page from appearing in search results entirely; use it on thank-you pages after form submissions, staging and preview URLs, admin dashboards, paginated archive pages beyond page two, and any thin or near-duplicate content. The nofollow directive instructs crawlers not to follow outbound links from the page and not to pass PageRank through them. Additional supported directives include noarchive (prevents Google from storing and displaying a cached copy), nosnippet (prevents any description or video preview from being generated for the SERP), and noimageindex (prevents the page's images from being indexed in Google Images). Directives can be combined: content="noindex, noarchive" is valid.
The canonical tag — <link rel="canonical" href="https://example.com/page"> — is technically a link element rather than a meta tag, but it belongs in the same <head> block and solves one of the most common SEO problems: duplicate content. The same page content is often accessible at multiple URLs — HTTP and HTTPS variants, www and non-www, trailing-slash and non-trailing-slash versions, URLs with UTM tracking parameters, paginated variants, and print-friendly versions. Without a canonical tag, Google splits its ranking signals among all discovered variants and may choose to index the wrong one. The canonical tag declares the single authoritative URL for the content, consolidating all signals onto that version. It is a strong hint, not an absolute command — Google may override it if it disagrees — but it resolves the large majority of duplication issues without requiring server-side redirects on every variant.
Structured data and JSON-LD: the search-feature layer beyond meta tags
Structured data is machine-readable information embedded in a page to help search engines understand its content at a semantic level, not just a textual one. JSON-LD — JavaScript Object Notation for Linked Data — is Google's explicitly preferred method for delivering that information. It lives in a <script type="application/ld+json"> tag placed in the <head> (or body) and describes the page using the open vocabulary defined at schema.org. Unlike Microdata and RDFa, which require weaving markup attributes directly into HTML elements, JSON-LD is a self-contained block that can be generated, validated, and maintained entirely separately from the visual HTML — making it far easier to add without touching layout code. Google supports 32 structured data types in its search documentation, including Article and BlogPosting for editorial content, Product for e-commerce listings, FAQPage for frequently asked questions, HowTo for instructional content, BreadcrumbList for navigation paths, LocalBusiness for physical locations, and Recipe for food content — each unlocking different visual treatments in search results.
The relationship between meta tags and JSON-LD structured data is complementary, not redundant. Meta tags target browser rendering, social sharing platforms, and basic search-engine indexing — they control the snippet text and the social preview card. JSON-LD targets search engine result features that go well beyond the standard blue-link snippet: rich snippets with star ratings and review counts beneath a search result, FAQ accordions that expand directly in the SERP without requiring a click, HowTo step carousels on mobile, Product panels with pricing and availability, and knowledge panel information for brands and entities. A page that has both a well-formed meta description and accurate JSON-LD achieves full search presence optimization — the standard snippet for users who want a quick overview, and the rich result feature for users whose query intent matches a specific schema type.
The official validation tool is the Google Rich Results Test at search.google.com/test/rich-results. Paste a live URL or raw HTML containing your JSON-LD block and it validates the markup against all 32 supported types, reporting which rich result features the page is eligible for, which required fields are missing or malformed, and which optional fields would enhance the result. It validates JSON-LD, Microdata, and RDFa alike. A critical detail: invalid structured data is silently ignored by Google rather than causing a ranking penalty — the page continues to rank normally, it simply does not qualify for the rich result feature. This means adding JSON-LD carries no downside risk, only upside potential. After publishing, use Google Search Console's Rich Results report under Enhancements to monitor which pages have been granted rich result status at scale and to surface validation errors Google encounters during crawl, which sometimes differ from what the test tool reports on a single fetch.
Frequently asked questions
What are meta tags?
Meta tags are HTML snippets placed in the head of a page that describe it to browsers and search engines without appearing on the page itself. The most important are the title tag and the meta description, which drive your Google search snippet. Beyond those, you need a viewport tag for mobile scaling, a charset declaration, a robots tag to control indexing, a canonical URL to prevent duplicate-content issues, and Open Graph plus Twitter Card tags for rich social previews. This tool generates the full set from one short form.
How do I create meta tags for SEO?
Enter your page title, description, URL, and a 1200×630 preview image in the form and this generator writes the complete tag set: title, meta description, canonical, robots, Open Graph, and Twitter Card. Keep the title near 60 characters and the description near 155, use a unique pair on every page, then copy the block into the head of your HTML. The live previews show how the snippet will look in Google and on social media before you publish — no need to deploy first and test with a separate debugger.
Which meta tags matter for SEO in 2026?
The ones that still earn their place are the title tag, the meta description, the viewport tag (controls mobile rendering), the charset declaration, the robots tag (controls indexing), and the canonical link (prevents duplicate-content dilution). On top of those, Open Graph and Twitter Card tags control how your link looks when shared on social platforms. The old keywords meta tag no longer affects Google rankings — it has been ignored since 2009 — so it is optional. This generator includes it but leaves it empty by default.
Does the keywords meta tag still matter?
For Google, no. Google publicly stated it ignores the keywords meta tag for ranking purposes in 2009 because it was so heavily abused by spammers. Bing also announced it ignores it for ranking. A handful of small internal site-search engines still read it, so a short honest list does no harm, but it will not lift your position in Google or Bing. Put your effort into a compelling title and description instead — those two fields directly influence your click-through rate in search results.
What's the ideal title and description length?
Aim for a title of 50–60 characters and a meta description of 145–155 characters. Google truncates titles near 600 pixels wide (roughly 55–60 characters for average text) and descriptions around 155–160 characters, adding an ellipsis to anything longer. The character counters here turn amber once you pass the recommended length, and the Google preview card shows exactly where your text would be cut off — so you can shorten or restructure before going live.
What are Open Graph (OG) tags?
Open Graph tags — the ones whose names start with 'og:' — are a standard created by Facebook that controls how your link appears when shared on social media and in chat apps. The core set is og:title, og:description, og:image, og:url, and og:type. With them in place, a shared link shows a rich card with your chosen headline, description, and preview image instead of a bare URL. Without them, platforms fall back to scraping your page title and a random image, which often looks terrible. This generator builds the full set.
What is a Twitter Card?
A Twitter Card (the feature still exists on X) is the rich preview shown when your link is posted on the platform, built from 'twitter:' meta tags. The twitter:card value chooses the layout: 'summary_large_image' shows a wide banner image above the text, while 'summary' shows a small square thumbnail to the left. Add twitter:title, twitter:description, twitter:image, and your twitter:site handle. X falls back to your Open Graph tags for anything you omit, so a complete og: set plus just twitter:card and twitter:site is usually enough.
What is the robots meta tag?
The robots meta tag tells search engines how to treat a specific page. Its content value combines directives: 'index, follow' is the default and lets the page appear in search results with its links crawled; 'noindex' keeps it out of results entirely; 'nofollow' tells engines not to pass ranking signals through its links; 'noarchive' prevents the cached version from being shown. A thank-you page after a form submission, for example, should be noindex so it does not compete with your main landing page in search results.
How do I add meta tags to my website?
Copy the generated block and paste it inside the head section of your HTML, ideally near the top before any scripts. On WordPress, add it through your theme's header template or an SEO plugin — Yoast SEO and Rank Math are the most common, and both let you paste custom meta tags per page. In Next.js, use the Metadata API in your layout.tsx. In Astro, add them to the Layout.astro head. In Shopify, edit theme.liquid. After publishing, re-share the URL on Facebook and LinkedIn to trigger a cache refresh of the social preview.
What is a canonical tag and when do I need it?
A canonical tag tells search engines which URL is the authoritative version of a page when the same or very similar content is reachable at multiple addresses. Common cases: tracking URLs with UTM parameters, http vs https, www vs non-www, trailing slash vs no trailing slash, and paginated versions of a blog or product listing. Without canonical tags, Google splits ranking signals across the duplicates and may rank the wrong version. Pointing duplicates at one canonical URL consolidates those signals. Enter your preferred URL above and the canonical link is included automatically.
Is it safe to enter real page details here?
Yes. This meta tag generator runs entirely in your browser using JavaScript — the title, description, URLs, and image URL you enter are never sent to a server, never logged, and never stored anywhere. The tool works offline once the page has loaded. You can safely use it on confidential or unpublished pages, draft landing pages, or internal tools whose details should not leave your device.
How do I preview how my page looks on Google and Facebook?
Enter your details and watch the three live preview cards update as you type: a Google search-result snippet (favicon, breadcrumb URL, blue title, grey description), a Facebook Open Graph card, and an X Twitter Card. They show how each platform will render your tags, so you can tweak title length and image choice before deploying. This is faster than using Google's URL Inspection tool, Facebook's Sharing Debugger, or X's Card Validator — each of which requires the page to already be live.
What size should the Open Graph image be?
Use 1200×630 pixels at a 1.91:1 ratio for the large social card. This is the size Facebook, LinkedIn, and X all display without cropping, and the same file works for both og:image and twitter:image. Keep it under 5 MB, use an absolute URL starting with https:// rather than a relative path, and provide alt text via og:image:alt so the card stays accessible. The preview cards here render your image at the correct ratio so you can check cropping before publishing.
What's the difference between Open Graph and Twitter Card tags?
Open Graph (og:) tags are the universal standard read by Facebook, LinkedIn, WhatsApp, Slack, Discord, iMessage link previews, and most other platforms. X/Twitter reads its own twitter: tags first but falls back to your og: tags for anything missing. In practice you only need two or three twitter: tags on top of a complete og: set: twitter:card (to pick the layout) and twitter:site (your @handle). This generator writes both full sets so every platform shows a rich preview.
How does this compare to SEMrush's meta tag tool or Yoast?
SEMrush includes meta tag analysis in its site audit feature, but that requires a subscription starting at $129/month. Yoast SEO is a WordPress plugin, not a standalone generator — it does not work outside WordPress and the premium version costs $99/year. Rank Math has a similar limitation. Most standalone meta tag generators require sign-up. This tool generates the full tag set — title, description, canonical, robots, Open Graph, Twitter Card — with live previews, no account, no cost, and no CMS dependency. It works for any website on any stack.
Can I use this on mobile to generate meta tags?
Yes. The form and preview cards are fully responsive and work in mobile Safari on iPhone and Chrome on Android. You can fill in the fields, review the Google and social previews, and copy the generated code directly on a phone. The tool runs in the browser with no app to install. For long code blocks on mobile, tap the Copy button rather than trying to select the text manually.
Related tools
Προβολή όλων των εργαλείων
Νέο Γεννήτρια Slug
Μετατρέψτε κάθε τίτλο σε καθαρό, φιλικό προς το SEO slug URL — μαζικά και με επίγνωση τόνων.
Νέο Δημιουργός UTM
Δημιουργήστε ιχνηλατήσιμα URL καμπανιών με utm_source, medium, campaign και άλλα.
Νέο Προεπισκόπηση Αποσπάσματος SERP
Δείτε πώς εμφανίζονται ο τίτλος και η περιγραφή σας στο Google, σε υπολογιστή και κινητό.
Νέο Γεννήτρια Robots.txt
Δημιουργήστε ένα έγκυρο robots.txt με κανόνες allow/disallow και γραμμή sitemap.
Νέο Υπολογιστής Ποσοστών
Υπολογίστε ποσοστά, αυξήσεις, μειώσεις και αντίστροφα ποσοστά άμεσα.
Νέο Γεννήτρια Lorem Ipsum
Δημιουργήστε κείμενο γεμίσματος σε παραγράφους, προτάσεις, λέξεις ή στοιχεία λίστας.