Improve on-page Search Engine optimization (SEO)

There are four main things to do on-site to make sure your shiny new website can be found:

  1. Set meta tags for each page
  2. Register your website in Google Search Console
  3. Upload a sitemap
  4. Add alt-text to your images

We will dive into all four topics more in detail.

Not the topic of this technical guide to on-page Search Engine Optimization (SEO) are the most obvious things to do to improve your rankings: Write high-quality, long-form, and frequently-updated content around specific keywords, place links to other pages, and get tons of links to your pages. The best summary is probably provided in moz.com's beginner's guide to SEO. With the obvious out of the way, let's dive into on-page SEO.

1. Set meta tags for each page

First and most important are meta tags, there is no excuse for not having them as they get displayed in the Google Search result overview (after the ads that is). You basically need two tags:

  • Title tag
  • Description tag

There are middleman specific gems to handle this, but since this task is fairly easy, I prefer to keep control and reduce dependencies by just building it myself. Note that I don't list the "keywords meta tag" anymore, according to multiple sources this is not used anymore. But if you want to implement it, you will find enough information here to do it yourself.

The first thing to know is that each middleman page sports a so-called "front-matter" section where you can put all kinds of data to be pulled into the page. The front-matter section is usually in YAML, but you can also use JSON if this comes more natural to you. On a basic .html.erb page the front-matter in YAML is separated by three dashes (---) and looks like this:

The front-matter section at the top part of the page: 

---
title: "Improve on-page Search Engine optimization (SEO)"
---

Normal html / erb right after: 

<div class="container">
  <div class="row">
    ...
  </div>
</div>

You can access these pices of data by calling them anywhere in erb:

<%= current_page.data.title %>

Armed with this knowledge, let's dive into setting up the individual on-page SEO meta tags.

Meta Title tag

50-60 characters, describing the main content of the page

The title tag is by far the most important tag, and it is suggested to keep the title tag of a page equal to the <h1> tag of a page. In addition, I like the convention to add the site name after the title, separated with a pipe (or vertical bar) "|".

To accomplish this, let's add the desired page title text to the front-matter of the page (same to the example above):

---
title: "Improve on-page Search Engine optimization (SEO)"
---

Now, to make sure the header as defined in the <h1> tag matches the title in all cases, let's replace the <h1> tag in the page's erb text as follows:

<h1><%= current_page.data.title %></h1>

At this point, you have turned your page title into a variable, but you're not actually calling it in the meta tags yet. To accomplish this, modify the head section in your layout.erb as follows:

<html>
  <head>
    ...
    <!-- Meta tags -->
    <title><%= current_page.data.title %> | Your_Site_Name</title>
  </head>
  ...
</html>

Everything above has been implemented on this page, and your should see the page title as Improve on-page Search Engine optimization (SEO) | dd_ventures when hovering over your browser tab. (It's 62 characters though, I know.)

Meta Description tag

160 characters. Meta descriptions are the main source for the text snippet displayed in search results.

Given all we learned, the description tag is not difficult to add. We need a new item in front-matter, and a new meta tag in your layout.erb. Front-matter first:

---
...
description: "Four essential steps to improve on-page Search Engine optimization (SEO) for static websites generated with Middleman to improve ranking in Google search results."
---

(Again, 2 over the character limit. I like living on the edge.)

Now make sure the description meta tag gets displayed by adding to layout.erb :

<html>
  <head>
    ...
    <meta name="description" content="<%= current_page.data.description %>">
  </head>
  ...
</html>

During the build process, Middleman replaces the variable with the value from front-matter, and your description tag will be rendered as desired.

Testing the correct result of the description meta tag is a bit harder, but if you inspect your website in your browser of choice (most likely right-click, inspect element) and then scroll up to the <head> part of your page, you should see the meta tag correctly displayed as follows:

Meta description tag in website inspector o

2. Register your website in Google Search Console

There is actually not much to say here. Go to the Google Search Console and register your site.

Google search console screenshot o

Then, follow all steps Google suggests to make sure your site is porpoerly indexed by google search and will show up in search results. You really cannot do this early enough as it takes a bit of time to be indexed and ranked.

3. Upload a sitemap

One way to easily tell search engines about the structure of your website and making sure all pages are correctly indexed is by providing a sitemap in xml format. After looking through all options, I found one of the easiest and fastest ways here (no dependencies!). The following code is copied almost verbatim, h/t to raefa.

Just create a new sitemap.xml.erb file in your source directory with the following content: 

---
layout: false
directory_index: false
---
<% pages = sitemap.resources.reject{|r| r.is_a? Middleman::Sitemap::Extensions::RedirectResource }.find_all{|p| p.source_file.match(/\.html/) && !p.data.sitemap_noindex == true } %>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <% pages.each do |p| %>
    <url>
      <loc>https://NEW_STATIC_WEBSITE.COM<%=p.url.gsub('/index.html','')%></loc>
      <changefreq>monthly</changefreq>
      <priority><%= p.data.sitemap_priority || 0.5 %></priority>
    </url>
  <% end %>
</urlset>

Note the frontmatter at the beginning enforcing to layout to be used for your sitemap.xml.

Make sure to replace NEW_STATIC_WEBSITE.COM with your domain, save the file, and head over to NEW_STATIC_WEBSITE.COM/sitemap.xml . Congrats, you have a sitemap now!

After you build and deploy your Middleman static website project again, the last step will be to submit your sitemap to Google via the Google Search Console. There is a menu item on the left inside the Google Search Console that lets you submit your sitemap url. Paste your url, and Google will fetch and check it for you.

The nice thing is that everything updates automatically: Whenever you build your website your Sitemap is re-generated, and Google frequently pings your Sitemap-URL to check for updates.

Lastly, I place a link to the sitemap in the footer, but that step is really optional and maybe not even necessary as no user should look at it.

4. Add alt-text to your images

Middleman handles alt-text for images fairly automatic as it turns the image's file name into it's alt-text, removing dashes at the same time. So, for example, using Middleman's image_tag helper the code for the image above looks as follows:

<%= image_tag "static-website-in-2h/Improve-on-page-Search-Engine-optimization-SEO/Google-Search-Console-screenshot_o.png", class: "img-fluid" %>

Middleman "compiles" it into the following HTML:

<img src="/images/static-website-in-2h/Improve-on-page-Search-Engine-optimization-SEO/Google-Search-Console-screenshot_o.png" class="img-fluid" alt="Google search console screenshot o">

As you can see, the alt-text is present automatically without any additional work.

comments powered by Disqus