SEO-Optimize a Live Website

Build and deploy a website, then optimize it to score 100% on Lighthouse SEO.

Introduction

30 Second Summary

Every day, billions of people type questions into Google. The websites that show up on page one are not there by accident. They follow a set of rules that help search engines understand what the page is about and who it is for.

In this project, you will build a personal landing page from scratch, deploy it live on the internet, and optimize it so search engines can perfectly understand and index your content.

What You'll Build

You will run a professional SEO audit on your own live website, watch it climb from a failing score to a perfect 100%, and then submit it to Google so real people can find it in search results.

By the end of this project, you'll have:

  • A live personal landing page at your own HTTPS URL that anyone on the internet can visit, deployed for free on GitHub Pages.
  • A page with proper meta tags, semantic HTML structure, and Open Graph social sharing tags that scores 100% on a Google Lighthouse SEO audit.
  • Technical SEO files (robots.txt and sitemap.xml) that guide search engine crawlers through your site.
  • Secret Mission: Submit your site to Google Search Console and request real indexing from Google.

Are there any prerequisites?

Nope. This guide walks you through setting up every tool you need from scratch, including VS Code, a GitHub account, and Google Chrome. All you need is a Windows PC with a web browser.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters. Understanding the goal upfront helps you see how every step connects to making your page discoverable by search engines.

Set Up Your Tools

Every website needs two things: somewhere to write the code and somewhere to publish it online.

In this step, you'll install VS Code as your code editor and create a GitHub account where your website files will live.

In this step, get ready to:
  • Install VS Code on your Windows PC.
  • Create a free GitHub account.
  • Create a public repository for your website files.
Install VS Code

VS Code is a free code editor from Microsoft. You'll use it to write and edit your website's HTML and CSS files.

  • Open Google Chrome on your PC.
  • Go to code.visualstudio.com.
  • Click the Download for Windows button.
  • Once the download finishes, double-click the installer file to run it.
  • Follow the prompts in the installer, accepting the default settings at each screen.
  • When the installer finishes, leave the Launch Visual Studio Code checkbox ticked and click Finish.

VS Code opens on your screen. You should see the Welcome tab in the editor.

VS Code didn't open?

If VS Code didn't launch automatically, press the Windows key on your keyboard to open the search bar, type Visual Studio Code, and press Enter to open it.

If nothing appears in search results, the installer may not have completed. Re-download from code.visualstudio.com and try again.

Help me troubleshoot this

Create your GitHub account

GitHub is the platform where you'll store your website files and publish them to the internet for free.

  • In Chrome, go to github.com.
  • Click Sign up.
  • Enter your email address, create a password, and choose a username.
  • Complete the verification puzzle and confirm your email when prompted.
  • When asked about personalisation options, you can skip them for now.

You land on the GitHub dashboard. Your account is ready to use.

Pick a professional username

Your GitHub username becomes part of your website's public URL. Choose something short and recognisable that you would be happy sharing on a CV.

Didn't receive the verification email?

Check your spam or junk folder. If the email still hasn't arrived after a couple of minutes, click the Resend button on GitHub's verification page.

Help me figure out what to do next

Create a public repository

A repository is a folder on GitHub that holds all the files for a project. You need one to store your website's code.

  • On the GitHub dashboard, click the green New button (or in the upper-right corner, open the + menu and select New repository).
  • In the Repository name field, type my-site.
  • Leave the Description field empty for now.
  • Make sure Public is selected (not Private). This is required for free web hosting later.
  • Tick the Add a README file checkbox.
  • Click Create repository.

What is a README?

A README file is a text document that describes your project. GitHub displays its contents on the front page of your repository automatically.

Adding one during repository creation also initialises the repository with a first file, which makes it ready to use immediately.

Before you check the result, what do you expect to see on the page that loads?

GitHub takes you to your new repository's main page. You should see a file called README.md listed, along with your repository name my-site at the top of the page.

Don't see a README.md file?

