JustToThePoint English Website Version
JustToThePoint en español
JustToThePoint in Thai

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


Firstly, you need to enable Google Analytics by editing Hugo’s configuration file (config.yaml) and add the following code: googleAnalytics = “Add Your Google Analytics code”

Then, we will use a Hugo template (_internal/google_analytics_async.html) to enable Google Analytics on our site. It will be written on the head.html’s last line. When Hugo generates your site, the appropriate JavaScript code will be added to your pages.

    <!-- Google Analytics. Credits: JANNE KEMPPAINEN, https://pakstech.com/, Let's Create a New Hugo Theme. -->
    {{ if not (in (string .Site.BaseURL) "localhost") }}
    <!-- We don't want Google Analytics when we are deploying Hugo locally (localhost) -->
        {{ template "_internal/google_analytics_async.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>
Bitcoin donation

JustToThePoint Copyright © 2011 - 2022 Anawim. ALL RIGHTS RESERVED. Bilingual e-books, articles, and videos to help your child and your entire family succeed, develop a healthy lifestyle, and have a lot of fun.

This website uses cookies to improve your navigation experience.
By continuing, you are consenting to our use of cookies, in accordance with our Cookies Policy and Website Terms and Conditions of use.