Overview
This portfolio implements comprehensive SEO best practices including metadata optimization, Open Graph tags, Twitter Cards, structured data, sitemap generation, and robots.txt configuration.Metadata Configuration
The base metadata is configured insrc/app/layout.tsx using Next.js App Router metadata API.
Root Layout Metadata
Key Metadata Components
| Property | Purpose | SEO Impact |
|---|---|---|
title | Page title in search results | High - Primary ranking signal |
description | Meta description snippet | High - Affects click-through rate |
keywords | Search keywords | Low - Mostly deprecated |
metadataBase | Base URL for relative URLs | Medium - Ensures correct URLs |
canonical | Prevent duplicate content | High - Consolidates page authority |
robots | Control indexing | High - Visibility control |
The metadata uses content from a JSON file, making it easy to manage multilingual SEO content.
Open Graph Tags
Open Graph tags control how your portfolio appears when shared on social media platforms like Facebook, LinkedIn, and Slack.Implementation
Open Graph Image Requirements
Test Preview
Use Open Graph Debugger to preview how it looks.
Twitter Card Configuration
Twitter Cards provide rich previews when your portfolio is shared on Twitter/X.Implementation
Twitter Card Types
- summary: Small card with thumbnail
- summary_large_image: Large card with prominent image (recommended for portfolios)
- app: Mobile app card
- player: Video/audio player card
Testing Twitter Cards
- Visit Twitter Card Validator
- Enter your portfolio URL
- Preview how it appears on Twitter
- Make adjustments to title, description, or image as needed
The same OG image works for both Open Graph and Twitter Cards, reducing file duplication.
Sitemap Generation
The sitemap helps search engines discover and index all pages on your portfolio.Dynamic Sitemap
Sitemap Properties
| Property | Description | Values |
|---|---|---|
url | Full URL of the page | Must include domain |
lastModified | When the page was last updated | Date object |
changeFrequency | How often the page changes | always, hourly, daily, weekly, monthly, yearly, never |
priority | Relative importance | 0.0 to 1.0 |
Expanding Your Sitemap
For a portfolio with dynamic content (blog posts, projects), generate sitemap entries dynamically:Robots.txt Configuration
Therobots.txt file tells search engine crawlers which pages they can access.
Implementation
Robots.txt Rules
Allow All (Current Configuration):Structured Data (JSON-LD)
Structured data helps search engines understand your content and can enable rich results in search.Person Schema
Additional Schema Types for Portfolios
Performance Optimization for SEO
Page speed is a ranking factor. Here’s how this portfolio optimizes performance:Image Optimization
next.config.ts
- Use WebP format for images
- Implement Next.js Image component for automatic optimization
- Use lazy loading for below-the-fold images
- Serve images from CDN (Cloudinary)
Code Splitting
- Next.js automatically splits code by route
- Use dynamic imports for heavy components
- Turbopack in development for faster builds
Font Optimization
- Self-hosted fonts (no external requests)
- Automatic font subsetting
- Font display optimization
Next.js App Router provides automatic optimizations for fonts, reducing layout shift and improving Core Web Vitals.
Portfolio SEO Best Practices
Content Optimization
Technical SEO Checklist
- HTTPS enabled (required for modern web)
- Mobile-responsive design
- Fast page load times (< 3 seconds)
- Sitemap submitted to search engines
- Robots.txt configured correctly
- Structured data implemented
- Canonical URLs set
- Open Graph tags present
- Twitter Card tags present
- Favicon and app icons configured
Portfolio-Specific SEO Tips
- Project Pages: Create individual pages for major projects with detailed descriptions
- Skills Section: Include relevant technology keywords naturally
- About Page: Write a comprehensive bio with your expertise and location
- Contact Information: Make it easy for recruiters to reach you
- Case Studies: Document your problem-solving process to rank for technical queries
- Blog Posts: Write technical articles to establish expertise
Monitoring SEO Performance
Google Search Console
Key Metrics to Track
- Organic Traffic: Visitors from search engines
- Search Impressions: How often your site appears in search
- Click-Through Rate: Percentage of impressions that result in clicks
- Average Position: Where your pages rank for specific queries
- Core Web Vitals: Performance metrics (LCP, FID, CLS)
SEO Tools
- Google Search Console: Official Google insights
- Google Analytics: Traffic analysis and user behavior
- Lighthouse: Performance and SEO auditing
- PageSpeed Insights: Detailed performance recommendations
- Bing Webmaster Tools: Bing search visibility
Troubleshooting SEO Issues
Page Not Indexed
- Check
robots.txtisn’t blocking the page - Verify the page is in your sitemap
- Check for
noindexmeta tags - Submit URL for indexing in Search Console
Poor Rankings
- Analyze competitor content and metadata
- Improve page content quality and length
- Add more relevant keywords naturally
- Build quality backlinks to your portfolio
- Improve page load speed
Missing Rich Results
- Validate structured data with Rich Results Test
- Check for JSON-LD syntax errors
- Ensure required properties are present
- Wait for Google to recrawl (can take weeks)
Next Steps
- Submit to Search Engines: Add your portfolio to Google Search Console and Bing Webmaster Tools
- Create Content: Write blog posts or case studies about your projects
- Build Backlinks: Share your portfolio on professional networks
- Monitor Performance: Regularly check analytics and search console data
- Keep Updated: Update metadata when you complete new projects or learn new skills