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.

Format HTML Meta Tags

The meta tags inside a page's head element are invisible to visitors but critically important to search engines, social media platforms, and browsers. Getting them right is one of the highest-leverage technical SEO tasks because they directly control how your page appears in Google search results and how it looks when someone shares a link on LinkedIn, Twitter, Slack, or Facebook. This example covers all the essential meta tags that every production web page should include. The charset and viewport meta tags are foundational: charset="UTF-8" ensures the browser correctly decodes international characters, and the viewport tag with content="width=device-width, initial-scale=1.0" enables responsive design by telling mobile browsers not to zoom out to fit a desktop-sized layout. Without the viewport tag, your carefully crafted responsive CSS is ignored and mobile users see a miniaturized desktop page. Open Graph tags (og:*) control how your page appears when shared on Facebook, LinkedIn, WhatsApp, Slack, and many other platforms. og:title is the bolded headline of the share card, og:description is the text below it, og:image is the preview thumbnail, and og:url is the canonical URL for tracking. Together they determine whether your shared link looks professional and compelling or just displays a raw URL with no preview. Twitter Card tags (twitter:card, twitter:title, etc.) serve the same purpose for Twitter/X. summary_large_image shows a full-width image above the title, which significantly increases engagement compared to the default summary format with a small image. The canonical link element is crucial for SEO: it tells search engines which URL is the authoritative version of the page. When the same content is accessible at multiple URLs (with/without trailing slash, with/without www, via different query parameters), the canonical tag consolidates their ranking signals to the single preferred URL and prevents duplicate content penalties. Real-world impact: pages with properly sized og:image (1200×630 pixels) and compelling og:description see significantly higher click-through rates when shared on social media compared to pages with missing or default Open Graph tags that display a generic preview. Tips: test your Open Graph tags using the Facebook Sharing Debugger and LinkedIn Post Inspector. Use absolute URLs in og:image and canonical href — relative URLs are not supported by all scrapers.

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

Format a Semantic HTML Page Structure

Semantic HTML is the practice of choosing HTML elements based on the meaning the...

Format an HTML Form with Validation

HTML5's built-in form validation attributes provide instant client-side feedback...

Format an HTML CSS Grid Layout

CSS Grid is the modern two-dimensional layout system that has transformed how de...