If the repository page is empty or shows setup instructions instead of a file list, you may have forgotten to tick the Add a README file checkbox. Delete the repository (Settings tab, scroll to the bottom, Delete this repository) and create it again with the checkbox ticked.

Help me fix my empty repository

Your workspace is ready. You have a code editor installed and a place to store your website online. Next up, you'll write your first HTML page and publish it live on the internet.

Build and Deploy Your First Page

Your tools are set up and your repository is ready. Now it's time to get something live on the internet.

A live page is the starting point for all SEO work. You cannot optimize what does not exist yet. In this step, you'll create a basic HTML page and publish it to a real public URL using GitHub Pages.

In this step, get ready to:
  • Create an HTML page in your GitHub repository.
  • Enable GitHub Pages to publish your site.
  • Visit your live website in Chrome.
Create your index.html file

Every website starts with an index.html file. This is the first file a web server looks for when someone visits your site.

  • Open your my-site repository on GitHub in your browser.
  • Above the list of files, click the Add file dropdown menu.
  • Click Create new file.
  • In the file name field at the top, type index.html.
  • In the file contents text box, paste the following HTML code:
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <h1>Your Name</h1>
    <p>I am a web developer and designer.</p>
    <img src="profile.jpg">
</body>
</html>

What does this code do?

This is a minimal HTML page. It has a heading with your name, a short paragraph about you, and an image tag. Notice it has an empty <title> element and no other special tags. This is intentional. You'll discover exactly what's missing in the next step.

  • Click Commit changes... (the green button at the top right).
  • In the commit message field, type Add index.html.
  • Keep the default option to commit directly to the main branch.
  • Click Commit changes.

You should now see index.html listed alongside README.md in your repository's file list.

Don't see the file?

Make sure you typed index.html in the file name field at the top of the editor, not in the file contents area. If the file name is blank, GitHub won't create the file.

Why can't I see my file in the repository?

Enable GitHub Pages

Your file exists in the repository, but it's not a live website yet. GitHub Pages turns any repository into a hosted website for free.

  • Under your repository name, click Settings.
  • In the left sidebar under Code and automation, click Pages.
  • Under Build and deployment, find the Source dropdown and select Deploy from a branch.
  • In the Branch dropdown below it, select main.
  • Leave the folder dropdown set to / (root).
  • Click Save.

What is GitHub Pages?

GitHub Pages is a free hosting service that takes files from your repository and publishes them as a website. It automatically gives you an HTTPS URL so your site is secure from day one.

Don't see the Branch dropdown?

Make sure you selected Deploy from a branch in the Source dropdown first. The Branch dropdown only appears after you pick this option.

Help me find the Branch dropdown in GitHub Pages settings

Visit your live site

GitHub Pages takes a minute or two to deploy your site after you save the settings. Your page will be live at a public URL based on your GitHub username.

  • Wait about 1-2 minutes for the deployment to complete.
  • Open a new tab in Chrome and navigate to your site's URL:
https://[[GITHUB_USERNAME="yourusername"]].github.io/my-site/

Before you load the page, what do you expect to see? Think about what you put in your HTML file.

