Introduction
SEO is short for Search Engine Optimization and that is the topic of this blog post. More precisely it is about Hugo and SEO and what Hugo already delivers to optimize your SEO ranking. Some very good parts are built into Hugo as opengraph or twitter cards. We are taking a look on those two but also many more which are not directly included in Hugo.
Open Graph
You can add structured metadata to your website using the Open Graph( OG) protocol so that social media platforms can better understand it. The title, description, and appropriate image for your page when it is shared on social media are examples of this metadata. To see the full list of possible meta data from the Open Graph Protocal follow this link to the documentation.
There are some benefits of using Open Graph:
Improved click-through rate (CTR)
The OG tags will make sure that the title, description, and image are correctly displayed when your content is posted on social media. Potential visitors may find your content more appealing as a result, which may increase click-through rates.
Increased social media engagement
Social media engagement can also be increased with the use of OG tags. People are more likely to click on the link and visit your website, for instance, if the image that appears when your content is shared is captivating or engaging.
Better search engine results
Additionally, using OG tags can increase your website’s position in search engine results pages( SERPs). This is due to the fact that OG tags offer more details about your content, which can aid search engines in comprehending it more fully.
Configuration
The configuration can happen on two different parts. First at the top level in the hugo.toml file or which we will focus on the content/blog/post.md file. You can define the data for the OG template in the front-matter of individual pages.
The basic template could look sth. like this:
audio = [] # audio files as string array
date = '2006-01-02'
description = 'Text about this post' # will be used as og:description
images = ['post-cover.png'] # images which can be shown in social media as string array
tags = [] # first 6 tags will be shown
title = 'Post title' # will be used as og:title
videos = [] # video files as string array
Fore more information take a look at the official Hugo docs for OG.
The last step is easy as you can use the template in your single.html file or any other file.
I defined a block head in the baseof.html file which kinda looks like this:
<!-- define -->
<head>
{{ block "head" . }} {{ end }}
<title>{{ block "title" .}} {{ .Site.Title .}} {{ end }}</title>
</head>
Now I included the Open Graph Template int the head block of the single.html file like this:
{{ define "head"}} {{ template "_internal/opengraph.html" . }} {{ end }}
And that’s it - you are finished setting up the OG template from Hugo. If you run hugo serve now you can inspect the head in your preferred browser and see the different meta-properties which all start with og:.
Twitter Cards
Images, videos, and product information can all be added to your tweets using Twitter Cards. They can assist in enhancing the visual appeal and engagement of your tweets, increasing click-through rates and website traffic.
Configuration
As with the OG Template there is a built in Twitter Cards template which will do the most work for us. You can do the same configurations as with the OG template so the hugo.toml file and the content files are the interesting ones for configuration.
An example:
description = 'Text about this post'
images = ['post-cover.png']
title = 'Post title'
That’s nearly it for the configuration part. As I wrote before it is nearly the same as with OG templates so there is little work for you to do to achieve support for Twitter Cards.
Last but not least you have to configure your username from twitter which is defined in the hugo.toml file.
[social]
twitter = 'GoHugoIO' # The @ will be added for you
The last step is again to use the twitter cards template which I also included into the head-block.
{{ define "head"}} {{ template "_internal/opengraph.html" . }} {{ template
"_internal/twitter_cards.html" . }} {{ end }}
Now you can again inspect the head in your browser and you will see some meta-fields like <meta name="twitter:card" content="summary_large_image">. Again a very easy setup with great effect.
Robots.txt
A robots.txt file is a text file that tells search engine crawlers which parts of your website they can and cannot crawl. It is a way for website owners to control how their websites are indexed by search engines.
The robots.txt file is a plain text file that is located in the root directory of your website. The file name must be “robots.txt”. The file contains a list of directives that tell search engine crawlers which pages they can and cannot crawl.
The most common directives are:
User-agent: Specifies the name of the search engine crawler thtat the directive applies to
Disallow: Tells the crawler to not crawl a specific path
Allow: Tells the crawler which specified path is allowed
Setup in Hugo
Once more Hugo delivers a very good option for handling that file. You can configure it but I will present the way on how to use a custom robots.txt file. That was what I needed as I wanted to disallow some pages and that can’t be done automatically. For the normal ones follow the original documentation;
The way I did is the following:
- Create a
robots.txtfile in the static folder. All files in this folder will be copied as is into the public folder. - Edit the file as you wish. For me it looked like this:
User-agent: * # allow all crawlers Disallow: /page-1/ Disallow: /page-2/ Disallow: /pge-3/ - Save the file
- Set
enableRobotsTXT = falsein thehugo.tomlfile.
If you run hugo and move into the public folder you can see the correct file there.
Meta-Robots
The <meta name="robots"> fields are a set of HTML meta tags that tell search engine crawlers how to crawl and index your website. These tags are placed in the <head> section of your website’s HTML code.
Those fields are made up of two parts: the name attribute and the content attribute. The name attribute specifies the name of the meta tag, and the content attribute specifies the value of the meta tag.
The most common <meta name="robots"> fields are:
index: This field tells search engine crawlers whether or not to index your page. The value of this field can be “index” or “noindex”.follow: This field tells search engine crawlers whether or not to follow the links on your page. The value of this field can be “follow” or “nofollow”.noarchive: This field tells search engine crawlers not to create an archive of your page. This is useful for pages that contain sensitive information.
I use the following method to handle the fields dynamically per specific path:
Create a
head.htmlfile which is a partial and always be used in thebaseof.htmlfile in the<head>.Add the following line into the
head.htmlfile:<meta name="robots" content="{{ .Params.meta_robots }}" />Configure the
meta_robotsfield in the front-matter of a blog post. I defined it like this for a post:meta_robots: "follow, index"
If you did everything right you can see the result in the head of your page in the browser:
<meta name="robots" content="follow, index" />
More SEO
Well that’s it with the Hugo part here. I just wanted to include a small section for different SEO parts you can do to achieve a better ranking.
Links (A-Tag)
All links or <a> should have descriptive text. If you already use Lighthouse you will already know this message. I will write an other article about lighthouse, the problems I encountered and how I solved them. The correct message is Links do not have descriptive text. This mostly happens if you include icons like twitter which links to your twitter profile.
There are two ways to solve this issue.
- Add text inside your a-tag. This solution might be possible in some situations but if you only want to show the icon it is not the way to go. Therefore the second way.
- Add
aria-label="{{.text}}"to the a-tag. This way you give the a-tag a correct text which you can handle dynamically via front-matter or other site params.
Page indexing
Lighthouse will also check if your page is blocked from indexing. The following error will be shown Page is blocked from indexing. This will reduce your rating in SEO but this can be completely right. For example I could say that I do not want to index the legal-notice page and if I test there I get a bad rating. As it was my intention to not index this you just can completely ignore this part. If it was not your intention to block the page from indexing you have to look at your robots.txt file or the meta name=robots part.
Meta-Description
A very important part for SEO is the <meta name="description" content=""> field in the head of your page. This field is used to show a description in a search engine so a user can get more inside before clicking on a link.
I created an extra field in front-matter which is called meta_description and is directly used in my head.html file. This way I can always specify a different description for explicitly this meta-tag and on page basis.
That is the code for me:
<meta name="description" content="{{ .Params.meta_description}}" />
Tap targets
Tap targets are not sized appropriately is the error message if a link is not easy reachable or clickable for a user.
A good example is the following image:
As you can see the user can’t easily click on and of those links but if you correctly set the sizes, margins and paddings and so on everything is fine.
Images
The last topic is about images. Here are some great tips to achieve good SEO and other overall improvements for your page only specific to images.
Use a newer standard of images like
webporsvgor any other newer ones. They are smaller and the crawlers like those new formats more.Include alt properties for your images as they are important when no images are shown but also for accessibility reasons.
Optimize your image size with tools like tiny-img.com or tinypng.com.
Use descriptive file names.
Conclusion
As we saw it is very easy to handle some of the SEO parts with Hugo like Open Graph and Twitter Cards as they are built into Hugo directly. Other topics I included are not directly connected to Hugo but were more general information about SEO. Still I thought this was a good digression into SEO in general but the topic is bigger than that.
Now it is up to you to add SEO support in your webpage and hopefully you can use the information here to achieve your goal.