# 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:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1747678707984/5c136fa8-ac49-4c1a-97f5-e20c9024858e.png align="center")

---

### **🛠️ 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.

```cpp
<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 &lt;link rel="canonical" href="https://myportfolio.com/about" /&gt;
    
* Clean, hyphenated, lowercase URLs (no query strings for static pages)
    

---

### **8\. 🏷️ Semantic HTML & Accessibility**

* Used semantic tags: &lt;header&gt;, &lt;main&gt;, &lt;footer&gt;, etc.
    
* One &lt;h1&gt; 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**](http://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)**

```cpp
"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.

---