You should see your heading ("Your Name"), your paragraph text, and a broken image icon (since you haven't uploaded a profile.jpg file yet). This is your live website.

Seeing a 404 page?

Deployment can take up to 2 minutes. Wait a moment and refresh the page.

If it still doesn't load, go back to your repository's Settings and click Pages. Check that the Branch is set to main and the folder is / (root). Also confirm your file is named exactly index.html (not Index.html or index.htm).

Help me fix my GitHub Pages 404 error

Your website is live on the internet. Next up, you'll run a professional SEO audit to find out exactly what's missing from this page.

Audit Your Page's SEO Score

Your personal landing page is live on the internet and anyone with the link can visit it. But can search engines actually understand what your page is about?

Search engines like Google rely on specific signals in your HTML to figure out what a page is about, who wrote it, and how to display it in search results. Right now, your page has none of those signals. Let's run a professional audit to see exactly what's missing.

In this step, get ready to:
  • Open Chrome DevTools on your live page.
  • Run a Lighthouse SEO audit.
  • Review the specific checks your page is failing.
Open Chrome DevTools on your live page

Chrome DevTools is a set of developer tools built directly into Google Chrome. One of its tools, Lighthouse, can audit any web page against real-world SEO requirements.

  • In Chrome, make sure you are on your live site at https://yourusername.github.io/my-site/
  • Press Control+Shift+J to open Chrome DevTools.

A panel appears at the bottom or side of your browser window with tabs like Console, Elements, and more.

DevTools did not open?

Make sure you clicked inside the browser page before pressing the shortcut. If the shortcut still does not work, right-click anywhere on the page and select Inspect from the menu.

help me open Chrome DevTools on my live page

Run the Lighthouse SEO audit
  • In the DevTools panel, click the Lighthouse tab.

Can't see the Lighthouse tab?

If Lighthouse is not visible in the row of tabs, click the double-arrow >> button (sometimes labeled More tabs) to reveal hidden panels, then select Lighthouse.

  • In the Categories list, uncheck everything except SEO.
  • Leave the Mode set to Navigation (the default).

Before you click the button, what score do you think your page will get out of 100? Your page has a heading and a paragraph, but think about what else search engines might need.

  • Click Analyze page load.

Lighthouse reloads your page and runs a series of automated checks. After 10 to 30 seconds, a report appears with a circular score at the top.

What is Lighthouse actually checking?

Lighthouse runs your page against the same SEO requirements that Google uses to understand web content. It checks for things like a page title, a meta description, a viewport tag for mobile devices, image alt text, and descriptive link text.

Each check either passes (green) or fails (red). The overall score is a percentage of how many checks your page passed.

Review the failing audits

Your score is below 100%. That is exactly what we expected.

Scroll down past the score to see the specific checks your page failed. Each failing audit is highlighted in red with a description of what is missing.

  • Look for these failing checks in your report:
  • Document does not have a <meta name="description"> element.
  • Document does not have a <meta name="viewport"> tag.
  • Document does not have a proper <title> element (it is empty).
  • Image elements do not have alt attributes.

Why does this matter?

Each failing audit represents a signal that Google cannot find on your page. Without a meta description, Google has to guess what to show in search results. Without a viewport tag, your page will not display properly on mobile devices.

Without a title, Google does not know what your page is called. Without alt text on images, Google cannot understand what your images show. These are all easy fixes, and that is exactly what the next step covers.

Your Lighthouse report is essentially a to-do list from Google itself. Every red item is something you will fix in the next step to bring your score up to 100%.

Now you know exactly what is wrong. Next up, you will fix every one of these failing checks and bring your SEO score to a perfect 100%.

Fix On-Page SEO Fundamentals

Your Lighthouse audit just revealed the gaps between your page and what search engines need. Each failing check represents a signal that Google cannot find on your page.

In this step, you will fix every flagged issue by adding meta tags to the head, restructuring the body with semantic HTML, and making your content accessible to crawlers. By the end, your page will score 100% on the Lighthouse SEO audit.

In this step, get ready to:
  • Add meta tags to the head section (title, description, viewport, canonical).
  • Restructure the body with semantic HTML elements and proper headings.
  • Re-run the Lighthouse audit and confirm a 100% SEO score.
Add meta tags to the head

Search engines rely on specific tags inside the <head> section to understand your page. The Lighthouse audit flagged that your page is missing a title, meta description, and viewport tag.

  • Go to your my-site repository on GitHub.
  • Click on index.html to open the file.
  • Click the pencil icon (Edit file) in the upper right of the file view.
  • Select all the existing content and delete it.
  • Paste in this head section as the start of your new file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Web Developer and Designer</title>
    <meta name="description" content="Personal landing page of Your Name, a web developer and designer passionate about building accessible, SEO-friendly websites.">
    <link rel="canonical" href="https://yourusername.github.io/my-site/">
    <link rel="stylesheet" href="style.css">
</head>

What do these tags do?

  • lang="en" on the <html> tag tells search engines this page is in English.
  • viewport meta tag tells browsers how to scale the page on mobile devices.
  • <title> is what appears in browser tabs and as the clickable headline in search results.
  • meta description provides the short summary shown below your title in search results.
  • canonical link tells Google the official URL for this page, preventing duplicate content issues.
Restructure the body with semantic HTML

Search engines use HTML element names to understand the structure and meaning of your content. Generic <div> tags tell crawlers nothing, but semantic HTML elements like <header>, <main>, and <footer> communicate exactly what role each section plays.

  • Directly below the </head> tag you just pasted, add this body content with a navigation header and about section:
<body>
    <header>
        <nav>
            <a href="#about">About Me</a>
            <a href="#projects">My Projects</a>
            <a href="#contact">Contact Me</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h1>Your Name</h1>
            <p>I am a web developer and designer passionate about building accessible, SEO-friendly websites. Welcome to my personal page.</p>
            <img src="profile.jpg" alt="Photo of Your Name smiling at a desk with a laptop">
        </section>

What is semantic HTML doing here?

  • <header> wraps the site navigation, telling crawlers this is the top-level structure.
  • <main> signals the primary content of the page.
  • <section> groups related content with a clear topic.
  • The alt attribute on <img> gives search engines (and screen readers) a text description of the image.
  • Continue directly below the about section by pasting the remaining body content:
        <section id="projects">
            <h2>My Projects</h2>
            <p>Here are some projects I have been working on:</p>
            <ul>
                <li><a href="https://github.com/yourusername">View my GitHub repositories</a></li>
            </ul>
        </section>

        <section id="contact">
            <h2>Contact Me</h2>
            <p>You can reach me at your.email@example.com or connect with me on <a href="https://linkedin.com/in/yourusername">my LinkedIn profile</a>.</p>
        </section>
    </main>

    <footer>
        <p>Copyright 2026 Your Name. All rights reserved.</p>
    </footer>
</body>
</html>

Why does link text matter for SEO?

Lighthouse flags generic link text like "click here" or "read more" because it tells search engines nothing about the destination. Descriptive text like "View my GitHub repositories" and "my LinkedIn profile" helps crawlers understand where each link leads.

The heading hierarchy (one <h1> for the page title, then <h2> for sub-sections) also helps search engines understand the structure of your content.

  • Click Commit changes in the upper right.
  • In the dialog that appears, leave the default commit message and click Commit changes.
  • Wait about 30 seconds, then refresh your live page at https://yourusername.github.io/my-site/.

You should see your page content displayed with headings, a navigation area, and sections. The text may appear unstyled because you have not added CSS yet.

Page still showing old content?

  • GitHub Pages can take 1-2 minutes to deploy. Try a hard refresh with Ctrl+Shift+R to bypass your browser cache.
  • Check your repository's file list on GitHub to confirm index.html shows your recent commit timestamp.
  • help me debug why my GitHub Pages site is not updating
Add a stylesheet and verify your SEO score

Your HTML structure is now SEO-ready. Adding a stylesheet makes the page look professional when people actually visit it from search results.

  • Go back to your repository's main page on GitHub.
  • Click Add file, then select Create new file.
  • Type style.css in the filename field at the top.
  • Paste in these base styles for reset, body layout, and header:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #333;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

header {
    padding: 20px 0;
    border-bottom: 1px solid #eee;
    margin-bottom: 40px;
}
  • Below the header styles, add navigation and content section styles:
nav {
    display: flex;
    gap: 20px;
}

nav a {
    color: #0066cc;
    text-decoration: none;
}

nav a:hover {
    text-decoration: underline;
}

main section {
    margin-bottom: 40px;
}

h1 {
    font-size: 2rem;
    margin-bottom: 10px;
}

h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}
  • Finally, add styles for images, lists, and the footer:
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 15px;
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    margin-bottom: 8px;
}

