SEO and Google Analytics. CSS Styling. Hugo & Bootstrap. Add Javascript.

SEO with Hugo: mymeta.html

We are going to add all our meta tags under the mymeta partial. It is one of the partials included in the baseof.html file. You may want to read the article Perfect SEO Meta Tags with Hugo, SKCRIPT:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>{{ .Title }}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}</title>
<meta name="application-name" content="{{ .Title }}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}" />
<meta itemprop="name" content="{{ .Title }}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}" />
<meta name="description" content="{{ if .Params.Description }}{{ .Params.Description }}
{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}
{{ else }}Free bilingual e-books, articles, resources, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.{{ end }}" /> 
<meta itemprop="description" content="{{ if .Params.Description }}{{ .Params.Description }}
{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}
{{ else }}Free bilingual e-books, articles, resources, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.{{ end }}" />
<meta name="keywords" content="{{with .Params.Keywords }}{{ delimit . " "}}{{ end }}" />
<meta name="language" content="{{ if .Params.Language }}{{ .Params.Language }}{{ else }}en_US{{ end }}" />

<!-- Open Graph Tags -->
<meta property="og:title" content="{{ .Title }}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}" />
<meta property="og:locale" content="{{ if .Params.Language }}{{ .Params.Language }}{{ else }}en_US{{ end }}" />
<meta property="og:site_name" content="{{ .Site.Title }}" />
<meta property="og:url" content="{{ .Permalink }}" />
<meta property="og:description" content="{{ if .Params.Description }}{{ .Params.Description }}
{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}
{{ else }}Free bilingual e-books, articles, resources, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.{{ end }}" />
<meta property="og:article:author" content="https://www.facebook.com/nmaximo7" />

<!-- Twitter Tags -->
<meta name="twitter:title" content="{{ .Title }}{{ if ne .Title .Site.Title }} | {{ .Site.Title }}{{ end }}" />
<meta name="twitter:description" content="{{ if .Params.Description }}{{ .Params.Description }}
{{ else if .Site.Params.Description }}{{ .Site.Params.Description }}
{{ else }}Free bilingual e-books, articles, resources, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.{{ end }}" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@justtothepoint" />
<meta name="twitter:creator" content="@justtothepoint" />
<meta name="twitter:domain" content="https://www.justtothepoint.com/" />
<meta name="twitter:url" content="{{ .Permalink }}" />

<!-- Link Tags -->
<base href="{{ .Permalink }}" />
<!-- A canonical URL is the URL of the page that Google thinks is most representative 
	from a set of duplicate pages on your site.  -->
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
<meta name="url" content="{{ .Permalink }}" />

<!-- Image Tag -->
{{ with .Params.featured_image }}
  <meta itemprop="image" content="{{ . | absURL }}" />
  <meta property="og:image" content="{{ . | absURL }}" />
  <meta name="twitter:image" content="{{ . | absURL }}" />
  <meta name="twitter:image:src" content="{{ . | absURL }}" />
{{ else }}
  <meta itemprop="image" content="{{ .Site.Params.ogimage | absURL }}" />
  <meta property="og:image" content="{{ .Site.Params.ogimage | absURL }}" />
  <meta name="twitter:image" content="{{ .Site.Params.ogimage | absURL }}" />
  <meta name="twitter:image:src" content="{{ .Site.Params.ogimage | absURL }}" />
{{ end }}

RealFaviconGenerator is a favicon generator for all platforms and browsers. After downloading the generated favicon package, unzip it, and copy all its files into the Hugo’s static folder (/static).

<!-- Favicon Tags -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#AADFE1">

<!-- It indicates a suggested color that user agents should use to customize the display of the page. ColorZilla is a tool picker that could be useful for that purpose. -->
<meta name="theme-color" content="#AADFE1">

<meta name="google-site-verification" content="YourCodeHere" />
<meta name="msvalidate.01" content="YourCodeHere" />
<meta name="p:domain_verify" content="YourCodeHere" />
<meta name="yandex-verification" content="YourCodeHere" />
<meta property="article:publisher" content="https://www.facebook.com/nmaximo7" />
<meta property="article:author" content="https://www.facebook.com/nmaximo7" />
<meta property="fb:app_id" content="YourCodeHere" />


