How i achieved 100% SEO ( Search Engine Optimization Score ) in my Portfolio Website

Table of contents
- 🔍 What is SEO?
- 🌟 My SEO Results
- 🛠️ Tech Stack Used
- ✅ My Complete SEO Optimization Strategy
- 1. 📌 Page Titles & Meta Tags
- 2. 🌐 Custom Domain + HTTPS
- 3. 📱 Mobile-Friendly Design
- 4. ⚡ Performance + Core Web Vitals
- 5. 📄 Sitemap & robots.txt
- 6. 🔍 Open Graph & Twitter Tags
- 7. 🔗 Canonical Tags & URL Structure
- 8. 🏷️ Semantic HTML & Accessibility
- 9. 🕸️ Internal Linking
- 10. 🌍 External Backlinks & Social Signals
- 11. 📈 Google Analytics :
- 🧱 AWS Amplify Build Setup (Sample)
- 🎨 Animations with Framer Motion (SEO Friendly)
- 🧠 Final Thoughts
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:
vite-plugin-html for static pages
react-helmet for dynamic pages and routing
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
Built a responsive layout using Tailwind CSS.
Tested on:
Utility classes like sm:, md:, lg: made responsiveness easy.
4. ⚡ Performance + Core Web Vitals
Vite helped reduce bundle size and improve loading speed.
Optimizations included:
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:
Added in the /dist directory for Amplify builds
Verified via Google Search Console
6. 🔍 Open Graph & Twitter Tags
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" />
7. 🔗 Canonical Tags & URL Structure
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
- Linked pages like:
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:
Source directory: /
Build command: npm run build
Output directory: dist/
✅ 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.
Subscribe to my newsletter
Read articles from KINSHUK JAIN directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

KINSHUK JAIN
KINSHUK JAIN
✨Likes to Build and scale amazing stuff .. 🌐 checkout my site : https://cloudkinshuk.in 📝 checkout my blog : https://blog.cloudkinshuk.in Link 🖇️