SEO is a huge topic when talking about content creation and discovery. There are many things that are taken into account when search engines are crawling websites and indexing them for their search results.
We will learn about a few techniques to make sure your site is easily found by Google and others.
Robots.txt
robots.txt is a file that we can create with some data inside about which pages we will allow search engine crawlers to visit our site. It is not guaranteed that the crawlers will obey the rules outlined in this file, but most of the time they will.
Normally we would create our own file and add it to our static folder, but with Hugo we can have it done automatically by editing our config.toml file.
All we need to do is at the top of the file to add a line like this: enableRobotsTXT = true and then Hugo will automatically create a file for us every time we build our site and deploy it to our servers.
Meta Tags
We learned a bit about meta tags when we were writing our templates, but there are a lot more that we can use to help search engine crawlers understand what they are looking at.
Open the baseof.html file and add the following snippet to the <head> section, make sure the replace the content= attribute with whatever you want:
<meta name="keywords" content="blog,travel,food,coffee,bread,canada" />
<meta property="og:site_name" content="{{ $.Site.Title }}" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta name="twitter:site" content="@your-twitter-handle" />
<meta name="twitter:creator" content="@your-twitter-handle" />
<meta name="theme-color" content="#1a202c">
{{ if .IsPage }}
<title>{{ .Title }} | {{ $.Site.Title }}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ .Summary }}" />
<meta name="description" content="{{ .Summary }}" />
<meta property="twitter:title" content="{{ .Title }}" />
<meta property="twitter:description" content="{{ .Summary }}" />
<meta property="article:author" content="your-name" />
<meta property="article:published_time" content="{{ .Date }}" />
{{ else }}
<title>{{ $.Site.Title }}</title>
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta property="og:description" content="blog about dancing" />
<meta name="description" content="blog about dancing" />
{{ end }}
This snippet adds a bunch of meta data to our head of every page, and fills it in based on the content. For blog posts it adds the title and summary, for other pages it uses some default content.
Don’t forget to replace some of the placeholder content in that snippet with your own. For example, the theme-color meta can be changed to any hexadecimal color, and this color will be used mostly on android phones in the title bar. Use an online color picker to figure out which hexadecimal color code you need.
If you don’t have twitter, feel free to remove the tags that have twitter in them.
The baseof.html template should look something similar to this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
<link rel="stylesheet" href="/styles.css">
<meta name="keywords" content="blog,travel,food,coffee,bread,canada" />
<meta property="og:site_name" content="{{ $.Site.Title }}" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta name="twitter:site" content="@your-twitter-handle" />
<meta name="twitter:creator" content="@your-twitter-handle" />
<meta name="theme-color" content="#1a202c">
{{ if .IsPage }}
<title>{{ .Title }} | {{ $.Site.Title }}</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ .Title }}" />
<meta property="og:description" content="{{ .Summary }}" />
<meta name="description" content="{{ .Summary }}" />
<meta property="twitter:title" content="{{ .Title }}" />
<meta property="twitter:description" content="{{ .Summary }}" />
<meta property="article:author" content="your-name" />
<meta property="article:published_time" content="{{ .Date }}" />
{{ else }}
<title>{{ $.Site.Title }}</title>
<meta name="twitter:card" content="summary" />
<meta property="og:title" content="{{ $.Site.Title }}" />
<meta property="og:description" content="blog about dancing" />
<meta name="description" content="blog about dancing" />
{{ end }}
</head>
<body>
{{ partial "navbar.html" . }}
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
</body>
</html>
It is very important to have this tag in the head: <meta name="viewport" content="width=device-width, initial-scale=1"> it is needed for your site to look normal on mobile phones.