Open Graph and social metadata in Astro - Step-by-Step Execution

Concept Flow - Open Graph and social metadata

Start: Define metadata in Astro component

↓

Add Open Graph tags in <head>

↓

Add Twitter card tags in <head>

↓

Build Astro page with metadata

↓

Browser reads metadata

↓

Social platform scrapes metadata

↓

Social preview shows title, image, description

This flow shows how you add Open Graph and social metadata in Astro, which browsers and social platforms read to create rich link previews.

Execution Sample

Astro

<head>
  <meta property="og:title" content="My Astro Site" />
  <meta property="og:description" content="Welcome to my site" />
  <meta property="og:image" content="/social-image.png" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

This code adds Open Graph and Twitter card metadata to the page head for social sharing previews.

Execution Table

Step	Action	Metadata Added	Browser Reads	Social Platform Reads
1	Start Astro page build	None yet	No metadata	No metadata
2	Add <meta property='og:title'>	og:title='My Astro Site'	Reads og:title	Reads og:title
3	Add <meta property='og:description'>	og:description='Welcome to my site'	Reads og:description	Reads og:description
4	Add <meta property='og:image'>	og:image='/social-image.png'	Reads og:image	Reads og:image
5	Add <meta name='twitter:card'>	twitter:card='summary_large_image'	Reads twitter:card	Reads twitter:card
6	Page fully built with metadata	All metadata present	Metadata available for preview	Metadata available for preview
7	Social platform scrapes page	Metadata used for preview	N/A	Preview shows title, description, image

💡 All metadata tags are added and read by browsers and social platforms to generate rich previews.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
og:title	undefined	"My Astro Site"	"My Astro Site"	"My Astro Site"	"My Astro Site"	"My Astro Site"
og:description	undefined	undefined	"Welcome to my site"	"Welcome to my site"	"Welcome to my site"	"Welcome to my site"
og:image	undefined	undefined	undefined	"/social-image.png"	"/social-image.png"	"/social-image.png"
twitter:card	undefined	undefined	undefined	undefined	"summary_large_image"	"summary_large_image"

Key Moments - 3 Insights

Why do we add both Open Graph and Twitter card metadata?

Because different social platforms read different tags: Open Graph is widely supported, but Twitter uses its own tags like twitter:card. Adding both ensures best preview on all platforms, as shown in execution_table steps 4 and 5.

What happens if we forget to add the og:image tag?

Social platforms may show no image or a default image in previews, making the link less attractive. Execution_table step 4 shows when og:image is added, so missing it means previews lack images.

Can browsers see this metadata when loading the page?

Yes, browsers read the metadata in the <head> but usually don't display it. Social platforms scrape it to create previews. Execution_table step 6 shows metadata is available after page build.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what metadata is added?

A twitter:card with content 'summary_large_image'

B og:title with content 'My Astro Site'

C og:description with content 'Welcome to my site'

D og:image with content '/social-image.png'

💡 Hint

Check the 'Metadata Added' column at step 3 in execution_table.

At which step does the twitter:card metadata get added?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for twitter:card in the 'Metadata Added' column in execution_table.

If we remove the og:image tag, what changes in variable_tracker?

A og:image remains undefined throughout

B og:image gets a default value

C twitter:card becomes undefined

D og:title becomes undefined

💡 Hint

Check the 'og:image' row in variable_tracker to see its values.

Concept Snapshot

Open Graph and social metadata are <meta> tags in the <head> of your Astro page.
Use og:title, og:description, og:image for rich previews.
Add twitter:card for Twitter-specific previews.
Browsers read these tags but social platforms use them to show link previews.
Always include image and description for best social sharing.

Full Transcript

This visual execution shows how Open Graph and social metadata are added step-by-step in an Astro page. First, the page starts without metadata. Then og:title is added, followed by og:description, og:image, and twitter:card tags. Browsers read these tags but mainly social platforms scrape them to create rich previews with title, description, and image. The variable tracker shows how each metadata variable is undefined at start and then set as tags are added. Key moments clarify why both Open Graph and Twitter tags are needed, the importance of the image tag, and how browsers interact with metadata. The quiz tests understanding of when tags are added and their effects. This helps beginners see the flow from code to social preview.

Practice

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