footer {
    margin-top: 60px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #666;
    font-size: 0.9rem;
}

What do these styles do?

The reset removes default browser margins so styling is consistent. The body rule centers content at a max width of 800px for readability.

Navigation links are laid out horizontally using flexbox. The footer gets a subtle top border to visually separate it from the main content.

  • Click Commit changes in the upper right.
  • In the dialog, leave the default commit message and click Commit changes.
  • Wait about 30 seconds for GitHub Pages to deploy.

Refresh your live page. You should see a clean, styled layout with a navigation bar at the top, distinct content sections, and a footer at the bottom.

Styles not appearing?

  • Confirm the filename is exactly style.css (not styles.css or style.CSS). The filename must match the <link> tag in your HTML.
  • Make sure style.css is in the root of your repository (not inside a folder).
  • help me figure out why my CSS file is not loading on GitHub Pages

Now it is time to prove your SEO fixes worked. Before you run the audit, what score do you expect Lighthouse to give your page now?

  • On your live page, open Chrome DevTools by pressing Control+Shift+J.
  • Click the Lighthouse tab.
  • Make sure only the SEO checkbox is selected in the Categories list.
  • Click Generate report.

Your SEO score should now be 100% with all checks passing green. Every issue from your first audit is resolved.

Score still below 100%?

  • If Lighthouse flags a missing meta description, check that your <meta name="description"> tag has a non-empty content attribute.
  • If it flags non-descriptive link text, make sure none of your links use generic text like "click here" or "here".
  • If it flags a missing canonical URL, confirm your <link rel="canonical"> href matches your actual live URL exactly.
  • help me get 100% on the Lighthouse SEO audit

