The team behind OnlineTools4Free — building free, private browser tools.
Published Mar 4, 2026 · 8 min read · Reviewed by OnlineTools4Free
SEO Meta Tags: Complete Guide to Title, Description & OG Tags
What Are Meta Tags and Why Do They Matter?
Meta tags are HTML elements in the <head> section of a web page that provide information about the page to search engines and social media platforms. They do not appear on the page itself — they work behind the scenes to influence how your page is displayed in search results, social media shares, and browser tabs.
While meta tags alone do not determine rankings, they directly control two things that do: click-through rate (CTR) from search results and social sharing appearance. A compelling title and description in Google's results can double your CTR compared to a generic one — effectively doubling your organic traffic without changing your rankings.
The Title Tag: Your Most Important Meta Tag
The title tag (<title>) appears in three places: the browser tab, the clickable headline in search results, and the default title when sharing on social media.
Best practices for title tags
- Length: Keep titles under 60 characters. Google truncates longer titles with an ellipsis, cutting off your message. Aim for 50-60 characters to be safe across all devices.
- Primary keyword first: Place your target keyword near the beginning of the title. "How to Compress PDF Files | ToolName" is better than "ToolName | How to Compress PDF Files" because the keyword appears first.
- Unique per page: Every page must have a distinct title. Duplicate titles confuse search engines and users alike.
- Compelling language: The title competes for clicks against 9 other results on the page. Use specific, benefit-driven language. "Compress PDF to Under 1MB Free" beats "PDF Compression Tool".
- Brand name at the end: If you include your brand, put it last: "Topic | Brand". The topic is what users search for; the brand is secondary.
Use our Meta Tag Generator to preview how your title will appear in Google search results before publishing.
Meta Description: Your Sales Pitch in Search Results
The meta description (<meta name="description" content="...">) appears as the two-line snippet below the title in search results. Google does not use it as a direct ranking factor, but it heavily influences click-through rates.
Writing effective meta descriptions
- Length: 150-160 characters. Google truncates anything longer. On mobile, the cutoff can be shorter (around 120 characters).
- Include the target keyword: Google bolds the search terms that appear in the description, making your result visually stand out.
- Write a call to action: "Learn how to...", "Discover the best...", "Get your free..." — give users a reason to click.
- Match search intent: If someone searches "how to compress PDF", your description should confirm that your page answers that exact question. "Step-by-step guide to reducing PDF file size without quality loss. Free online tool included."
- Avoid duplicates: Each page needs a unique description. If you cannot write unique descriptions for all pages, it is better to leave the tag empty — Google will pull relevant text from the page content.
Open Graph Tags: Controlling Social Media Previews
Open Graph (OG) tags control how your page appears when shared on Facebook, LinkedIn, WhatsApp, Slack, Discord, and most other platforms that show link previews.
The essential OG tags:
og:title— The title displayed in the social share card. Can differ from your title tag (social titles can be slightly longer and more conversational).og:description— The description in the share card. Keep under 200 characters.og:image— The image displayed in the share card. This is the most impactful OG tag. Posts with custom images get significantly more engagement than those with default/missing images.og:url— The canonical URL of the page.og:type— Usually "website" or "article".
OG image specifications
For best results across all platforms:
- Size: 1200x630 pixels (1.91:1 ratio). This is the standard that works on Facebook, LinkedIn, Twitter, and most other platforms.
- Format: JPG or PNG. Keep under 1 MB.
- Content: Include the article title, your brand logo, and a relevant visual. Make sure the text is readable at small sizes — the image is often displayed as a thumbnail.
You can resize images to the correct OG dimensions using our Image Resizer.
Twitter/X Cards
Twitter uses its own meta tags alongside OG tags. If Twitter-specific tags are present, they take priority over OG tags:
twitter:card— Card type:summary(small image) orsummary_large_image(large banner image). Usesummary_large_imagefor articles and landing pages — the large image dramatically increases engagement.twitter:title— Falls back toog:titleif not specified.twitter:description— Falls back toog:description.twitter:image— Falls back toog:image. Forsummary_large_image, use 1200x628 pixels.twitter:site— Your brand's Twitter handle (e.g., @yourbrand).
Other Important Meta Tags
Canonical tag
<link rel="canonical" href="https://example.com/page">
Tells search engines which URL is the "official" version of a page. Essential when the same content is accessible at multiple URLs (with/without www, with/without trailing slash, with query parameters).
Robots tag
<meta name="robots" content="index, follow">
Controls whether search engines index the page and follow its links. Common values: noindex (do not index), nofollow (do not follow links), noindex, nofollow (neither). Use noindex for admin pages, staging sites, and duplicate content you cannot consolidate.
Viewport tag
<meta name="viewport" content="width=device-width, initial-scale=1">
Required for mobile-responsive design. Without it, mobile browsers render the page at desktop width and scale it down, making everything tiny. Google considers mobile-friendliness a ranking factor.
Hreflang tags
For multilingual sites, hreflang tags tell search engines which language version to show in each locale. Critical for international SEO.
Testing and Validating Your Meta Tags
Always test meta tags before going live:
- Google Rich Results Test: Shows how your page appears in search results and validates structured data.
- Facebook Sharing Debugger: Shows exactly how your page will look when shared on Facebook. Also clears Facebook's cache of your page's metadata.
- Twitter Card Validator: Previews your Twitter card appearance.
- LinkedIn Post Inspector: Shows how your link preview will appear on LinkedIn.
Our Meta Tag Generator creates properly formatted meta tags for your pages — enter your title, description, and image URL, and copy the generated HTML directly into your page's <head> section. It also previews how your page will look in Google results and social shares.
For structured data that goes beyond meta tags, check out our guide on Schema Markup for SEO.
Meta Tag Generator
Generate SEO meta tags with live Google, Facebook, and Twitter previews.
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.