A Andres Hernandez
Astro HTML

Optimizing Personal Portfolios: SEO and Social Presence in Astro

Improving Discoverability

When maintaining a personal portfolio, the technical quality of the code is only half the battle. Your work needs to be discoverable by search engines and easily accessible to professional networks. In the latest updates to the Astro-portfolio project, I focused on bridging that gap.

The Challenge

While the site was functionally complete, it lacked two critical components for visibility:

  • Inconsistent social media integration
  • Unoptimized metadata for search engine indexing

The Solution

I updated the portfolio's configuration to include standardized social profile links and enhanced the SEO metadata implementation. In Astro, this is best handled by centralizing metadata within site-wide layout components.

--- 
// Example of centralized SEO management in Astro
const { title, description } = Astro.props;
---
<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:title" content={title} />
  <link rel="canonical" href="https://example.com/" />
</head>

Key Decisions

  1. Standardized Links: By adding a direct LinkedIn reference, we ensure that recruiters and peers have a clear path to professional verification.
  2. Declarative Metadata: Leveraging Astro's component props allows us to pass page-specific SEO data upwards, ensuring search crawlers get accurate information for every route.

Results

  • Improved alignment with professional networking platforms
  • Enhanced crawlability for search engines
  • Cleaner component architecture for future metadata expansion

Lessons Learned

SEO isn't a one-time task; it's a structural requirement. By incorporating these changes directly into the project's base layout, we reduce the friction of updating metadata for future portfolio items.


Generated with Gitvlg.com

Optimizing Personal Portfolios: SEO and Social Presence in Astro
Andres Hernandez

Andres Hernandez

Author

Share: