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

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.

---