✔️ Awesome, I've got everything!

Great. Double check you have saved both files by confirming them in your repository's file list on GitHub.

ⓧ I'd like to double check the full code

Your repository should contain two files. Scroll up and confirm each section is present in order:

  • index.html: Head section (charset, viewport, title, meta description, canonical link, stylesheet link) followed by body (header with nav, main with three sections containing h1/h2 headings, img with alt text, descriptive links, and footer).
  • style.css: Reset and body styles, then header and nav styles, then section/heading/image/list/footer styles.

Your page now speaks the language search engines understand. Next up, you will add technical SEO files and social sharing tags that help Google discover your site and make your link look polished when shared on social media.

Add Technical SEO and Social Sharing

Your page now scores a perfect 100% on the Lighthouse SEO audit. That covers the basics that search engines need to read your page.

Real-world SEO goes further. Google needs a sitemap to discover all your pages, a robots.txt file to know how to crawl your site, and Open Graph tags so your link looks professional when shared on social media. In this step, you will add all three.

In this step, get ready to:
  • Create a robots.txt file that tells crawlers how to access your site.
  • Create a sitemap.xml file that lists every page for search engines to find.
  • Add Open Graph meta tags so your link displays a rich preview when shared on social platforms.
Create a robots.txt file

A robots.txt file sits at the root of your website and tells search engine crawlers which pages they are allowed to visit. It also points crawlers to your sitemap so they can find every page efficiently.

  • Return to your my-site repository on GitHub.
  • Click the Add file dropdown above the file list.
  • Click Create new file.
  • In the file name field, type robots.txt.
  • Paste the following content into the file editor:
User-agent: *
Allow: /

Sitemap: https://yourusername.github.io/my-site/sitemap.xml

What does this file do?

  • User-agent: * targets all search engine crawlers (Googlebot, Bingbot, etc.).
  • Allow: / grants permission to crawl every page on your site.
  • Sitemap: tells crawlers where to find your sitemap file so they can discover all your pages in one go.
  • Replace yourusername in the Sitemap URL with your actual GitHub username.
  • Click Commit changes... in the top right corner.
  • In the commit message field, type Add robots.txt and click Commit changes.

Wait about 30 seconds for GitHub Pages to deploy, then visit your robots.txt in the browser by going to https://yourusername.github.io/my-site/robots.txt (replacing yourusername with your GitHub username).

