in ,

Best SEO Meta Tags For Hugo: Menerapkan SEO Pada Blog Hugo

Penerapan SEO Meta Untuk Hugo

Best SEO Meta Tags For Hugo: Menerapkan SEO Pada Blog Hugo

Setelah saya menggunakan Hugo untuk blogging beberapa hari yang lalu saya sangat menyukai kecepatan dan kegunaannya.

Setelah membuat blog menggunakan Hugo, biasanya saya langsung menerapkan SEO Meta tags untuk blog ini, Hugo memberikan hasil akhir berupa halaman HTML statis yang merupakan cara terbaik agar mudah diindeks di google.

Pada artikel ini, saya akan menunjukkan beberapa contoh bagaimana melakukan SEO secara efektif di Hugo dari awal.

SEO Meta Tags For Hugo

#config.toml

File config.toml ditempatkan di root folder dan kita dapat menambahkan beberapa informasi meta yang penting tentang blog di sini. Misalnya, judul, deskripsi, sosial media, bahasa situs, dll.

baseURL = "https://www.farhamdani.com/"
title = "Farhamdani | Just Another Hugo Blog Site"

languageCode = "en-us"
DefaultContentLanguage = "en"
paginate = 12

enableEmoji = true
enableGitInfo = true
enableRobotsTXT = true
canonifyURLs = true

[params]
  author = "Farhamdani"
  github = "https://github.com/farhamdani"
  facebook = "https://facebook.com/farhamdani"
  og_image = "/images/og.png"
  sitename = "Example Site Name"
  twitter = "@farhamdani"

//#region 
[languages]
  [languages.en]
    languageName = "English"
    languageCode = "en-us"
    weight = 1

[languages.id]
    languageName = "Indonesia"
    languageCode = "id-ID"
    weight = 2
//#endregion

File di atas direferensikan dalam tag HTML untuk meta-informasi pada blog kalian.

baseof.html

Berikutnya adalah file base tempat kita membuat kerangka situs web, berikut adalah file baseof.html default dengan praktik SEO terbaik.

<!doctype html>
<html prefix="og: http://ogp.me/ns#" lang="{{ .Language }}">
  <head itemscope itemtype="{{ .Site.BaseURL }}">
    <meta charset="utf-8"/> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- All the meta tags below will come under this meta partial -->
    {{ partial "meta" . }}
    {{ partial "links" . }}
  </head>
  <body>
    {{ partial "header" . }}
    <main id="main">
      {{ block "main" . }}
      {{ end }}
    </main>
    {{ partial "footer" . }} 
    {{ partial "js" . }}
  </body>
</html>

Meta Tag Title SEO

<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Title }}" />
<meta itemprop="name" content="{{ .Title }} | {{ .Site.Title }}" />
<meta name="application-name" content="{{ .Title }} | {{ .Site.Title }}" />
<meta property="og:site_name" content="{{ .Site.Params.sitename }}" />

Tag Deskripsi

<meta name="description" content="{{ .Params.description }}" />
<meta itemprop="description" content="{{ .Params.description }}" />
<meta property="og:description" content="{{ .Params.description }}" />
<meta name="twitter:description" content="{{ .Params.description }}" />

Tag Tautan

<base href="{{ .Permalink }}" />
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
<meta name="url" content="{{ .Permalink }}" />
<meta name="twitter:url" content="{{ .Permalink }}" />
<meta property="og:url" content="{{ .Permalink }}" />

Tag Bahasa

<meta property="og:locale" content="{{ .Language.Lang }}" />
<meta name="language" content="{{ .Language.LanguageName }}" />
{{ range .AllTranslations }}
  <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}" title="{{ .Language.LanguageName }}" />
{{ end }}

Image Tag SEO

{{ with .Params.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 }}

Tag Tanggal

<meta property="og:updated_time" content={{ .Lastmod.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />

Sitemap & RSS Tag

<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 }}

Tag untuk halaman artikel

Tag meta ini khusus untuk artikel atau halaman blog. Example.org/blog/example-blog/

<!-- To make sure this renders only in the article page, we check the section -->
{{ if eq .Section "blog" }}

