Resolved

Astro site missing SEO metadata for social sharing and rich search results

Astro
SEO
Frontend
Open Graph
Schema.org
Twitter Cards
TypeScript
JSON-LD

Portfolio built with Astro 5.15.4 lacked Open Graph, Twitter Cards and Schema.org structured data | Resulted in plain text social shares and no Google rich snippets despite having 418 content entries

An Astro-based portfolio website with 418 content entries lacked critical SEO metadata, leading to poor social media sharing and missing rich search results in Google.

Issue

The website displayed only basic <title> and <meta name="description"> tags, resulting in:

  • Plain text links without images or formatting when shared on social media platforms like Facebook, Twitter/X, and LinkedIn.
  • No rich snippets or article cards in Google search results, despite the content being of article type.
  • Ineligibility for Google News due to missing TechArticle schema markup.
  • Duplicate content risks across entries due to missing canonical URLs.
  • Google Rich Results Test reported no structured data detected for any pages.

Culprit

The project was built without consideration for critical SEO components, including:

  • Open Graph Protocol for social media sharing.
  • Twitter Cards for X/Twitter link previews.
  • Schema.org JSON-LD structured data for Google rich result understanding.
  • Site configuration to enable canonical URL generation.

The initial implementation included only minimal metadata in the MainHead.astro component.

Solution

Package Integration

The astro-seo package was integrated to provide:

  • Type-safe SEO components supporting Open Graph and Twitter Cards.
  • Automatic meta tag generation with TypeScript validation.
  • Article metadata handling for publication dates and authorship.

Component Overhaul

The MainHead.astro component was overhauled to dynamically generate SEO metadata, including:

  • Canonical URLs for each page.
  • Conditional article metadata for article-specific tags.
  • Absolute image URLs for consistent sharing.
  • Type detection for dynamic Open Graph type switching.

Schema.org JSON-LD Implementation

Structured data was added to dynamic routes, with two variants:

  • Work Entries: Marked as Article type with details like headlines, images, and publication dates.
  • Resolved Entries: Marked as TechArticle type to qualify for Google News eligibility.

Configuration Updates

Critical site URL configuration was added to astro.config.mjs to enable canonical URL generation.

Template Injection

Safe JSON-LD injection was implemented in Astro templates to ensure structured data was included in the final output.

Result: The implementation enabled rich social sharing, improved search results visibility, and ensured compliance with Google’s structured data requirements.