You should see the three lines of your robots.txt displayed as plain text in the browser.

Seeing a 404 page?

  • Wait a full minute and refresh. GitHub Pages can take up to 60 seconds to deploy new files.
  • Double-check that you named the file exactly robots.txt (no capital letters, no extra extensions).
  • Confirm the file appears in your repository's file list on GitHub.

My robots.txt file isn't loading at my GitHub Pages URL.

Create a sitemap.xml file

A sitemap is an XML file that lists every page on your website along with metadata like when it was last updated. Search engines use it to discover and prioritize your pages for crawling.

  • Return to your repository's main page on GitHub.
  • Click the Add file dropdown, then click Create new file.
  • In the file name field, type sitemap.xml.
  • Paste the following content into the file editor:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourusername.github.io/my-site/</loc>
    <lastmod>2026-08-13</lastmod>
    <priority>1.0</priority>
  </url>
</urlset>

What does this file do?

  • <loc> is the full URL of the page you want indexed.
  • <lastmod> tells search engines when the page was last updated, helping them decide when to re-crawl.
  • <priority> is a hint (from 0.0 to 1.0) about how important this page is relative to others on your site. Your homepage gets 1.0 because it is the most important page.
  • Replace yourusername in the <loc> URL with your actual GitHub username.
  • Click Commit changes... in the top right corner.
  • In the commit message field, type Add sitemap.xml and click Commit changes.

Wait about 30 seconds, then visit https://yourusername.github.io/my-site/sitemap.xml in your browser (replacing yourusername with your GitHub username).

You should see the XML content displayed in your browser, showing your page URL and the last modified date.

Seeing raw text or a 404?

  • If you see a 404, wait another minute and refresh. Deployment can take up to 60 seconds.
  • Make sure the file is named exactly sitemap.xml with no typos.
  • Some browsers display XML with styled formatting, others show raw text. Both are correct.

My sitemap.xml file isn't loading correctly on GitHub Pages.

Add Open Graph meta tags to your page

When someone shares your link on LinkedIn, Twitter, or Slack, the platform looks for Open Graph meta tags to build the rich preview card (the title, description, and image that appear). Without these tags, shared links look plain and unprofessional.

  • Return to your repository's main page on GitHub.
  • Click on index.html to open it.
  • Click the pencil icon in the upper right corner to open the file editor.
  • Find the line that says:
    <link rel="canonical" href="https://yourusername.github.io/my-site/">
  • Place your cursor at the end of that line and press Enter to create a new blank line below it.
  • Paste the following Open Graph tags on the new lines:
    <!-- Open Graph Meta Tags -->
    <meta property="og:title" content="Your Name - Web Developer and Designer">
    <meta property="og:description" content="Personal landing page of Your Name, a web developer and designer passionate about building accessible, SEO-friendly websites.">
    <meta property="og:url" content="https://yourusername.github.io/my-site/">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://yourusername.github.io/my-site/profile.jpg">

What do these tags do?

  • og:title sets the headline shown in the share preview card.
  • og:description provides the short text snippet under the headline.
  • og:image is the thumbnail image that appears alongside your link.
  • og:url tells the platform the canonical URL for deduplication.
  • og:type categorises your page (website is the default for a general landing page).
  • Replace yourusername in the og:url and og:image values with your actual GitHub username.
  • Click Commit changes... in the top right corner.
  • In the commit message field, type Add Open Graph meta tags and click Commit changes.

Not sure where to paste?

  • The Open Graph tags go between the <link rel="canonical" ...> line and the <link rel="stylesheet" ...> line.
  • Make sure each tag is on its own line and starts with <meta property="og:.

I'm not sure where to place Open Graph tags in my HTML head section.

✔️ Awesome, I've got everything!

Great. Double check you have saved all three commits (robots.txt, sitemap.xml, and the updated index.html).

ⓧ I'd like to double check the full code

Here is the complete robots.txt file:

User-agent: *
Allow: /

Sitemap: https://yourusername.github.io/my-site/sitemap.xml