<!-- Pagination meta tags for list pages only -->
{{ $paginator := .Paginate (where .Pages "Section" "blog") }} 
{{ if $paginator }}
  <link rel="first" href="{{ $paginator.First.URL }}" />
  <link rel="last" href="{{ $paginator.Last.URL }}" />
  {{ if $paginator.HasPrev }}
    <link rel="prev" href="{{ $paginator.Prev.URL }}" />
  {{end }}
  {{ if $paginator.HasNext }}
    <link rel="next" href="{{ $paginator.Next.URL }}" />
  {{end }}
{{end }}

<meta property="og:type" content="article" />
<meta property="article:publisher" content="{{ .Site.Params.facebook }}" />
<meta property="og:article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
<meta property="article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />

{{ with.Params.author }}
  <meta property="og:article:author" content="{{humanize . }}" />
  <meta property="article:author" content="{{humanize . }}" />
  <meta name="author" content="{{humanize . }}" />
{{ end }}

{{ with.Params.category }}
  <meta name="news_keywords" content="{{ index . 0 }}" />
  <meta property="article:section" content="{{ index . 0 }}" />
{{ end }}

<script defer type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "headline": {{ .Title }},
    "author": {
      "@type": "Person",
      "name": "{{ .Site.Params.github }}"
    },
    "datePublished": "{{ .Date.Format "2006-01-02" }}",
    "description": {{ .Description }},
    "wordCount": {{ .WordCount }},
    "mainEntityOfPage": "True",
    "dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
    "image": {
      "@type": "imageObject",
      "url": "{{ with .Params.image }}{{ .Permalink }}{{ end }}"
    },
    "publisher": {
      "@type": "Organization",
      "name": "{{ .Site.Title }}",
      "logo": {
        "@type": "imageObject",
        "url": "https://www.example.com/images/brand/favicon.png"
      }
    }
  }
</script>
{{ end }}

Meta Tag Untuk Halaman Situs Web

Untuk halaman seperti contact, about, dll. Jangan menyertakan tag ini pada halaman artikel atau blog.

<meta property="og:type" content="website" />
<meta name="author" content="{{ .Site.Params.author }}" />
<script defer type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "url": "{{ .Permalink }}",
    "sameAs": [
      "{{ .Site.Params.facebook }}",
      "{{ .Site.Params.github }}"
    ],
    "name": "{{ .Title }}",
    "logo": "https://www.example.com/images/brand/favicon.png"
  }
</script>

Favicon Tag

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/favicon-152-precomposed.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/favicon-144-precomposed.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/favicon-120-precomposed.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/favicon-114-precomposed.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/favicon-180-precomposed.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/favicon-72-precomposed.png" />
<link rel="apple-touch-icon" href="/favicons/favicon-57.png" />
<link rel="icon" href="/favicons/favicon-32.png" sizes="32x32" />
<link rel="icon" sizes="192x192" href="/favicons/favicon-192.png" />

Search Engine Crawler Tag

<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

Social Media Tag

<meta name="twitter:site" content="{{ .Site.Params.twitter }}" />
<meta name="twitter:creator" content="{{ .Site.Params.twitter }}" />
<meta property="fb:app_id" content="538089519640705" />
<meta property="fb:admins" content="100000686899395" />

Meta Tag SEO Tambahan

<!-- Manifest File -->
<link rel="manifest" href='{{ "manifest.json" | absURL }}' />

<!-- Theme Color -->
<meta name="theme-color" content="#141414" />
<meta name="msapplication-TileColor" content="#141414" />

<meta name="keywords" content="" />
<meta name="imagemode" content="force" />
<meta name="coverage" content="Worldwide" />
<meta name="distribution" content="Global" />
<meta name="HandheldFriendly" content="True" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="apple-mobile-web-app-title" content="{{ .Site.Params.sitename }}" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-touch-fullscreen" content="yes" />

Dan Itulah SEO meta tags yang bisa diterapkan pada blog hugo kita, jika ada tambahan tags metanya silahkan tambahin di kolom komentar saja.

Semoga artikel ini bisa bermanfaat terimakasih.

Written by Farhamdani

Hanya seorang pria yang hoby cari receh di internet untuk melunasi cicilan panci, mari berteman dengan saya!

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

GIPHY App Key not set. Please check settings

membuat-email-dengan-domain-sendiri

3 Langkah Membuat Email Dengan Domain Sendiri Di Cpanel Hosting

facebook ads vs google ads

Facebook Ads vs Google Adwords: Mana Yang Terbaik Untuk Beriklan?