Basic Meta Tags

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title - Site Name</title>
  <meta name="description" content="Page description (around 120 characters)" />
  <link rel="canonical" href="https://example.com/page" />
</head>

OGP Tags

<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />

Sharing Tags Across Pages via a Layout Component

---
const { title, description } = Astro.props;
---
<html>
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body><slot /></body>
</html>

Gotchas

  • A description of around 120–160 characters is recommended
  • Omitting the canonical tag may cause your content to be treated as a duplicate

To further strengthen your SEO, combine this with auto-generating robots.txt and sitemap in Astro to properly control how search engines crawl your site.

  • Fiverr - Find freelance developers and tech experts