Here is the complete sitemap.xml file:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourusername.github.io/my-site/</loc>
    <lastmod>2026-08-13</lastmod>
    <priority>1.0</priority>
  </url>
</urlset>

For index.html, confirm the following chunks are present in this order inside your <head> section:

  • The charset and viewport meta tags.
  • The <title> tag.
  • The <meta name="description" ...> tag.
  • The <link rel="canonical" ...> tag.
  • The five Open Graph <meta property="og:..."> tags (title, description, url, type, image).
  • The <link rel="stylesheet" href="style.css"> tag.

Before you check, what do you think you will see when you visit your robots.txt and sitemap.xml URLs in the browser?

  • Open a new tab and go to https://yourusername.github.io/my-site/robots.txt (replace yourusername with your GitHub username).
  • Open another tab and go to https://yourusername.github.io/my-site/sitemap.xml (replace yourusername with your GitHub username).

Both files load and display their content. The robots.txt shows plain text with the User-agent, Allow, and Sitemap directives. The sitemap.xml shows the XML structure with your homepage URL.

Your site now has everything a professional website needs for search engines to discover, crawl, and display it beautifully. The Secret Mission takes this one step further by submitting your site directly to Google.

Secret mission

Submit to Google Search Console

Your site is fully optimized and live, but Google does not know it exists yet. In this secret mission, you will register your site with Google Search Console, the same tool SEO professionals use daily. You will verify ownership, submit your sitemap, and request indexing so Google's crawler knows to visit your page.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on free services, so there are no ongoing costs. Decide whether to keep your resources running or delete them entirely.

Resources you used:

  • GitHub repository (my-site) with GitHub Pages enabled (free, no cost).
  • Google Search Console property (free, no cost).

Keep everything running

No action needed. Choose this if you want your site to stay live and continue being indexed by Google.

  • Your site stays live at its GitHub Pages URL indefinitely at no cost.
  • GitHub Pages is free for public repositories.
  • Google Search Console continues to collect performance data for your property at no charge.
  • VS Code remains installed on your computer for future projects.

Pause - I'll come back to this later

There are no running costs to pause. All services used in this project are completely free, so leaving them active costs nothing.

  • Your GitHub Pages site remains live and your Search Console property keeps collecting data.
  • No action is required from you.

Delete - I don't want to use this again

Remove all project resources and start fresh. Follow each step below to fully clean up.

Delete the GitHub repository
  • Go to your my-site repository on GitHub.
  • Click Settings in the repository navigation tabs.
  • Scroll down to the Danger Zone section.
  • Click Delete this repository.
  • Click I want to delete this repository.
  • Click I have read and understand these effects.
  • Type the repository name to confirm, then click Delete this repository.

What does deleting the repository do?

Deleting the repository removes all files, disables GitHub Pages, and takes your site offline. This also removes the Google Search Console verification file, so Google will eventually lose verification of your property.

Remove the Google Search Console property
  • Open Google Search Console at search.google.com/search-console.
  • Select your property from the dropdown.
  • Click Settings in the left sidebar.
  • Click Remove property.

What does removing the property do?

This removes the property from your Search Console account. It does not delete your website or affect Google's index directly. You can re-add the property later if you change your mind.

Nice Work!

Nice Work!

You just built a fully SEO-optimized website from scratch and deployed it live on the internet. Your site is now discoverable by search engines, shareable on social media, and scoring a perfect 100% on a professional SEO audit.

You've learned how to:

  • Build and deploy a live website on GitHub Pages with a real HTTPS URL accessible to anyone on the internet.
  • Run a professional SEO audit using Google Lighthouse, identify specific optimization gaps, and fix every failing check to achieve a perfect 100% score.
  • Add technical SEO files (robots.txt and sitemap.xml) for search engine crawlers and Open Graph meta tags for professional social media sharing.
  • Submitted your site to Google Search Console and requested real indexing from Google's crawler (Secret Mission).

Ready to quiz yourself?