Exercise: Make the Food Truck Page Shine

Write the head of a food truck's page, with a real title and description, a link preview, a canonical link and structured data, and let the tests and two validators check it.

Journeyman · HTML · Web Development · Updated

Rolling Tacos has a new spot for the fall, a new schedule and a page that looks great. But nobody finds it. In a search, the page shows up as "Home" with no description. Pasted into a chat, it's a bare address. And search engines can't tell its hours from its prices. The owners have asked you to fix the part of the page that people never see but every search engine and chat app reads: the head. Tests check every piece as you go.

Before you start

You need Node.js to run the tests. If you haven't installed it yet, Setup: VS Code, a Browser and Node.js shows how.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into the folder where you keep your web projects.

The folder holds:

  • index.html: the Rolling Tacos page. Its body is finished; its <head> is yours to write.
  • menu-and-schedule.txt: every fact the head needs: the website address, the share picture's full address and what it shows, the phone number, the fall spot and its map location, the schedule and the menu.
  • share-image.jpg: the photo of the truck, 1200 by 630 pixels, the right size for a preview card.
  • style.css: the page's look, ready to use.
  • page.test.js and package.json: the tests. You don't need to change these.

Open the folder in VS Code, open the terminal (Terminal > New Terminal), and type npm install once.

What to do

The head you start with has the page skeleton and nothing that helps a searcher:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
</head>
  1. Write the title. Say what the page offers, then the site name, in 60 characters or fewer.
  2. Write the meta description. 50 to 160 characters that would make a hungry person click, with specific facts.
  3. Add the canonical link. The page lives at https://rollingtacos.example/.
  4. Add the preview card. The Open Graph tags og:title, og:description, og:type, og:url, og:image and og:image:alt, and twitter:card for the big picture on X.
  5. Add the structured data. A JSON-LD block that describes Rolling Tacos with schema.org: its type, name, website, phone, cuisine, address, map location and the fall schedule.
  6. Check it with the validators. Once the tests pass, paste your JSON-LD block into the Schema Markup Validator (validator.schema.org, Code snippet), and the whole page into the W3C validator (validator.w3.org/nu, Validate by direct input). Fix anything either one reports.

The truck moved for the fall, so the facts in the lessons are out of date. Every fact comes from menu-and-schedule.txt and the page itself.

Check your work

In VS Code's terminal, in the exercise folder:

npm test

At first seven of the eight checks fail. That's expected: each part of the head you write turns its check green. Each check prints what it found as a numbered line, such as 1) title: Home (4 characters), and a failing check says what it expected, for example The title is 72 characters. Keep it to 60 or fewer, so search results don't cut it off. The eighth check runs an HTML validator over the whole page, and it passes from the start: keep it green as you add to the head.

To see the page, right-click index.html and choose Open with Live Server. The head doesn't change how the page looks, except for the browser tab's text.

Hints

  • Read the facts file first. Every value you need is in menu-and-schedule.txt, with the times already on the 24-hour clock.
  • Watch the attribute. Open Graph tags use property; the description, robots and twitter:card use name. Link Previews with Open Graph has the whole set.
  • Full addresses, every time. The canonical link, og:url and og:image all start https://.
  • Build the JSON a piece at a time. Start with @context, @type and name, run the tests, then add the address, then the hours. When the check says the JSON isn't valid, look for a missing or extra comma near the line it names. Structured Data with JSON-LD shows each symbol.
  • One schedule entry per group of days. Days with the same hours share one OpeningHoursSpecification; closed days are left out.

When you're done

Every check is green:

✔ the title says what the page is
✔ a meta description of 50 to 160 characters
✔ a canonical link with the full address
✔ the Open Graph tags for the preview card
✔ a share picture with a full address and a description
✔ structured data that describes the business
✔ the structured data matches the page
✔ the validator finds no errors
ℹ tests 8
ℹ pass 8
ℹ fail 0

Read your title and description out loud, as if you were the searcher. Would you click? Then imagine the truck moves again in the spring: which lines of the head would you change, and is there any fact you'd have to change in two places?

So what

Every business, portfolio and project page you build from now on has a head like this one. It's a few minutes of work, and it decides whether people find the page, tap the link and turn up while the truck is open.

Key terms

Related