Robot Parts Co.

A quick look at optimizing some content for search engines to make the site show up better in search results.

Goal

We’re going to explore a bunch of SEO concepts on a fake website so we can look at the important tags & content and see how to improve the search engine juice.

All these techniques will later be applied to your portfolio website.

Fork & clone

Start the lesson by forking and cloning the robot-parts-co repository.

Fork & clone the “robot-parts-co” repo.

The repository will have some starter files to get you on your way.

  1. Fork & clone

    This includes some starter code that you can get by forking and cloning the repository.

1 Set up the project

We’re going to take an mostly complete website and enhance it by adding better SEO and microdata to the code.

You should see the following files in the folder that you’ve cloned:

  1. robot-parts-co
  2. css
  3. main.css
  4. images
  5. logo.svg
  6. products.svg
  7. index.html
  8. page2.html
  9. page3.html
  1. 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!

  2. Naming conventions

    Don’t forget to follow the naming conventions.

2 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.

  1. robot-parts-co
  2. css
  3. main.css
  4. images
  5. logo.svg    ➔    robot-parts-co.svg Matches company name
  6. products.svg    ➔    gears-power-cells.svg More descriptive
  7. index.html
  8. page2.html    ➔    robot-parts.html More descriptive
  9. page3.html    ➔    contact.html More descriptive

Don’t forget to change all the references in the HTML.

3 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.

<!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">
⋮
<!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">
⋮
<!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">
⋮
  1. Keyboard shortcut

    To create the middot (·) press ⌥⇧9

  2. index.html — Line E

    The homepage title follows the format:

    Site/Company Name · Small keyword rich, catchy phrase · City, Country
    
  3. robot-parts.html — Line E

    The inside page titles follow the format:

    Page Title · Site/Company Name
    

4 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.

<!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">
⋮
<!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">
⋮
<!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">
⋮
  1. Reminder

    The <meta> description tag should be completely unique for every single page on the website.

5 Fix the masthead

There’s some important information in the <header> and top of the website that could be improved for search engine friendliness.

⋮
<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>
⋮
⋮
<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>
⋮

Go ahead and make the <h1> to <strong> adjustment on the contact.html page too. Then change the <h2> to an <h1>.

  1. index.html — Line C

    Since the logo is inside the <h1> the alt="" attribute is extremely important—it should be the name of the company only.

  2. index.html — Line G

    The titles of pages in the navigation is really important—“Products” is too generic so we’ll change it to “Robot Parts”.

  3. robot-parts.html — Line C

    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.

  4. robot-parts.html — Line N

    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”.

6 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.

⋮
</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>
⋮
  1. Line E

    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.

  2. Line F

    The <img> tag should have a really descriptive, keyword laden alt="" attribute to help with search results.

  3. Line G

    The text inside the <a> tag was too generic so we changed it to something more descriptive of the page we’re linking too.

7 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 metadata to help computers (and robots) understand the content better.

⋮
</header>

<main itemscope itemtype="https://schema.org/Corporation">
  <h1>Contact</h1>

  <strong itemprop="name">Robot Parts Co.</strong>

  <address itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
    <br><span itemprop="streetAddress">1234 Robot Lane</span>
    <br><span itemprop="addressLocality">Robot Mega City 1</span>, <span itemprop="addressRegion">RoboStateB</span>, <span itemprop="addressCountry">RoboCountry211</span>
    <br><span itemprop="postalCode">11001010100101001</span>
  </address>

  <a itemprop="email" href="mailto:parts@robotparts.co">parts@robotparts.co</a>
</main>

<footer>
⋮

The next lesson, Portfolio microdata, goes into more depth with the extra Schema.org metadata.

  1. Line D

    We first add two attributes to the surrounding HTML element:

    • itemscope — defines that this element surrounds all the information
    • itemtype — defines what kind of object this is — in this case a Corporation
  2. Line G

    Define the <strong> tag as being the name of the corporation.

  3. Line I

    Define this paragraph as being a postal address. It’s also an itemscope because it surrounds a distinct set of information.

  4. Line J

    Define this <span> tag as being the streetAddress portion.

  5. Line K

    There are a few different definitions here, each for a distinct part of a postal address:

    • addressLocality — the city or village or hamlet, etc.
    • addressRegion — province, territory, state, canton, etc.
    • addressCountry — the country of the address.
  6. Line L

    Define this chunk of text as the postalCode

  7. Line O

    Since this is a link to create a new email and it has the email address in it we’ll mark it as the email for this corporation.