The document head and SEO basics — Create Websites With Me

Back in lesson one you met the <head> and gave it three things: a character set, a viewport, and a title. None of it shows up in the page itself, yet it is what decides how your site appears in a search result and what people see when they paste your link into a message. This lesson fills the head out properly, and it is the same set of tags you will find on any well-made site, including the ones used as the example throughout this course.

The title, working harder than it looks

The <title> does three jobs at once. It labels the browser tab, it becomes the bookmark name, and it is the clickable blue headline in a search result. It is also the first thing a screen reader announces when the page loads, so it is how many people get their bearings before anything else.

Because of all that, write a title that is specific to the page and reads well on its own. A reliable pattern is the page or person, then the site or role.

<title>Jordan Reese — Web Developer</title>

Avoid leaving it generic, like Home or Untitled, and avoid stuffing it with keywords, which reads as spam to both people and search engines. One clear, honest line is what you want.

The meta description

The meta description is the short paragraph that sits under the title in a search result. It does not directly move you up the rankings, but it is your pitch for the click, so it is worth writing well. Aim for roughly one sentence, around 150 characters, that honestly describes the page.

<meta
  name="description"
  content="Jordan Reese is a web developer in Asheville, NC, building fast, accessible websites by hand."
/>

If you leave it out, the search engine will pull a snippet from your page on its own, which is sometimes fine and sometimes a stray sentence that makes no sense out of context. Writing it yourself keeps you in control of that first impression.

Looking right when shared: Open Graph

When someone pastes your link into a message, a chat, or a social post, the preview card they see, the title, the description, and the image, comes from a set of tags called Open Graph. Without them you get a bare link or whatever the platform guesses. With them you get a deliberate, polished card.

<meta property="og:type" content="website" />
<meta property="og:url" content="https://jordanreese.example/" />
<meta property="og:title" content="Jordan Reese — Web Developer" />
<meta
  property="og:description"
  content="Jordan Reese is a web developer in Asheville, NC, building fast, accessible websites by hand."
/>
<meta property="og:image" content="https://jordanreese.example/og-image.png" />

The image is the part people notice most. The standard size is 1200 by 630 pixels, and it should be a real, hosted image at an absolute URL, not a relative path, because the platform fetching it is not on your site. A clean option is a simple card with your name on it, which is exactly the share image used on the example site for this course.

A second small set of tags covers platforms that read Twitter’s own format. You can reuse the same title, description, and image.

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Jordan Reese — Web Developer" />
<meta
  name="twitter:description"
  content="Jordan Reese is a web developer in Asheville, NC, building fast, accessible websites by hand."
/>
<meta name="twitter:image" content="https://jordanreese.example/og-image.png" />

The canonical link

A single page can sometimes be reached at more than one address: with and without a trailing slash, with www and without, or with tracking parameters tacked on the end. Search engines treat those as potentially different pages, which splits the credit your page has earned. A canonical link tells them which address is the real one.

<link rel="canonical" href="https://jordanreese.example/" />

For a small site you point each page at its own clean URL and the problem disappears.

The favicon

The favicon is the little icon in the browser tab and in a bookmarks list. An SVG works well because it stays sharp at any size.

<link rel="icon" href="/favicon.svg" />

Putting it together

Here is a complete, well-formed head for your personal site, with everything from this lesson in place. There is nothing to preview, since none of it draws on the page, but this is the head that makes your site presentable to search engines and sharable everywhere.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Jordan Reese — Web Developer</title>
  <meta
    name="description"
    content="Jordan Reese is a web developer in Asheville, NC, building fast, accessible websites by hand."
  />
  <link rel="canonical" href="https://jordanreese.example/" />
  <link rel="icon" href="/favicon.svg" />

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://jordanreese.example/" />
  <meta property="og:title" content="Jordan Reese — Web Developer" />
  <meta
    property="og:description"
    content="Jordan Reese is a web developer in Asheville, NC, building fast, accessible websites by hand."
  />
  <meta
    property="og:image"
    content="https://jordanreese.example/og-image.png"
  />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Jordan Reese — Web Developer" />
  <meta
    name="twitter:description"
    content="Jordan Reese is a web developer in Asheville, NC, building fast, accessible websites by hand."
  />
  <meta
    name="twitter:image"
    content="https://jordanreese.example/og-image.png"
  />
</head>

A good way to see all of this in the wild is to open a site you like, view its source, and read the head. You will recognise every tag here. The same is true of kylelaverty.com, the finished version of the site we are building, where this exact set of tags is in place.

With the structure, the outline, and the head all sorted, the next lessons move into the visible content itself, starting with a small but important distinction: when something on the page should be a link, and when it should be a button.