Tips on Hugo SEO (Search Engine Optimize) Best Practices

Tips on Hugo SEO (Search Engine Optimization). Add describe metadata, link build, handle external link, lighthouse SEO checklist etc.

Last Update: September 19, 2023

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. However the default hugo template does not take too much consideration on SEO. Here are some tips to use Hugo generate web site with SEO.

Enable sitemap

A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them. Search engines like Google read this file to crawl your site more efficiently. A sitemap tells Google which pages and files you think are important in your site, and also provides valuable information about these files. For example, when the page was last updated and any alternate language versions of the page.

In config.toml, enable sitemap:

[sitemap]
  changefreq = "weekly"
  filename = "sitemap.xml"
  priority = 0.5

Make content mobile friendly

Responsive design

Use responsive design to adapt different size of screen.

Responsive web design basics

Add meta tags for SEO

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

The <meta> tag defines metadata about an HTML document.

<meta> tags always go inside the <head> element, and are typically used to specify character set charset, page description, keywords, author of the document, and viewport.settings.

keywords

Use keywords meta tag to provide a list of search keywords of current the page.

Add keywords meta tag headers template:

<meta name="keywords" content="{{ if .Params.Keywords }}{{ delimit .Params.Keywords ", " }}{{ end }}">

Then in markdown use keywords to define a list of keywords:

---
title: Tips on Hugo SEO
keywords:
- hugo
- seo

....

description

Use description tag to provide a short description of the page.

Add description meta tag to allow search engine used in the snippet shown in search results in some situations.

<meta name="description" content="{{ if .Params.Description }}{{ trim .Params.Description "\n" }}{{else if .Site.Params.Description}}{{ trim .Site.Params.Description "\n"}}{{ end }}">

charset

charset defines the page’s content type and character set. Unicode/UTF-8 is recommended where possible.

<meta charset="utf-8">

Note

Make sure that you surround the value of the content attribute with quotes - otherwise the charset attribute may be interpreted incorrectly.

viewport

The viewport is the user’s visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

viewport tag tells the browser how to render a page on a mobile device. Presence of this tag indicates to Google that the page is mobile friendly.

Add viewport’s initial-scale=1 to avoid text scale too small on small screen.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

more about how to configure the viewport meta tag

robots

Use robots tags to control the behavior of search engine crawling and indexing.

{{ if eq (getenv "HUGO_ENV") "production" }}
<meta name="robots" content="index,follow">
{{ else }}
<meta name="robots" content="noindex,nofollow">
{{ end }}

noindex prevent most search engine web crawlers from indexing a page on your site. noindex tells search engine do not show this page, media, or resource in search results. If you don’t specify this directive, the page, media, or resource may be indexed and shown in search results.

nofollow tells search engine do not follow the links on this page. If you don’t specify this directive, Google may use the links on the page to discover those linked pages.

Add `target` and `rel` to external Link

By default, the markdown link generated link open in current window, to allow open external link in new window/tab and have rel="nofollow noopener", override markup render-link.

Create layouts/_default/_markup/render-link.html with following content:

<a href="{{ .Destination | safeURL }}"
  {{ with .Title}} title="{{ . }}"{{ else }} title="{{ .Text | safeHTML }}" {{ end }}
  {{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="nofollow noopener"{{ end }}>
  {{ .Text | safeHTML }}</a>

Now

[Hello example](https://www.example.com)

will render as

<a href="https://www.example.com" title="Hello example" target="_blank" rel="nofollow noopener">Hello example</a>

WebPageTest: Test and optimize specific web page performance

WebPage Test is a online tool which measures web performance metrics in real browsers.

Key take away:

Effective use CDN
Enable Keep-alive
Compress transfer
Compress images
Cache static content
Enhance security by add security headers:
- Strict-Transport-Security: The HTTP Strict-Transport-Security response header (often abbreviated as HSTS) lets a web site tell browsers that it should only be accessed using HTTPS, instead of using HTTP.
  Example:
  Strict-Transport-Security: max-age=31536000; includeSubDomains.
- X-Content-Type-Options: The X-Content-Type-Options response HTTP header is a marker used by the server to indicate that the MIME types advertised in the Content-Type headers should be followed and not be changed. The header allows you to avoid MIME type sniffing by saying that the MIME types are deliberately configured.
  Example:
  X-Content-Type-Options: nosniff.
- X-Frame-Options: The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object>. Sites can use this to avoid click-jacking attacks, by ensuring that their content is not embedded into other sites.
  Example:
  X-Frame-Options: SAMEORIGIN.
- Content-Security-Policy: The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks.

Lighthouse: Test and improve your site SEO score

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

Run lighthouse in Chrome DevTools to identify and fix common problems that affect your sites’s performance, accessibility and user experience, those also improve your site SEO score.

SEO Checklist

LOCAL CITATIONS
- A citation is a complete or partial reference to your business name address, and phone number. Most citations will also allow you to include your website.
LINK BUILDING
- There is no such thing as a local seo campaign without link building.
POSITIVE REVIEWS
- Reviews are a major ranking factor for local seo. Getting positive review and managing negative reviews is also part of the ranking factors.
RESPONSIVE WEB DESIGN
ON PAGE SEO
- On page SEO can provide that extra bump that you need to get you to the top or the rankings and increase your traffic.
- Setting a canonical URL.
- Establish URL best practice.
- Target keyword in title and H1.
- Fill out meta descriptions.

References

OmniLock - Block / Hide App on iOS

Block distractive apps from appearing on the Home Screen and App Library, enhance your focus and reduce screen time.

DNS Firewall for iOS and Mac OS

Encrypted your DNS to protect your privacy and firewall to block phishing, malicious domains, block ads in all browsers and apps