SEO Enhancement - agiusalexandre.com

The Problem

My blog posts weren’t appearing correctly in search results. When shared on social media, they showed generic previews instead of article-specific information. The site lacked the meta infrastructure that search engines and social platforms need to properly index and display content.

The Solution

Built a dedicated BlogLayout.astro component that wraps blog posts with comprehensive SEO infrastructure:

• Open Graph tags for Facebook/LinkedIn previews
• Twitter Card tags for Twitter previews
• JSON-LD structured data for Google rich snippets
• Canonical URLs to prevent duplicate content issues

How It Works

The JSON-LD structured data provides rich context to search engines:

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": title,
  "description": description,
  "image": ogImage,
  "datePublished": isoDate,
  "dateModified": isoDate,
  "author": {
    "@type": "Person",
    "name": authorName,
    "url": authorLinkedIn,
    "jobTitle": "Senior Solutions Architect",
    "worksFor": {
      "@type": "Organization",
      "name": "Amazon Web Services"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": canonicalUrl
  }
};

Open Graph tags ensure proper social sharing previews:

<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />

<!-- Article specific Open Graph -->
<meta property="article:published_time" content={isoDate} />
<meta property="article:author" content={authorLinkedIn} />
{tags.map(tag => (
  <meta property="article:tag" content={tag} />
))}

Key Files Changed

File	Change
src/layouts/BlogLayout.astro	New SEO-optimized layout with full meta tags
src/pages/blog/[...slug].astro	Updated to use BlogLayout

What I Learned

• Astro’s component model works well for SEO — The layout system allows centralized SEO configuration while keeping individual pages clean
• JSON-LD is straightforward to implement — Using JavaScript objects that serialize to JSON makes structured data easy to maintain
• Article-specific OG tags matter — article:published_time and article:tag provide richer context than generic og: tags

Do It Yourself

Key takeaways

• JSON-LD structured data is straightforward — Using JavaScript objects that serialize to JSON makes schema.org markup easy to maintain and validate without manual tag construction.
• Article-specific OG tags provide richer context — Beyond generic Open Graph tags, article:published_time and article:tag help platforms understand your content type and improve social previews.
• Astro’s layout system centralizes SEO — Component-based layouts let you define meta tags once and apply them consistently across all blog posts without repetition.

Try it now

1. Validate your structured data: Use Google’s Rich Results Test to check if your blog posts appear correctly in search engine previews and identify any schema.org errors.

2. Add a sitemap to your Astro site: Install the official @astrojs/sitemap integration with npx astro add sitemap to automatically generate a sitemap.xml for search engines.

3. Test social media previews: Share your blog posts in LinkedIn Post Inspector and Twitter Card Validator to see exactly how your Open Graph tags render.

---