DevBolt
Processed in your browser. Your data never leaves your device.

How do I generate SEO meta tags online?

Fill in your page title, description, URL, and image to generate SEO meta tags, Open Graph tags, and Twitter Card tags. See live previews of how your page will appear in Google results and social media shares. Copy the HTML with one click. Everything runs in your browser.

Generate SEO meta tags
Input
Title: My App - Fast Dev Tools
Description: Free online developer tools
URL: https://example.com
Image: https://example.com/og.png
Output
<title>My App - Fast Dev Tools</title>
<meta name="description"
  content="Free online developer tools"/>
<meta property="og:title"
  content="My App - Fast Dev Tools"/>
<meta property="og:description"
  content="Free online developer tools"/>
<meta property="og:image"
  content="https://example.com/og.png"/>
<meta property="og:url"
  content="https://example.com"/>
← Back to Tools

Meta Tag Generator

Generate HTML meta tags for SEO, Open Graph, and Twitter Cards with live preview.

Basic Meta Tags

0/60
0/160

Advanced Options

Generated Meta Tags

<!-- Primary Meta Tags -->
<meta name="robots" content="index, follow" />
<meta name="theme-color" content="#ffffff" />

Paste these tags inside the <head> of your HTML document.Ctrl+Enter to copy

Live Preview

https://example.com
Page Title
Page description will appear here...
Quick reference

Title

Keep under 60 characters. Google truncates at ~60 chars in search results.

Description

Keep under 160 characters. This appears below the title in search results.

OG Image

Recommended size: 1200×630px. Use absolute URLs (https://...).

Twitter Cards

summary — small square image. summary_large_image — large banner image above title.

Canonical URL

Use when multiple URLs serve the same content to tell search engines which is the "real" page.

Tips & Best Practices

Pro Tip

Title tags should be 50-60 characters for full SERP display

Google displays approximately 50-60 characters (or 600px) of your title tag. Longer titles get truncated with an ellipsis, losing your call-to-action or brand name. Front-load your primary keyword. Format: Primary Keyword — Secondary Keyword | Brand. Unique titles per page are essential.

Common Pitfall

Duplicate meta descriptions across pages hurt SEO

Google treats duplicate meta descriptions as a signal of low-quality or auto-generated content. Each page needs a unique 150-160 character description that accurately summarizes the content and includes a natural call-to-action. If you can't write unique descriptions, it's better to omit them and let Google auto-generate.

Real-World Example

Open Graph tags control how your pages appear when shared

og:title, og:description, og:image, and og:url are the four essential Open Graph tags. Without them, social platforms extract random text and images from your page. The og:image should be 1200x630px for optimal display on Facebook, LinkedIn, and Twitter. Add twitter:card: summary_large_image for full-width Twitter previews.

Security Note

Meta tags can expose internal infrastructure

The <meta name="generator"> tag reveals your CMS and version (e.g., WordPress 6.4). <meta name="author"> exposes employee names for social engineering. The referrer-policy meta tag controls what URL information is sent to external sites. Set referrer-policy to strict-origin-when-cross-origin to prevent URL leakage.

Frequently Asked Questions

What meta tags should every web page include for SEO?
Every page should include: title (50-60 characters), meta description (150-160 characters summarizing content), viewport meta for mobile responsiveness, charset declaration (UTF-8), and canonical URL to prevent duplicate content issues. For social sharing, add Open Graph tags (og:title, og:description, og:image, og:url) and Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image). DevBolt's generator creates all of these from a simple form and outputs ready-to-paste HTML.
How do I generate Open Graph meta tags for social sharing?
Fill in the title, description, image URL, and page URL fields. DevBolt generates the complete set of Open Graph meta tags: og:title, og:description, og:image, og:url, og:type, og:site_name, and the corresponding Twitter Card tags. The image should be at least 1200x630 pixels for optimal display on Facebook and LinkedIn. Test your tags using DevBolt's OG Preview tool to see how your page will appear when shared on social media platforms.
What is the difference between meta description and og:description?
The meta description appears in search engine results pages (SERPs) below the page title. It should be 150-160 characters and optimized for click-through rate from search results. The og:description appears when the page is shared on social media platforms like Facebook, LinkedIn, and Twitter. It can be different from the meta description to suit the social context. If og:description is not set, social platforms often fall back to the meta description. Setting both allows you to optimize for each context separately.

Related Generate Tools

TS

tsconfig.json Builder

Build TypeScript tsconfig.json visually with framework presets, explanations for every option, and one-click download

npm

package.json Generator

Generate package.json visually with framework presets, dependency editor, scripts, and module config

HDR

Security Headers Generator

Generate HTTP security headers for Nginx, Apache, Vercel, Netlify, and Cloudflare with presets, security scoring, and multi-format output

GQL

JSON to GraphQL Schema

Generate GraphQL schema definitions from JSON data with automatic type inference, Query/Mutation generation, and .graphql download