Posted on Jul 7

🚀 Boost Your React Website's SEO: 3 Essential Ingredients for Beginners

Hey there! I got my portfolio at mrzaizai2k.xyz to score a perfect 100/100 on Lighthouse’s SEO test, and I’m excited to share how you can do it too! No tech wizardry needed—just three simple steps even beginners can follow. Plus, stick around for a bonus tip on making your site super fast. Let’s dive into my setup from my GitHub repo!

📋 Table of Contents

🔍 Optimize Meta Tags

Why It Matters: Meta tags are your site’s ID card for search engines. They describe your content, boost click-through rates, and make your site stand out on social media. Without them, Google might misinterpret your site, tanking your rank.

Here’s my setup in frontend/public/index.html, broken down:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Sets UTF-8 encoding for universal character support --> <link rel="icon" href="%PUBLIC_URL%/favicon.png" /> <!-- Defines the favicon displayed in browser tabs --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Ensures responsive design for mobile devices --> <meta name="theme-color" content="#000000" /> <!-- Sets browser UI color (e.g., address bar on mobile) --> <meta name="description" content="Portfolio of Mai Chi Bao (Mrzaizai2k) showcasing projects in AI, machine learning stuff and my information." /> <!-- Summarizes site content for search engine snippets (keep under 160 chars) --> <meta name="keywords" content="AI, machine learning, React.js, Python, portfolio, web development, computer vision, NLP, MLOps" /> <!-- Lists relevant keywords for search engine indexing --> <meta name="robots" content="index, follow" /> <!-- Instructs bots to index the site and follow links --> <meta name="author" content="Mai Chi Bao (Mrzaizai2k)" /> <!-- Credits the site’s creator --> <link rel="canonical" href="https://mrzaizai2k.xyz" /> <!-- Specifies the preferred URL to avoid duplicate content issues --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Links to web app manifest for progressive web app features --> <title>Mrzaizai2k | Portfolio</title> <!-- Sets the page title displayed in search results and tabs --> <!-- Google / Search Engine Tags --> <meta itemprop="name" content="Mrzaizai2k | Portfolio"> <meta itemprop="description" content="Portfolio of Mai Chi Bao (Mrzaizai2k) showcasing projects in AI, machine learning stuff and my information."> <meta itemprop="image" content="https://raw.githubusercontent.com/mrzaizai2k/Portfolio/master/frontend/src/Assets/profile.png"> <!-- Structured data for Google’s rich snippets --> <!-- Facebook Meta Tags --> <meta property="og:url" content="https://mrzaizai2k.xyz"> <meta property="og:type" content="website"> <meta property="og:title" content="Mrzaizai2k | Portfolio"> <meta property="og:description" content="Portfolio of Mai Chi Bao (Mrzaizai2k) showcasing projects in AI, machine learning stuff and my information."> <meta property="og:image" content="https://raw.githubusercontent.com/mrzaizai2k/Portfolio/master/frontend/src/Assets/profile.png"> <!-- Open Graph tags for Facebook and other social media previews --> <!-- Twitter Meta Tags --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Mrzaizai2k | Portfolio"> <meta name="twitter:description" content="Portfolio of Mai Chi Bao (Mrzaizai2k) showcasing projects in AI, machine learning stuff and my information."> <meta name="twitter:image" content="https://raw.githubusercontent.com/mrzaizai2k/Portfolio/master/frontend/src/Assets/profile.png"> <!-- Twitter-specific tags for card-style previews --> <!-- Schema.org JSON-LD --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Person", "name": "Mai Chi Bao (Mrzaizai2k)", "url": "https://mrzaizai2k.xyz", "sameAs": [ "https://github.com/mrzaizai2k", "https://www.linkedin.com/in/baochiwork/", "https://www.youtube.com/@mrzaizai2k-ai704", "https://www.youtube.com/@mrzaizai2k160", "https://mrzaizai2k.github.io/", "https://www.kaggle.com/maichibao", "https://www.upwork.com/freelancers/~012aa38f4e6f69e36b?mp_source=share" ], "jobTitle": "AI/ML Engineer", "description": "Portfolio of Mai Chi Bao (Mrzaizai2k) showcasing projects in AI, machine learning stuff and my information." } </script> <!-- Structured data for better search engine understanding --> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html>

Tip: Add these to your <head>. Keep descriptions concise, use targeted keywords, and include social tags for better sharing. Check my index.html.

🗺️ Set Up a Sitemap

Why It Matters: A sitemap is a roadmap for search engines, ensuring they find and index all your key pages. Without one, some pages might be overlooked, hurting your rankings.

Here’s my frontend/public/sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>https://mrzaizai2k.xyz/</loc> </url> <url> <loc>https://mrzaizai2k.xyz/about</loc> </url> <url> <loc>https://mrzaizai2k.xyz/projects</loc> </url> <url> <loc>https://mrzaizai2k.xyz/resume</loc> </url> </urlset>

Tip: Create a sitemap.xml in your public folder, list all key URLs, and submit it to Google Search Console. Link it in robots.txt for easy discovery. See my sitemap.

🤖 Configure Robots.txt

Why It Matters: The robots.txt file tells search engine bots what to crawl or skip. It prevents indexing of irrelevant files (like images) and points bots to your sitemap, optimizing crawl efficiency.

Here’s my frontend/public/robots.txt:

# https://www.robotstxt.org/robotstxt.html User-agent: * Allow: / Allow: /about Allow: /projects Allow: /resume Disallow: /images/ Disallow: /manifest.json Disallow: /favicon.png Sitemap: https://mrzaizai2k.xyz/sitemap.xml

Tip: Place robots.txt in your public folder. Use Allow for indexable pages and Disallow for assets. Reference your sitemap. Check my robots.txt.

🏗️ Improve Site Structure

Why It Matters: A clear site structure with clean URLs and canonical tags helps search engines understand your content, prevents duplicate content issues, and improves user experience and rankings.

My portfolio uses clean URLs (/about, /projects) and a canonical tag in index.html.

Tip: Use descriptive URLs, add <link rel="canonical">, and set up React Router for SEO-friendly navigation, as suggested in Toptal’s guide.

🎯 Make Your Site Faster

Want your site to load quickly and keep visitors happy? Speed is a huge factor for SEO and user experience. In my next post, I’ll share practical tips to make your React site faster, like optimizing images, splitting code, and lazy loading.

👉 Follow me for more helpful tips!

💬 Drop a comment if this was useful.

🌟 Check out my GitHub repo.

🌐 Visit my site: mrzaizai2k.xyz.

References

🔗 My GitHub Repo: mrzaizai2k/Portfolio/

🔗 Toptal: React SEO Strategies and Best Practices