<!-- Sitemap and RSS -->
<link rel="sitemap" type="application/xml" title="Sitemap" href='{{ "sitemap.xml" | absURL }}' />
{{ with .OutputFormats.Get "RSS" }}
	<link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
	<link href="{{ .Permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
{{ end }}

<!-- Search Engine Crawler Tags -->
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

To add Twitter card and Open Graph metadata, you can use two internal templates (opengraph, twitter_cards) by including the following lines between the HEAD tags in your templates:

{{ template "_internal/opengraph.html" . }}
{{ template "_internal/twitter_cards.html" . }}

head.html and Google Analytics 4

Firstly (Credits: Google Analytics 4 Implementation in Hugo), edit Hugo’s configuration file (config.yaml) and place the Measurement ID:

params:
# Google Analytics 4
googleAnalytics: Add Your Google Analytics code

Then, we will add a partial to run the javascript (layouts/partials/analytics-gtab.html)

  <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsID }}"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', '{{ .Site.Params.GoogleAnalyticsID }}');
   </script>

Finally, you need to call the partial within the head of every page in which you would like tracking, e.g., I have added mine at the end of the file “layouts/partials/head.html”.

{{ if .Site.Params.GoogleAnalyticsID }}
{{ partial "analytics-gtag.html" . }}
{{ end }}

CSS Styling. Bootstrap. Minify and bundle assets

The idea is to use Hugo’s asset pipeline to bundle all the css into a single one (css/bundle.css). Next, we minify it (it removes whitespace, strips comments, etc.) to reduce CSS code size and make our website load faster.

I will put it in layout/partials/style.html that is referenced in _default/baseof.html.

  {{ $csBundle := slice }}
  <!-- Bootstrap CSS.  -->
  {{ $csBundle := $csBundle | append (resources.Get "css/bootstrap.min.css") }}

We are going to build our website using Bootstrap, a free and open-source CSS framework so we can design and customize responsive mobile-first websites.

Our styles will live in a new directory, the assets folder, under a “css” directory. The resources.Get functions uses the assets directory as its base path.

    <!-- My main CSS  -->
    {{ $csBundle := $csBundle | append (resources.Get "css/main.css") }}
    <!-- Monokai CSS. hugo gen chromastyles --style=monokai > syntax.css. -->
    {{ $csBundle := $csBundle | append (resources.Get "css/syntax.css") }}
    <!-- Awesome CSS Fonts. -->
    {{ $csBundle := $csBundle | append (resources.Get "css/all.min.css") }}

    {{ $style := $csBundle | resources.Concat "css/bundle.css" | minify | fingerprint }}

    <link rel="stylesheet"
          href="{{ $style.Permalink | absURL }}">

Hugo provides a fingerprint module to generate hashing for cache busting. It will update your css’s .Permalink with a hash.

Cache Busting is the process of appending some query parameter in the URLs of static resources such as JS, CSS or image file. It is useful because it allows your visitors to receive the most recently updated files without having to perform a hard refresh or clean their browser cache. Otherwise, your users might not notice the changes unless they clear their local caches.
How to add custom Javascript to Hugo.

There is no much to say here. We will bundle, minify, and fingerprint our Javascript files. They will live under the assets directory in a js folder. I will put it in layout/partials/scrip-footer.html that is referenced in _default/baseof.html.

{{ $jsBundle := slice }}
<!-- Bootstrap Js  -->
{{ $jsBundle := $jsBundle | append (resources.Get "js/bootstrap.min.js") }}

<!-- My main Js  -->
{{ $jsBundle := $jsBundle | append (resources.Get "js/main.js") }}

{{ $globalJS := $jsBundle | resources.Concat "js/global.js" | minify | fingerprint }}

<script src="{{ $globalJS.Permalink }}">script>

SEO and Google Analytics. CSS Styling. Hugo & Bootstrap. Add Javascript.

SEO with Hugo: mymeta.html

head.html and Google Analytics 4

CSS Styling. Bootstrap. Minify and bundle assets

Related Posts