| title |
before |
folders |
notes |
Set up the project |
We’re going to take an mostly complete website and enhance it by adding better SEO and metadata to the code.
You should see the following files in the folder that you’ve cloned:
|
| label |
type |
robot-parts-co |
folder |
|
| label |
type |
indent |
css |
folder |
1 |
|
|
| label |
type |
indent |
images |
folder |
1 |
|
|
| label |
indent |
products.svg |
2 |
|
| label |
indent |
social.jpg |
2 |
|
| label |
indent |
index.html |
1 |
|
| label |
indent |
page2.html |
1 |
|
| label |
indent |
page3.html |
1 |
|
|
| label |
text |
Type it, type it real good |
Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers! |
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
|
|
| title |
before |
folders |
after |
Rename some files |
One thing that search engines look at when trying to determine the topic and keywords of your page is the URLs, and the words in the URLs.
We should rename some of these files to be better for search engines.
|
| label |
type |
robot-parts-co |
folder |
|
| label |
type |
indent |
fade |
css |
folder |
1 |
true |
|
| label |
indent |
fade |
main.css |
2 |
true |
|
| label |
type |
indent |
images |
folder |
1 |
|
| label |
indent |
rename |
notes |
logo.svg |
2 |
robot-parts-co.svg |
Matches company name |
|
| label |
indent |
rename |
notes |
products.svg |
2 |
gears-power-cells.svg |
More descriptive |
|
| label |
indent |
fade |
social.jpg |
2 |
true |
|
| label |
indent |
fade |
index.html |
1 |
true |
|
| label |
indent |
rename |
notes |
page2.html |
1 |
robot-parts.html |
More descriptive |
|
| label |
indent |
rename |
notes |
page3.html |
1 |
contact.html |
More descriptive |
|
|
**Don’t forget to change all the references in the HTML.**
|
|
| title |
before |
multi_code |
notes |
Improve the <title> tags |
The `<title>` tag is one of the most important pieces of content from an SEO perspective: it’s searched for keywords and it’s used on the search results pages.
We need to make nice, keyword heavy `<title>` tags that are *completely unique on every page of the website*.
|
| code_lang |
code_file |
code |
lines |
html |
index.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Robot Parts Co. · Every part to conquer the world · Robot Mega City 1, RoboCountry211</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
⋮
|
|
|
| num |
text |
5 |
The homepage title follows the format:
```
Site/Company Name · Small keyword rich, catchy phrase · City, Country
```
|
|
|
|
| code_lang |
code_file |
code |
lines |
html |
robot-parts.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Robot Parts · Robot Parts Co.</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
⋮
|
|
|
| num |
text |
5 |
The inside page titles follow the format:
```
Page Title · Site/Company Name
```
|
|
|
|
| code_lang |
code_file |
code |
lines |
html |
contact.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Contact · Robot Parts Co.</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
⋮
|
|
|
|
| label |
text |
Keyboard shortcut |
To create the middot (·) press `⌥⇧9` |
|
|
|
| title |
before |
multi_code |
notes |
Add <meta> descriptions |
The `<meta>` description tag should be included on all websites—and be completely unique on every page.
Search engines use this as the little description under the link on search results pages. Or sometimes, if it’s better, they’ll use the first few words from the first `<p>` tag.
Max length for the `<meta>` description is 150 characters.
|
| code_lang |
code_file |
code |
lines |
html |
index.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Robot Parts Co. · Robot parts for robot hearts · Robot Mega City 1, RoboCountry211</title>
<meta name="description" content="A mega conglomerate corporation selling and servicing all totalitarian robots.">
<meta name="viewport" content="width=device-width,initial-scale=1">
⋮
|
|
|
| code_lang |
code_file |
code |
lines |
html |
robot-parts.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Robot Parts · Robot Parts Co.</title>
<meta name="description" content="Every part or piece a destructive robot needs: gears, rotors, manipulators, sensors, power cells and more.">
<meta name="viewport" content="width=device-width,initial-scale=1">
⋮
|
|
|
| code_lang |
code_file |
code |
lines |
html |
contact.html |
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8">
<title>Contact · Robot Parts Co.</title>
<meta name="description" content="Send us digital beams or stop by the warehouse to order a part that we’re missing.">
<meta name="viewport" content="width=device-width,initial-scale=1">
⋮
|
|
|
|
| label |
text |
Reminder |
The `<meta>` description tag should be completely unique for every single page on the website. |
|
|
|
| title |
before |
multi_code |
after |
Fix the masthead |
There’s some important information in the `<header>` and top of the website that could be improved for search engine friendliness.
|
| code_lang |
code_file |
code |
lines |
html |
index.html |
⋮
<header>
<h1><img src="images/robot-parts-co.svg" alt="Robot Parts Co."></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="robot-parts.html">Robot Parts</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
⋮
|
|
|
|
| num |
text |
3 |
Since the logo is inside the `<h1>` the `alt=""` attribute is extremely important—it should be the name of the company only.
|
|
| num |
text |
7 |
The titles of pages in the navigation is really important—“Products” is too generic so we’ll change it to “Robot Parts”.
|
|
|
|
| code_lang |
code_file |
code |
lines |
html |
robot-parts.html |
⋮
<header>
<strong><img src="images/robot-parts-co.svg" alt="Robot Parts Co."></strong>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="robot-parts.html">Robot Parts</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1>Robot Parts</h1>
⋮
|
|
|
| num |
text |
3 |
Every page must have a completely unique `<h1>`—that means that the logo cannot be an `<h1>` tag on the inside pages because it would match the homepage.
So, on inside pages, the logo should probably be a `<strong>` tag.
|
|
| num |
text |
14 |
Now that the `<h1>` tag has been freed from the logo, we should use it on the most important piece of content on this page: the page title.
While we’re at it, let’s change the title to be slightly more descriptive than “Products”.
|
|
|
|
|
**Go ahead and make the `<h1>` to `<strong>` adjustment on the `contact.html` page too. Then change the `<h2>` to an `<h1>`.**
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
Homepage content fixes |
Looking at the homepage there’s a few adjustments we can do to the content to make it more search engine friendly.
|
html |
index.html |
⋮
</header>
<main>
<p><strong>Every part a destructive robot needs for total world domination.</strong></p>
<img src="images/gears-power-cells.svg" alt="A selection of the best gears and power cells available to buy">
<a href="robot-parts.html">Buy robot parts</a>
</main>
<footer>
⋮
|
|
|
| num |
text |
5 |
The website introductory paragraph was really generic—we changed it to something more relevant.
Also, since it’s an important paragraph and search engines pay attention to `<strong>` tags we surrounded it with a `<strong>` tag.
|
|
| num |
text |
6 |
The `<img>` tag should have a really descriptive, keyword laden `alt=""` attribute to help with search results.
|
|
| num |
text |
7 |
The text inside the `<a>` tag was too generic so we changed it to something more descriptive of the page we’re linking too.
|
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add location information |
It’s helpful for search engines to know the location of the website, especially if it’s a physical business. They can use that information to plot on maps, etc.
There are a few tags to define the geographic location using longitude & latitude:
|
html |
index.html |
⋮
<link href="css/main.css" rel="stylesheet">
<meta name="ICBM" content="45.41117,-75.69812">
<meta name="geo.position" content="45.41117;-75.69812">
<meta name="geo.region" content="ca-on">
<meta name="geo.placename" content="Ottawa">
</head>
<body>
⋮
|
|
| num |
text |
3,4 |
Add the longitude & latitude of the physical location—or even just the city.
|
|
| num |
text |
5 |
Specify the region’s country code: `ca-on` means “Canada, Ontario”.
|
|
| num |
text |
6 |
Specify the city, village, town, etc. of the location.
|
|
|
**Make sure to copy this to the `robot-parts.html` & `contact.html`**
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add social media tags |
|
html |
index.html |
⋮
<meta name="geo.placename" content="Ottawa">
<meta property="og:type" content="website">
<meta property="og:title" content="Robot Parts Co. · Every part to conquer the world">
<meta property="og:url" content=" https://robotparts.co/">
<meta property="og:image" content=" https://robotparts.co/images/social.jpg">
<meta property="og:site_name" content="Robot Parts Co.">
<meta property="og:description" content="A mega conglomerate corporation selling and servicing all totalitarian robots.">
<meta property="og:locale" content="en_CA">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@robotpartsco">
</head>
<body>
⋮
|
|
| num |
text |
3-9 |
These are the OpenGraph tags. They’ll work on just about any social media website, including Twitter.
|
|
| num |
text |
10-11 |
Twitter has a few of its own extra tags to add, these are the two that are kind of necessary. The rest of the data will be pulled from OpenGraph.
|
|
|
Copy this to the `robot-parts.html` & `contact.html`. **It’s extremely critical that `og:title`, `og:url` & `og:description` are different for every page.** I usually just copy from the other `<meta>` tags.
|
|
| title |
before |
folders |
code_before |
code_lang |
code_file |
code_can_copy |
code |
lines |
after |
Humans.txt |
The `humans.txt` file is a place to write the credits of your website: the designers, developers, etc.
**It’s also a wonderful place to cite the location of where you got assets.** If you downloaded icons from a website you need to specify where, when, etc.—like a bibliography.
|
| label |
type |
robot-parts-co |
folder |
|
| label |
type |
indent |
fade |
css |
folder |
1 |
true |
|
| label |
type |
indent |
fade |
images |
folder |
1 |
true |
|
| label |
indent |
fade |
index.html |
1 |
true |
|
| label |
indent |
fade |
contact.html |
1 |
true |
|
| label |
indent |
fade |
robot-parts.html |
1 |
true |
|
| label |
indent |
humans.txt |
1 |
|
|
Create a new file named `humans.txt` inside the root folder.
|
txt |
humans.txt |
true |
# humanstxt.org
# TEAM
(Write all your team members’ information in here)
(Any format you’d like—I usually use Markdown)
---
# THANKS
(This is the place where you put sources of things)
(Locations where you got icons, etc.)
---
# TECHNOLOGY
## Software
(Write what software you’re using)
## Hosting
(Write where the website is hosted & services)
|
| num |
text |
5-6 |
Configure this to specify your team members, their locations & contact information.
|
|
| num |
text |
12-13 |
Add the citations & bibliographic entries here. Or thank humans who helped you make the project.
|
|
| num |
text |
21,25 |
Use these places to tell about what tools you used: your code editor, version control, where the website is hosted, etc.
|
|
|
|
|
| title |
before |
folders |
code_before |
code_lang |
code_file |
code_can_copy |
code |
after |
Robots.txt |
The `robots.txt` file is for search engine crawlers—to prevent them from showing certain things in search results. *Remember only honest search engines will follow the specifications.*
For instance, if you don’t want to have your images show in image search results you could block your images folder.
|
| label |
type |
robot-parts-co |
folder |
|
| label |
type |
indent |
fade |
css |
folder |
1 |
true |
|
| label |
type |
indent |
fade |
images |
folder |
1 |
true |
|
| label |
indent |
fade |
index.html |
1 |
true |
|
| label |
indent |
fade |
contact.html |
1 |
true |
|
| label |
indent |
fade |
robot-parts.html |
1 |
true |
|
| label |
indent |
fade |
humans.txt |
1 |
true |
|
| label |
indent |
robots.txt |
1 |
|
|
Create a new file named `robots.txt` inside the root folder.
|
txt |
robots.txt |
true |
|
Here’s the most basic one you should have: it says, “Don’t block anything”.
Also notice it’s pointing to our `sitemap.xml`—that’s the next step.
|
|
| title |
before |
folders |
code_before |
code_lang |
code_file |
code |
lines |
after |
Search engine sitemap |
The `sitemap.xml` file is used by search engines to help them spider your website. It’s a large list of all the pages on the website.
**This is different than a user-facing sitemap.** It’s specifically targeted at search engine robots & not humans. The visual sitemap you’ve interacted with previously is another thing that you should probably include.
|
| label |
type |
robot-parts-co |
folder |
|
| label |
type |
indent |
fade |
css |
folder |
1 |
true |
|
| label |
type |
indent |
fade |
images |
folder |
1 |
true |
|
| label |
indent |
fade |
index.html |
1 |
true |
|
| label |
indent |
fade |
contact.html |
1 |
true |
|
| label |
indent |
fade |
robot-parts.html |
1 |
true |
|
| label |
indent |
fade |
humans.txt |
1 |
true |
|
| label |
indent |
fade |
robots.txt |
1 |
true |
|
| label |
indent |
sitemap.xml |
1 |
|
|
Create a new file named `sitemap.xml` inside the root folder.
|
xml |
sitemap.xml |
|
| num |
text |
1 |
This code language is called XML, the structure is similar to HTML with angle brackets, etc.—but significantly more strict.
|
|
| num |
text |
4-9 |
Every page on the website should have its own `<url>` entry.
The only tag within that is required is `<loc>`: the URL of the page itself—the other tags are optional.
- `lastmod`: The last modification day of the page
- `changefreq`: How often the page changes
- `priority`: How important the page is, the default is `0.5`
|
|
| num |
text |
11 |
Add 2 more `<url>` blocks here for the contact & robot-parts pages.
|
|
|
**Don’t forget to add 2 more `<url>` blocks:**
1. One `<url>` block for `contact.html`
1. One `<url>` block for `robot-parts.html`
Check out [Learn the Web’s sitemap.xml]( https://learntheweb.courses/sitemap.xml).
*(Usually humans don’t create these by hand, they’re generated by a tool, like Jeykll.)*
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
Add extra metadata |
The contact page has the address and contact information for the store, it’s a great idea to add extra [Schema.org]( https://schema.org/) metadata to help computers (and robots) understand the content better.
|
html |
contact.html |
⋮
<p>© 2027 Robot Parts Co.</p>
</footer>
<script type="application/ld+json">
{
"@context": " https://schema.org",
"@type": "Organization",
"name": "Robot Parts Co.",
"email": "parts@robotparts.co",
"address": {
"@type": "PostalAddress",
"streetAddress": "1234 Robot Lane",
"addressLocality": "Robot Mega City 1",
"addressRegion": "RoboStateB",
"addressCountry": "RoboCountry211",
"postalCode": "11001010100101001"
}
}
</script>
</body>
⋮
|
|
| num |
text |
5 |
Add a new `<script>` tag & set its type to `application/ld+json`
If we don’t set the `type` attribute the browser will try to execute it as JavaScript.
|
|
| num |
text |
6 |
The whole thing is a JSON object—so open & close some curly brackets.
|
|
| num |
text |
7 |
The first entry is `@context` this defines that we’re using the [Schema.org]( https://schema.org/) syntax.
|
|
| num |
text |
8 |
Next up we’ll specify that this JSON-LD object is an `Organization`: one of the types defined on Schema.org.
|
|
| num |
text |
9 |
Specify the `name` of the corporation.
|
|
| num |
text |
10 |
Specify the organization’s email address.
|
|
| num |
text |
11 |
The next entry is a sub-object called address: it has its own set of Schema.org properties we need to implement.
|
|
| num |
text |
13-17 |
There are a few different definitions here, each for a distinct part of a postal address:
- `streetAddress` — the building number & street name.
- `addressLocality` — the city or village or hamlet, etc. — e.g. “Ottawa”
- `addressRegion` — province, territory, state, canton, etc. — e.g. “Ontario”
- `addressCountry` — the country of the address — e.g. “Canada”.
- `postalCode` — that one’s pretty obvious.
|
|
|
**The next lesson, [Portfolio metadata](/courses/web-dev-5/portfolio-metadata/), goes into more depth with the extra Schema.org metadata.**
|
|
