Bird
Raised Fist0
Astroframework~5 mins

Open Graph and social metadata in Astro

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Open Graph and social metadata help websites show nice previews when shared on social media. They tell platforms like Facebook or Twitter what title, image, and description to show.

You want your website link to look attractive when shared on Facebook or Twitter.
You want to control the title and description shown on social media previews.
You want to specify a custom image to represent your page on social platforms.
You want to improve how your site appears in messaging apps or search engines.
You want to add metadata for better SEO and social sharing experience.
Syntax
Astro
<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.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Your Page Title" />
  <meta name="twitter:description" content="A short description of your page." />
  <meta name="twitter:image" content="https://example.com/image.jpg" />
</head>

Use property attribute for Open Graph tags and name for Twitter tags.

Place these tags inside the <head> section of your HTML or Astro component.

Examples
Basic Open Graph tags for a homepage with title, description, image, and URL.
Astro
<head>
  <meta property="og:title" content="Welcome to My Site" />
  <meta property="og:description" content="Learn about my projects and blog posts." />
  <meta property="og:image" content="https://mysite.com/og-image.png" />
  <meta property="og:url" content="https://mysite.com" />
</head>
Open Graph and Twitter metadata for an article page with a smaller Twitter card.
Astro
<head>
  <meta property="og:title" content="Article Title" />
  <meta property="og:description" content="Summary of the article." />
  <meta property="og:image" content="https://mysite.com/article-image.jpg" />
  <meta property="og:url" content="https://mysite.com/article" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="Article Title" />
  <meta name="twitter:description" content="Summary of the article." />
  <meta name="twitter:image" content="https://mysite.com/article-image.jpg" />
</head>
Minimal Open Graph tags with just title and URL, useful if you don't have an image or description yet.
Astro
<head>
  <!-- Minimal Open Graph -->
  <meta property="og:title" content="Simple Page" />
  <meta property="og:url" content="https://simplepage.com" />
</head>
Sample Program

This Astro component sets Open Graph and Twitter metadata dynamically using variables. When shared, social sites show the title, description, and image you set here.

Astro
---
const pageTitle = "My Astro Blog";
const pageDescription = "Welcome to my blog where I share coding tips.";
const pageImage = "https://astroblog.com/og-image.jpg";
const pageUrl = "https://astroblog.com";
---
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{pageTitle}</title>
    <meta property="og:title" content={pageTitle} />
    <meta property="og:description" content={pageDescription} />
    <meta property="og:image" content={pageImage} />
    <meta property="og:url" content={pageUrl} />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content={pageTitle} />
    <meta name="twitter:description" content={pageDescription} />
    <meta name="twitter:image" content={pageImage} />
  </head>
  <body>
    <h1>{pageTitle}</h1>
    <p>{pageDescription}</p>
  </body>
</html>
OutputSuccess
Important Notes

Open Graph tags improve how your site looks when shared but do not affect the visible page content.

Always use absolute URLs (full links starting with https://) for images and URLs in metadata.

Common mistake: forgetting to add og:url or using relative URLs, which can cause preview errors.

Summary

Open Graph and social metadata control how your site appears on social media.

Use og: tags for Facebook and general social platforms, and twitter: tags for Twitter.

Place these tags inside the <head> section of your Astro pages for best results.

Practice

(1/5)
1. What is the main purpose of adding og: tags in an Astro page's <head> section?
easy
A. To control how the page appears when shared on social media platforms
B. To add custom fonts to the page
C. To improve the page's loading speed
D. To enable server-side rendering

Solution

  1. Step 1: Understand the role of og: tags

    og: tags are Open Graph tags used to define how content is displayed on social media.

  2. Step 2: Identify their placement and effect

    These tags go inside the <head> and control preview title, image, and description on social platforms.

  3. Final Answer:

    To control how the page appears when shared on social media platforms -> Option A

  4. Quick Check:

    Open Graph tags = social media preview control [OK]
Hint: Remember: og: tags shape social media previews [OK]
Common Mistakes:
  • Confusing og: tags with CSS or fonts
  • Thinking they improve page speed
  • Placing tags outside the <head> section
2. Which of the following is the correct syntax to add a Twitter card title in an Astro page's <head> section?
easy
A.
B.
C.
D.

Solution

  1. Step 1: Recall Twitter card meta tag syntax

    Twitter card tags use name="twitter:..." attribute, not property.

  2. Step 2: Check attribute order and correctness

    The correct syntax is <meta name="twitter:title" content="..." />. Attribute order does not affect validity but standard is name then content.

  3. Final Answer:

    <meta name="twitter:title" content="My Page Title" /> -> Option D

  4. Quick Check:

    Twitter card title uses name="twitter:title" [OK]
Hint: Twitter meta tags use name=, Open Graph uses property= [OK]
Common Mistakes:
  • Using property instead of name for Twitter tags
  • Mixing Open Graph and Twitter tag syntax
  • Incorrect attribute order causing confusion
3. Given this Astro page <head> snippet:
<meta property="og:title" content="Welcome" />
<meta property="og:description" content="Best site" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Welcome" />

What will be the title shown when this page is shared on Twitter?
medium
A. Welcome
B. Best site
C. summary_large_image
D. No title shown

Solution

  1. Step 1: Identify Twitter title meta tag

    The tag <meta name="twitter:title" content="Welcome" /> sets the Twitter card title.

  2. Step 2: Understand Twitter card behavior

    Twitter uses its own twitter:title tag over Open Graph og:title if present.

  3. Final Answer:

    Welcome -> Option A

  4. Quick Check:

    Twitter title = twitter:title content [OK]
Hint: Twitter uses twitter:title, not og:title, if both exist [OK]
Common Mistakes:
  • Assuming Twitter uses og:title instead of twitter:title
  • Confusing description or card type as title
  • Ignoring the presence of twitter:title tag
4. You added this meta tag in your Astro page's <head>:
<meta property="og:image" content="/images/preview.png">

But the image does not show on social shares. What is the likely problem?
medium
A. The tag is missing a closing slash />
B. The property attribute should be name
C. The content URL is relative; it should be an absolute URL
D. Open Graph tags cannot specify images

Solution

  1. Step 1: Check the image URL format

    Open Graph requires absolute URLs for images to display correctly on social platforms.

  2. Step 2: Verify tag correctness

    The tag uses correct property attribute and closing is optional in HTML5; the main issue is the relative URL.

  3. Final Answer:

    The content URL is relative; it should be an absolute URL -> Option C

  4. Quick Check:

    OG image URL must be absolute [OK]
Hint: Use full URLs for og:image to ensure visibility [OK]
Common Mistakes:
  • Using relative paths for og:image content
  • Confusing property and name attributes
  • Worrying about self-closing slash in HTML5
5. You want to set up social metadata in Astro so that:
- Facebook uses Open Graph tags
- Twitter uses Twitter card tags
- Both show the same title and description

Which is the best way to write these tags inside <head>?
hard
A.
B.
C.
D.

Solution

  1. Step 1: Use correct attributes for Open Graph and Twitter tags

    Open Graph tags use property="og:...", Twitter tags use name="twitter:...".

  2. Step 2: Ensure matching titles and descriptions for both

    Set the same content values for both sets of tags to keep consistency.

  3. Final Answer:

    Use property for og tags and name for twitter tags with matching content -> Option B

  4. Quick Check:

    OG = property, Twitter = name, same content [OK]
Hint: OG uses property=, Twitter uses name= for meta tags [OK]
Common Mistakes:
  • Mixing property and name attributes between OG and Twitter
  • Using different content values causing inconsistent previews
  • Omitting either OG or Twitter tags
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard