AstroHow-ToBeginner · 4 min read

How to Add Meta Tags in Astro for SEO and Social Sharing

In Astro, you add meta tags inside the section of your component using standard HTML tags. You can place them directly in your .astro file within the block or use the component to organize metadata for SEO and social sharing.

📐

Syntax

Meta tags are added inside the <head> section of your Astro component. Use standard HTML <meta> tags with attributes like name, content, and property for Open Graph tags.

Example parts:

<head>: Defines the head section of the page.
<meta name="description" content="..." />: Adds a description meta tag.
<meta property="og:title" content="..." />: Adds Open Graph meta tag for social sharing.

astro

<head>
  <meta name="description" content="Page description here" />
  <meta property="og:title" content="Page Title" />
</head>

💻

Example

This example shows a complete Astro component with meta tags for description, viewport, and Open Graph title. It demonstrates how to add meta tags inside the <head> block to improve SEO and social sharing previews.

astro

---
// No frontmatter needed for this example
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="This is a sample Astro page with meta tags." />
    <meta property="og:title" content="Sample Astro Page" />
    <title>Sample Astro Meta Tags</title>
  </head>
  <body>
    <h1>Hello, Astro!</h1>
    <p>This page includes meta tags in the head.</p>
  </body>
</html>

Output

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="This is a sample Astro page with meta tags."> <meta property="og:title" content="Sample Astro Page"> <title>Sample Astro Meta Tags</title> </head> <body> <h1>Hello, Astro!</h1> <p>This page includes meta tags in the head.</p> </body> </html>

⚠️

Common Pitfalls

Common mistakes when adding meta tags in Astro include:

Placing meta tags outside the <head> section, which means they won't be recognized by browsers or search engines.
Forgetting to add the charset or viewport meta tags, which can cause display issues on different devices.
Using duplicate meta tags that can confuse search engines.
Not updating meta tags dynamically when using Astro components for multiple pages.

Always ensure meta tags are inside the <head> and unique per page.

astro

<!-- Wrong: meta tag outside head -->
<html>
  <head></head>
  <body>
    <meta name="description" content="Wrong placement" />
    <h1>Page</h1>
  </body>
</html>

<!-- Right: meta tag inside head -->
<html>
  <head>
    <meta name="description" content="Correct placement" />
  </head>
  <body>
    <h1>Page</h1>
  </body>
</html>

📊

Quick Reference

Summary tips for adding meta tags in Astro:

Always place meta tags inside the <head> section.
Use name attribute for standard meta tags like description and viewport.
Use property attribute for Open Graph tags like og:title and og:description.
Include essential tags: charset, viewport, description, and social sharing tags.
Update meta tags dynamically if your site has multiple pages with different content.

✅

Key Takeaways

Add meta tags inside the section of your Astro component for proper SEO and browser recognition.

Use standard HTML tags with appropriate attributes like name and property for different meta information.

Include essential meta tags such as charset, viewport, description, and Open Graph tags for social sharing.

Avoid placing meta tags outside the head or duplicating them to prevent SEO issues.

Update meta tags dynamically when building multi-page sites to reflect page-specific content.