DevTool Desk

Meta Tag Generator

Social preview

https://example.com

DevTool Desk — Free Online Developer Utilities

Fast, free, privacy-friendly developer tools that run entirely in your browser.

Generated tags
<title>DevTool Desk — Free Online Developer Utilities</title>
<meta name="description" content="Fast, free, privacy-friendly developer tools that run entirely in your browser." />
<link rel="canonical" href="https://example.com" />
<meta name="theme-color" content="#0f172a" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="DevTool Desk — Free Online Developer Utilities" />
<meta property="og:description" content="Fast, free, privacy-friendly developer tools that run entirely in your browser." />
<meta property="og:url" content="https://example.com" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:site_name" content="DevTool Desk" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:title" content="DevTool Desk — Free Online Developer Utilities" />
<meta name="twitter:description" content="Fast, free, privacy-friendly developer tools that run entirely in your browser." />
<meta name="twitter:image" content="https://example.com/og-image.png" />

Fill in a page's title, description, and image, and get ready-to-paste SEO and social sharing tags — a canonical link and meta description for search engines, plus Open Graph and Twitter Card tags so the page looks right when shared on social media. A live preview shows roughly how the shared card will appear.

Frequently asked questions

What's the difference between Open Graph and Twitter Card tags?

Open Graph tags (og:*) are a shared standard used by Facebook, LinkedIn, Slack, Discord, and most other platforms. Twitter/X has its own tag set (twitter:*) that falls back to Open Graph values when a specific Twitter tag isn't present — this generator includes both for full coverage.

Where do these tags go in my HTML?

All of the generated tags belong inside the <head> section of your page, alongside your existing <meta charset> and viewport tags.

What image size should I use for the preview image?

A common safe choice is 1200×630 pixels, which displays well as a large card on most platforms without being cropped awkwardly.