Meta tags are small snippets of HTML code that you'll never see displayed on a webpage, yet they have an outsized influence on how your site appears in search results and when shared on social media. If you're building a website, understanding meta tags is essential.
What Are Meta Tags?
Meta tags are pieces of code placed in the <head> section of an HTML document. They provide metadata — information about the page — to browsers, search engines, and social media platforms. Unlike the visible content of your page, meta tags are invisible to visitors but are read by machines (search engine crawlers, social media link preview generators, browsers).
The Title Tag
Although technically not a "meta" tag, the <title> tag is the most important piece of metadata on any page. It appears as the clickable headline in search results and as the text shown on browser tabs. A good title is concise (50-60 characters), includes your primary keyword, and clearly describes the page's content.
Meta Description
The meta description is a brief summary of the page's content, typically 150-160 characters. While it doesn't directly affect search rankings, it's often displayed as the snippet text under your page title in search results. A compelling, accurate description improves click-through rates — more people clicking your result instead of a competitor's, which indirectly benefits your site's performance over time.
Open Graph Tags (Facebook/LinkedIn)
Open Graph (OG) tags control how your page appears when shared on platforms like Facebook, LinkedIn, and many messaging apps. Without these tags, social platforms guess what to display — often picking a random image or awkward text snippet from your page.
Key Open Graph tags include og:title (the headline shown in the share preview), og:description (the summary text), og:image (the preview image), og:url (the canonical URL), and og:type (typically "website" or "article"). Setting these properly means your content looks professional and intentional when shared — rather than broken or random.
Twitter Card Tags
Similar to Open Graph, Twitter (X) has its own meta tags for controlling link previews on its platform. The twitter:card tag specifies the preview format (such as "summary_large_image" for a large preview image), while twitter:title and twitter:description work similarly to their Open Graph counterparts. Many sites set both Open Graph and Twitter tags to ensure consistent previews across platforms.
Canonical Tags
A canonical tag tells search engines which URL is the "official" version of a page when multiple URLs could display similar or identical content (for example, with and without trailing slashes, or with tracking parameters). This prevents search engines from treating these as duplicate content, which can otherwise dilute your SEO authority across multiple URL variations.
Keywords Meta Tag — Still Relevant?
The meta keywords tag was historically used to tell search engines what topics a page covered. However, due to widespread abuse (stuffing irrelevant keywords to manipulate rankings), major search engines like Google stopped using this tag for ranking purposes years ago. Some smaller search engines and internal site search tools may still reference it, so including it causes no harm, but it shouldn't be relied upon for SEO.
The Viewport Meta Tag
The viewport meta tag tells mobile browsers how to scale and display your page. Without it, mobile browsers often display a "desktop" version of your site zoomed out, making text too small to read. This tag is essential for any responsive, mobile-friendly website — and Google's mobile-first indexing makes it effectively mandatory for good rankings.
Why Unique Meta Tags Matter for Every Page
A common SEO mistake is using identical title and description tags across every page of a site. This confuses search engines about which page is most relevant for a given search query, and creates a poor experience for users browsing search results — every result from your site looks the same. Each page should have a unique title and description that accurately reflects its specific content.
How to Generate Meta Tags with Toolmetri
- Enter your page title and description
- Add keywords, URL, and author information (optional)
- Click Generate Meta Tags
- Get a complete, ready-to-paste code block including title, description, Open Graph, Twitter Card, and canonical tags
- Copy and paste directly into the <head> section of your HTML
Generate your meta tags now
Free, complete with Open Graph and Twitter Cards.
Open Meta Tag Generator