AstroHow-ToBeginner · 3 min read

How to Add OG Tags in Astro for Social Sharing

In Astro, add Open Graph (OG) tags by placing <meta property="og:title" content="Your Title" /> and similar tags inside the <head> section of your page or layout. Use Astro's <head> component or the export const head syntax to include these tags for social media previews.

📐

Syntax

OG tags are meta tags with property attributes starting with og:. They go inside the HTML <head> section. In Astro, you can add them directly in your page or layout's <head> block or use the export const head syntax to define them.

<meta property="og:title" content="Page Title" />: Sets the title shown on social media.
<meta property="og:description" content="Page description" />: Sets the description.
<meta property="og:image" content="URL" />: Sets the preview image.
<meta property="og:url" content="Page URL" />: Sets the canonical URL.

html

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A short description of your page." />
  <meta property="og:image" content="https://example.com/image.png" />
  <meta property="og:url" content="https://example.com/page" />
</head>

💻

Example

This example shows how to add OG tags inside an Astro page using the <head> component. When this page renders, social media sites will use these tags for previews.

astro

---
// src/pages/index.astro
export const head = {
  title: "Home Page",
  meta: [
    { property: "og:title", content: "Welcome to My Site" },
    { property: "og:description", content: "This is the best site ever." },
    { property: "og:image", content: "https://example.com/og-image.png" },
    { property: "og:url", content: "https://example.com/" }
  ]
};
---
<html lang="en">
  <head>
    <title>Home Page</title>
    {head.meta.map(({property, content}) => (
      <meta property={property} content={content} />
    ))}
  </head>
  <body>
    <h1>Welcome to My Site</h1>
  </body>
</html>

Output

⚠️

Common Pitfalls

Common mistakes when adding OG tags in Astro include:

Placing OG tags outside the <head> section, so social media bots can't find them.
Using name instead of property attribute for OG tags, which breaks recognition.
Forgetting to provide a full URL for og:image and og:url, which can cause preview errors.
Not updating OG tags dynamically for different pages, leading to incorrect previews.

Always ensure OG tags are inside <head> with correct attributes and full URLs.

html

<!-- Wrong way: using name instead of property -->
<head>
  <meta name="og:title" content="Wrong Title" />
</head>

<!-- Right way: use property attribute -->
<head>
  <meta property="og:title" content="Correct Title" />
</head>

📊

Quick Reference

Use these OG tags for basic social sharing:

OG Tag	Purpose	Example
og:title	Title shown on social media
og:description	Short description
og:image	Image URL for preview
og:url	Canonical page URL

✅

Key Takeaways

Add OG tags inside the section using syntax.

Use full URLs for og:image and og:url to ensure correct social previews.

Avoid using the name attribute; always use property for OG tags.

Define OG tags per page to customize social sharing previews.

In Astro, you can use the export const head syntax or place tags directly in the .