This article focuses on how you can improve the SEO of your website—not just your portfolio, but any web project you're building.
🔍 What is SEO?
SEO stands for Search Engine Optimization. It’s the process of improving a website to rank higher in search engines like Google, Bing, or Yahoo.
Imagine search engines as librarians. When someone asks, "What’s the best book on dinosaurs?", the librarian picks the most relevant one. Search engines do the same for websites.
If you search "how to make chocolate cake", you’ll get millions of results—but most users only click on the first 5–10 links. If your website doesn’t rank in that top section, it’s unlikely people will even see it.
That’s why SEO is crucial: Higher rank = More visibility = More traffic = More impact.
🌟 My SEO Results
I achieved a 100% SEO score on Google Lighthouse for my personal portfolio. Here’s a snapshot from my website and you can check google page insights:
🛠️ Tech Stack Used
Vite : Fast bundling & dev server
TypeScript : Type-safe development
React : Component-based architecture
Framer Motion :Animations & micro-interactions
Tailwind CSS : Responsive utility-first CSS framework
React Icons : Lightweight vector icons
AWS Amplify : Hosting with CI/CD and free SSL
AWS Route 53 : DNS and custom domain setup
Hostinger : Domain name purchase
✅ My Complete SEO Optimization Strategy
1. 📌 Page Titles & Meta Tags
Unique <title> and <meta description> for each page.
Focused keywords used naturally (no keyword stuffing).
<meta name="robots" content="index, follow"> added for crawlability.
Tools Used:
2. 🌐 Custom Domain + HTTPS
Domain purchased via Hostinger.
Connected to AWS Route 53 and hosted on AWS Amplify.
Free SSL (HTTPS) enabled by Amplify.
✅ Boosts trust, SEO ranking, and fulfills Google’s secure site requirements.
3. 📱 Mobile-Friendly Design
Utility classes like sm:, md:, lg: made responsiveness easy.
Verified with Google Lighthouse:
✅ LCP (Largest Contentful Paint)
✅ FID (First Input Delay)
✅ CLS (Cumulative Layout Shift)
5. 📄 Sitemap & robots.txt
Created and hosted manually:
How:
Boosts how your site looks when shared on social media.
<meta property="og:title" content="Kinshuk Jain | Cloud & DevOps Enthusiast" />
<meta property="og:description" content="Explore my projects, skills, and blogs." />
<meta property="og:image" content="https://myportfolio.com/preview.png" />
<meta property="og:url" content="https://myportfolio.com" />
<meta name="twitter:card" content="summary_large_image" />
Used <link rel="canonical" href="https://myportfolio.com/about" />
Clean, hyphenated, lowercase URLs (no query strings for static pages)
8. 🏷️ Semantic HTML & Accessibility
Used semantic tags: <header>, <main>, <footer>, etc.
One <h1> per page, followed by logical heading structure.
Added alt tags to all images.
Used aria-labels and ensured full keyboard navigation.
9. 🕸️ Internal Linking
Helps Google bots and users easily navigate the site.
10. 🌍 External Backlinks & Social Signals
Shared the portfolio on:
LinkedIn bio
GitHub profile
Dev.to / Hashnode blogs
✅ Helps Google discover and crawl your website faster.
11. 📈 Google Analytics :
- Connected Google Analytics to monitor:
🧱 AWS Amplify Build Setup (Sample)
"scripts": {
"build": "vite build"
}
In Amplify Console:
✅ Ensure robots.txt and sitemap.xml are inside /dist before build.
🎨 Animations with Framer Motion (SEO Friendly)
Used animations like initial, whileInView, animate
Avoided hiding important content during animations
Made sure text and layout appeared early (for good LCP score)
🧠 Final Thoughts
As a student, this project taught me not just how to build a website—but how to make it visible and optimized for real-world users. Whether you're creating a personal blog, project site, or portfolio, following these SEO techniques will definitely help improve your site’s visibility, performance, and user trust.
