How I Built My Developer Portfolio with Next.js & SEO Optimization
Hey Dev community! π
I'm MD Nayeem Miah, a Full Stack Developer from Bangladesh π§π©
I recently built my portfolio and optimized it for SEO.
Here's what I learned!
π Tech Stack I Used
- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- Language: TypeScript
- Hosting: Vercel
- Animation: AOS (Animate On Scroll)
π§ SEO Optimizations I Did
1. Meta Tags
Added proper title, description, and keywords in layout.tsx
2. Open Graph & Twitter Cards
So my portfolio looks great when shared on social media!
3. JSON-LD Schema (ProfilePage)
{
"@context": "https://schema.org",
"@type": "ProfilePage",
"mainEntity": {
"@type": "Person",
"name": "MD Nayeem Miah",
"jobTitle": "Full Stack Web Developer",
"url": "https://nayeem-miah.vercel.app"
}
}
4. Sitemap & Robots.txt
Used next-sitemap package to auto-generate both!
5. Google Search Console
Submitted sitemap and verified ownership.
π Results After 24 Hours
β
Portfolio indexed on Google
β
10+ search clicks
β
Rich Results detected by Google
π Links
- π Portfolio: https://nayeem-miah.vercel.app
- π» GitHub: https://github.com/nayeem-miah
- πΌ LinkedIn: https://linkedin.com/in/md-nayeem-miah-734719307
π¬ What's Next?
- Adding Blog section
- Learning Microservices & Docker
- Building more open source projects
If you're building your portfolio, feel free to
check mine for inspiration!
Drop your portfolio link in the comments π
Let's connect! π€
Top comments (0)