$devtoolkit.sh/examples/html/meta-tags

Format HTML Meta Tags

Meta tags in the <head> control how search engines index your page and how it appears when shared on social media. This example includes essential meta tags for SEO, Open Graph for Facebook and LinkedIn, and Twitter Card properties. The HTML formatter cleans up spacing and indentation so you can review all tags at a glance. Use the OG Preview tool to visualize how the social share card will look.

Example
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My App — Build Faster</title>
  <meta name="description" content="Free developer tools for formatting, validating, and converting code.">
  <meta property="og:title" content="My App — Build Faster">
  <meta property="og:description" content="Free developer tools.">
  <meta property="og:image" content="https://example.com/og.png">
  <meta property="og:url" content="https://example.com">
  <meta name="twitter:card" content="summary_large_image">
  <link rel="canonical" href="https://example.com">
</head>
[ open in HTML Formatter → ]

FAQ

What is the canonical tag?
The canonical link tells search engines which URL is the authoritative version of a page, preventing duplicate content penalties when the same content is accessible at multiple URLs.
What size should the og:image be?
The recommended size is 1200 x 630 pixels at 72 DPI. This ratio looks correct on most social platforms. Use a PNG or JPEG under 1 MB for fast loading.
Is the description meta tag still a ranking factor?
Google does not use the description tag as a direct ranking signal, but a compelling description improves click-through rate in search results, which indirectly helps rankings.

Related Examples

/examples/html/meta-tagsv1.0.0