Meta Tag Seo Untuk Hugo

Enda 13 minutes.

Meta Judul SEO & Meta deskripsi SEO

Sebelum kita mempelajari cara mengoptimalkan ini di Hugo, mari kita lihat sekilas apa bidang ini, di mana mereka muncul, dan apa yang mereka lakukan.

Apa itu judul `<title>` SEO?

Judul SEO adalah satu-satunya bidang teks terpenting pada halaman web dalam hal SEO. Itu berada di <head> bagian halaman Anda, dan dapat dilihat di tab browser setelah Anda memuat halaman. Biasanya muncul di Google dan mesin pencari lainnya sebagai teks tautan biru.

Apa itu meta deskripsi?

meta Deskripsi adalah ringkasan halaman web yang diatur dalam tag meta HTML. Ini sering ditampilkan oleh mesin pencari dalam hasil mereka sebagai deskripsi halaman, sehingga dapat berdampak pada rasio klik-tayang halaman. meta deskripsi yang relevan dapat membantu meningkatkan SEO halaman Anda.

Deskripsi meta adalah bidang teks SEO penting lainnya di halaman web, meskipun tidak sepenting ekstensi <title>. Biasanya tidak terlihat saat Anda memuat halaman web, meskipun sering muncul sebagai teks ringkasan hitam di Google dan mesin pencari lainnya.

Judul SEO dan deskripsi SEO di Hugo: Cara membuatnya

Sebelum kita membahas secara spesifik, saya ingin memperjelas bahwa pendekatan yang ditunjukkan di bawah ini adalah untuk beranda blog “jadul” yang menampilkan, katakanlah, sepuluh posting terbaru, dan kemudian paginasi.

Namun, jika Anda menggunakan beranda blog “gaya pemasaran” (yang meminta alamat email pengguna dan tidak menampilkan entri blog apa pun), maka Anda harus mengubah kode di bagian ini. Yang mengatakan, Anda mungkin masih akan menemukan banyak hal yang berguna.

Dan seterusnya!

Secara umum, kode yang akan saya tunjukkan kepada Anda sebentar lagi akan menghasilkan tiga hasil SEO.

Hasil SEO 1

Untuk beranda (yaitu /), judul dan deskripsi SEO akan diisi dari file konfigurasi Hugo, config.toml.

Hasil SEO 2

Jika beranda di atas tumpah ke halaman berhalaman (misalnya halaman 2, halaman 3 dll), maka untuk halaman ini, gunakan judul SEO yang sama seperti untuk beranda murni, tetapi tambahkan | Page 2 (atau nomor apa pun yang sesuai) ke SEO <title>.

Misalnya, jika SEO beranda situs Anda <title> adalah ABC Widgets, maka SEO Halaman 2 <title> akan menjadi ABC Widgets | Page 2.

Ini memastikan setiap halaman memiliki judul SEO yang unik, yang disukai Google. Selanjutnya, deskripsi SEO juga dibuat unik untuk masing-masing halaman yang diberi halaman ini.

Hasil SEO 3

Terakhir, jika halaman tersebut adalah posting blog (misalnya /my-blog-post/) atau halaman (misalnya /about/) dan memiliki SEO khusus <title>, gunakanlah. Jika tidak memilikinya, gunakan kembali judul tradisional (misalnya <h1>) untuk SEO <title>. Dalam kedua kasus, gunakan deskripsi SEO khusus di bidang deskripsi meta.

Kode untuk bermain bersama

Inilah kode SEO Hugo yang relevan yang saya gunakan di <head> bagian saya :


{{ $paginator := .Paginate (where .Site.RegularPages ".Params.post" "!=" false) }}

{{ if .IsHome }}
 {{ if eq $paginator.PageNumber 1 }}
  <title>{{ .Title }}</title>
  <meta name="description" content="{{ .Site.Params.description }}" />
 {{ else }}
  <title>{{ .Title }} | Page {{ $paginator.PageNumber }}</title>
  <meta name="description" content="This is page {{ $paginator.PageNumber }} of our content." />
 {{ end }}
{{ else }}
 {{ if .Params.seoTitle }}
  <title>{{ .Params.seoTitle }}</title>
 {{ else }}
  <title>{{ .Title }}</title>
 {{ end }}
 <meta name="description" content="{{ .Description }}" />
{{ end}}

Panduan kode
Oke, itu banyak kode yang harus dilalui! Bersabarlah dengan saya, dan mari kita berjalan melewatinya, baris demi baris.


{{ $paginator := .Paginate (where .Site.RegularPages ".Params.post" "!=" false) }}

Di sinilah kita mengatur objek paginator. Anda perlu mendeklarasikannya di sini, bahkan jika Anda telah mendeklarasikannya di tempat lain di situs Hugo Anda.


{{ if .IsHome }}

Ini adalah “pernyataan if” yang memeriksa untuk melihat apakah halaman tersebut adalah beranda.


{{ if eq $paginator.PageNumber 1 }}

Ini membuat kami siap untuk menghasilkan Hasil SEO 1, seperti yang dijelaskan di atas. Kami sedang memeriksa apakah laman saat ini sama dengan ( eq) versi murni beranda, seperti example.com/.


<title>{{ .Title }}</title>

Ini mengisi SEO <title> beranda dengan judul situs dari file konfigurasi kami, config.toml.


<meta name="description" content="{{ .Site.Params.description }}" />

Demikian pula, ini mengisi deskripsi SEO beranda dari config.toml.


{{ else }}

Sekarang kita beralih ke Halaman 2, Halaman 3 dll dari beranda (Hasil SEO 2, seperti di atas).


<title>{{ .Title }} | Page {{ $paginator.PageNumber }}</title>

Untuk halaman-halaman ini, kami menginginkan SEO yang sama <title> dengan halaman beranda “murni”, hanya dengan menambahkan nomor halaman sehingga unik. Misalnya, jika SEO beranda situs Anda <title> adalah ABC Widgets, maka judul Halaman 2 akan menjadi ABC Widgets | Page 2.


<meta name="description" content="This is page {{ $paginator.PageNumber }} of our content." />

Di sini kami membuat deskripsi SEO kami unik untuk setiap halaman yang diberi halaman ini. Misalnya, Halaman 2 akan memiliki deskripsi SEO ini: “Ini adalah halaman 2 dari konten kami”. Tentu saja, Anda bisa menulis deskripsi SEO yang lebih baik dari ini, tetapi Anda mendapatkan idenya.

{{ end }} Di sini kita mengakhiri blok kode yang kita mulai di {{ if eq $paginator.PageNumber 1 }}

{{ else }} Sekarang kita mulai pada Hasil SEO 3 (lihat di atas). Kami sedang melakukan SEO <title> dan deskripsi untuk posting dan halaman blog (secara teknis, apa pun yang bukan beranda).

{{ if .Params.seoTitle }} Jika seoTitleparameter telah ditetapkan di YAML depan pos …

<title>{{ .Params.seoTitle }}</title>… kemudian menggunakannya sebagai SEO <title>.

{{ else }} Namun, jika belum ada yang ditulis…

<title>{{ .Title }}</title>… maka fallbacknya adalah membuat <h1> judul berfungsi ganda sebagai SEO <title>.

{{ end }} Itu menyelesaikan SEO <title>…

<meta name="description" content="{{ .Description }}" />, dengan atau tanpa SEO khusus <title> di bagian depan YAML, gunakan description bidang YAML untuk mengisi deskripsi SEO.

{{ end}} Kami sudah selesai di sini!

Apakah kita benar-benar perlu membuat setiap judul SEO dan deskripsi SEO unik?

Di atas, saya menyebutkan bahwa kita harus membuat <title> deskripsi SEO dan SEO setiap halaman unik, untuk membuat Google senang.

Saya ingin membahas ini sedikit lebih banyak, bagi yang tertarik. Jangan ragu untuk menggulir ke bawah sebaliknya!

Di luar kotak, pagination Hugo memberikan pengalaman SEO yang sedikit kurang optimal.

Jika Anda memiliki konten daftar paginasi, seperti di beranda atau di bagian Anda, maka Anda akan berakhir dengan url seperti ini:

/
/page/2
/page/3
Semua baik dan bagus.

Sedikit masalah SEO adalah bahwa masing-masing halaman akan memiliki dokumen yang sama <title> dan meta description, yang merupakan sesuatu Google memperingatkan terhadap :

Hindari judul berulang atau boilerplate. Sangat penting untuk memiliki judul deskriptif yang berbeda untuk setiap halaman di situs Anda.

Namun, orang dapat berargumen bahwa ini tidak berlaku untuk halaman yang diberi halaman.

Pada bulan Maret 2018, John Mueller, Analis Tren Webmaster di Google, ditanya :

John, apakah Anda setuju bahwa orang dapat dengan aman mengabaikan peringatan deskripsi meta duplikat di Google Search Console untuk URL arsip yang diberi halaman?

Dengan kata lain, apakah masalah pagination Hugo ini menjadi masalah untuk SEO?

Yohanes menjawab:

Ya, tidak apa-apa [mengabaikan peringatan Google Search Console yang relevan].

Sangat berguna untuk mendapatkan umpan balik tentang judul & deskripsi duplikat jika Anda tidak sengaja menggunakannya pada halaman yang benar-benar terpisah, tetapi untuk seri yang diberi halaman, ini agak normal & diharapkan menggunakan hal yang sama.

Oke, jadi mungkin tidak menjadi masalah bagi Google; namun saya yakin cara terbaik untuk mengontrol cara Google memperlakukan konten di halaman Anda adalah dengan menerapkan tata kelola yang cermat atas apa yang Anda publikasikan. Dan kode saya di atas melakukan hal itu.

Meta Deskripsi

tag <meta> ditempatkan di dalam tag <head> dokumen. Urutan meta tag lainnya tidak masalah. Sintaks meta deskripsi untuk halaman MDN tentang tag meta terlihat seperti ini:


<meta name="description" content="The HTML meta element represents metadata that cannot be represented by other HTML meta-related elements, like base, link, script, style or title."/>

Menambahkan meta deskripsi ke tata letak halaman Hugo

Di mana menempatkan meta tag Setiap halaman Anda harus sudah memiliki tag judul di dalam head. Ini mungkin khusus per halaman, sama seperti meta deskripsi. Ini menjadikannya lokasi yang baik untuk tag meta deskripsi. Dalam tata letak untuk setiap halaman, tambahkan tag meta deskripsi di file <head>.

Mungkin Anda menggunakan sebagian untuk beberapa tag di situs Anda <head>: konten yang akan umum di semua laman, seperti area pandang meta, pengkodean UTF-8, lembar gaya umum, atau tag Google Analytics. Karena meta deskripsi dikustomisasi untuk konten setiap halaman, kecil kemungkinan menempatkannya di bagian ini akan cukup baik, karena nilai apa pun yang Anda tetapkan akan sama di setiap halaman. (Namun, jika ini cukup untuk situs Anda, silakan!)


<head>
  <title>{{ .Site.Title }} - Contoh Title</title>
  <meta name="description" content="ini adalah contoh meta description umum" />
  {{ partial "head.html" . }}
</head>

atau

<head>
  <title>{{ .Title }}</title>
  <meta name="description" content="ini adalah contoh meta description umum" />
  {{ partial "head.html" . }}
</head>

Meta deskripsi untuk Konten

meta deskripsi harus meringkas konten halaman. Karena mesin telusur mengubah algoritme mereka setiap saat, cari saran terbaru dan tinjau kembali deskripsi Anda sesekali untuk memeriksa apakah mereka masih mematuhi praktik terbaik.

Ketika Anda telah memutuskan seperti apa deskripsinya, ada beberapa opsi berbeda untuk mengaturnya tergantung pada jenis halaman.

Meta Tag Homepage

Gunakan parameter seluruh situs
Untuk halaman yang lebih umum, gunakan nilai yang ditetapkan dalam file konfigurasi untuk situs Anda. Jika file konfigurasi Anda ditulis dalam TOML, nilainya dapat diatur dengan:


   [params]
     Description = "The personal website, blog and dev diary of clairecodes"

Dan kemudian di file template, ini dapat digunakan dengan sintaks:


<meta name="description" content="{{ .Site.Params.Description }}" />

letakkan meta tag diatas pada index.html

Meta Tag Content

Gunakan nilai yang ditetapkan di depan materi untuk templat tipe konten Untuk posting blog dan jenis konten lainnya, Anda dapat menambahkan nilai di bagian depan setiap file konten dan menggunakannya.

Pertimbangkan file konten dengan materi depan seperti ini:


   ---
   layout: post
   title: "My awesome blog post"
   date: 2015-12-15 00:00:01
   description: "An insightful description for this page that Google will like"
   ---

Templat untuk jenis konten ini bisa berupa themes/your-theme/layouts/_default/single.html. Tambahkan tag meta dalam file dengan:


<meta name="description" content="{{ .Description }}" />

atau yang lebih lengkap 

        {{ if .Description }}
        <meta name="description" content="{{ .Description }}"/>
        {{ else if .IsPage }}
        <meta name="description" content="{{ .Summary | plainify }}"/>
        {{ else }}
        <meta name="description" content="{{ .Site.Params.Description }}"/>
        {{ end }}

Canonicals

Saya suka menyertakan apa yang disebut “kanonik referensi sendiri” di setiap halaman situs saya.

Mari saya jelaskan seluruh kit dan caboodle ini di bawah ini.

Apa itu tautan kanonik?
Tautan kanonik adalah cara untuk memberi tahu Google bahwa laman yang sedang dirayapinya sebenarnya memiliki versi “resmi” di url yang berbeda.

Misalnya, example.com/life-on-mars/?tracking=123mungkin memiliki url kanonik example.com/life-on-mars/.

Canonicals dapat hidup di <head> bagian halaman web, dan memiliki bentuk: <link rel="canonical" href="https://example.com/life-on-mars/" />

Canonicals juga dapat hidup di header HTTP (yang berguna untuk dokumen non-HTML seperti PDF), dan memiliki bentuk: Link: <http://www.example.com/downloads/return-to-the-moon.pdf>; rel="canonical"

Canonicals adalah salah satu cara untuk membersihkan duplikat konten di situs Anda, namun, Google menganggapnya sebagai “petunjuk kuat” , bukan arahan. Ini berarti mereka dapat (dan sering) diabaikan oleh Google.

Apa itu tautan kanonik “referensi mandiri”?

Tautan kanonik referensi sendiri hanyalah tautan kanonik yang menunjuk ke dirinya sendiri. Misalnya, jika example.com/life-on-mars/memiliki tautan kanonik dari example.com/life-on-mars/, maka itu akan menjadi kanonik referensi sendiri. Beberapa orang menyebutnya sebagai “kanonik referensi diri”—ini adalah hal yang sama.

Anda dapat melihat contoh di kode sumber halaman ini.

Mengapa Anda harus menggunakan tautan kanonik referensi sendiri (self-referential canonical link)?

Alasan menggunakan kanonik rujukan mandiri adalah untuk memastikan bahwa URL dengan parameter pelacakan (seperti example.com/life-on-mars/?tracking=123) secara otomatis memiliki kanonis yang menunjuk ke url bersih; dalam hal ini, example.com/life-on-mars/.

Canonicals: Kode untuk situs tanpa pagination

Jika Anda tidak memiliki pagination di situs Hugo Anda, maka kode untuk kanonik cukup mudah.

Berikut kode Hugo untuk menyisipkan kanonik referensi sendiri ke dalam file tata letak yang menghasilkan <head> bagian:

<link rel="canonical" href="{{ .Permalink | safeURL }}" />

Panduan kode
The {{ .Permalink | safeURL }} variabel dalam baris kode di atas memastikan bahwa Anda akan mendapatkan kanonik self-referensial pada setiap halaman situs Hugo Anda, baik itu homepage, posting blog, halaman, indeks dan sebagainya.

Canonicals: Kode untuk situs yang memiliki halaman beranda yang diberi halaman Namun, jika Anda memiliki halaman beranda yang diberi halaman, maka kode di bawah ini akan berfungsi lebih baik:


{{ $paginator := .Paginate (where .Site.RegularPages ".Params.post" "!=" false) }}
<!-- Remove the line above if you already have it in the file, you don't need it twice in the same file (you do need it once in each file that refers to the paginator object though). -->
{{ if .IsHome }}
  {{ if eq $paginator.PageNumber 1 }}
    <link rel="canonical" href="{{ .Permalink | safeURL }}" />
  {{ else }}
    <link rel="canonical" href="{{ .Permalink | safeURL }}page/{{ $paginator.PageNumber }}/" />
  {{ end }}
{{ else }}
  <link rel="canonical" href="{{ .Permalink | safeURL }}" />
{{ end }}

Panduan kode

Kode di atas menghasilkan tautan kanonik.

Hal pertama yang pertama; kita akan membutuhkan baris yang membuat $paginator objek di suatu tempat di file ini (yang bagi saya adalah /layouts/partials/header.html). Ini tidak cukup untuk membuat $paginator objek dalam file lain (seperti dalam template situs Anda) dalam proyek Hugo Anda; itu perlu dalam file ini juga. Namun, jika Anda sudah membuatnya di file ini (seperti yang saya lakukan ketika saya mengatur SEO saya <title> di atas), tidak perlu memasukkannya dua kali dalam satu file.

Oke, lanjutkan ke pernyataan if/else.

Pertama, kami memeriksa apakah halaman tersebut adalah beranda, dengan {{ if .IsHome }}.

Selanjutnya, kami memeriksa apakah halaman tersebut adalah halaman beranda murni , yaitu bukan “Halaman Beranda 2” yang diberi halaman atau serupa. Kami menjalankan pemeriksaan ini dengan {{ if eq $paginator.PageNumber 1 }}. Ingat bahwa eqdigunakan sebagai ganti =, dan urutan kata berbeda dengan kebanyakan bahasa pemrograman. Bagaimanapun, jika itu sebenarnya adalah beranda murni , maka kami membuat tautan kanonik referensi mandiri sederhana dengan <link rel="canonical" href="{{ .Permalink | safeURL }}" />.

Namun, jika halaman tersebut adalah beranda tetapi halaman 2 atau seterusnya, maka kami menyiapkan tautan kanonik kami untuk menyertakan nomor halaman sehingga benar-benar referensi sendiri. Kami melakukan ini dengan else pernyataan dan kemudian baris ini: <link rel="canonical" href="{{ .Permalink | safeURL }}page/{{ $paginator.PageNumber }}/" />

Misalnya, “Halaman Beranda 2” Hugo umumnya memiliki url formulir https://example.com/page/2 . Kode kanonik yang dibahas dalam paragraf ini memberikan halaman itu kanonik referensi mandiri yang benar-benar cocok dengan url itu.

Terakhir, jika halaman tersebut sama sekali bukan beranda—seperti posting blog atau halaman kontak—maka kita dapat menggunakan generator tautan kanonik sederhana untuk membuat kanonik referensi mandiri yang akurat. Kami menggunakan tepercaya kami {{ .Permalink | safeURL }} untuk membuat tautan kanonik: <link rel="canonical" href="{{ .Permalink | safeURL }}" />.

Oke, jadi ada sedikit yang terjadi di sini, tapi sebenarnya lebih sederhana daripada yang terlihat pada pandangan pertama—saya janji.

Tag “noindex” dan “noarchive”

Sekarang saatnya membahas bagaimana kami ingin Google memperlakukan halaman web kami dalam hal pengindeksan dan penyimpanan cache. Mari saya jelaskan.

Apa itu tag noindex dalam SEO?

Sebuah tag noindex pada halaman web memberitahu Google dan mesin pencari terkemuka lainnya untuk tidak mengindeks (yaitu menunjukkan) halaman itu kepada pengguna. Halaman akan tetap dapat dilihat oleh siapa saja yang telah mem-bookmark-nya, atau mengetiknya, atau diberi tautan dari orang lain.

Seperti apa tampilan tag noindex, dan kemana perginya?

Tag noindex berada di <head> bagian halaman web. Ini terlihat seperti ini: <meta name="robots" content="noindex" />

Akankah Google menghormati tag noindex?

Google dan mesin pencari terkemuka lainnya akan menghormati tag noindex tersebut. Ini dianggap sebagai “petunjuk”, tidak seperti tag kanonik yang dianggap Google sebagai “petunjuk” dan terkadang sering mengabaikan.

Apa itu tag ’noarchive’ di SEO?

Sebuah tag noarchive pada halaman web memberitahu Google dan mesin pencari terkemuka lainnya untuk tidak men-cache salinan halaman Anda. Ini sangat berguna untuk situs berita, antara lain, seolah-olah Anda memperbarui artikel untuk alasan hukum, Anda tidak ingin salinan cache di Google untuk dilihat oleh pengacara oposisi.

Seperti apa tampilan tag noarchive, dan kemana perginya?
Tag noarchive juga berada di <head> bagian halaman web, dan terlihat seperti ini:


<meta name="robots" content="noarchive" />

Akankah Google menghormati tag noarchive?

Google dan mesin pencari terkemuka lainnya akan menghormati tag noarchive tersebut. Ini dianggap sebagai “petunjuk”, tidak seperti tag kanonik yang dianggap Google sebagai “petunjuk” dan terkadang sering mengabaikan.

Kode untuk bermain bersama

Jika saya ingin noindex halaman web di situs Hugo (seperti halaman “terima kasih”), saya cukup menambahkan parameter khusus ke bagian depan halaman itu, seperti ini: noindex: true. Saya memilih untuk menyebutnya noindex, tetapi Anda dapat mengubah ini jika Anda mau.

Kemudian di file tata letak yang menghasilkan <head> bagian, saya menyertakan kode ini:


{{ if .Params.noindex }}
 <meta name="robots" content="noindex" />
{{ else }}
 <meta name="robots" content="noarchive">
{{ end }}

Panduan kode

Mari kita lihat kode ini, baris demi baris.

{{ if .Params.noindex }} Baris ini memeriksa untuk melihat apakah parameter noindex disetel ke true dalam halaman tertentu. Perhatikan sintaks singkatnya; Anda tidak harus secara eksplisit mengatakan “sama dengan benar”.

<meta name="robots" content="noindex" /> Jika parameter noindex yang ditetapkan untuk true, kemudian menghasilkan tag noindex, sehingga menghalangi Google mengindeks halaman.

{{ else }} Di sisi lain, jika parameter noindex disetel ke false, atau tidak ada (saya melakukan yang terakhir), maka …

<meta name="robots" content="noarchive">… tunjukkan tag noarchive sebagai gantinya …

{{ end }} … dan akhiri “pernyataan if” kami.

credit:

Cara Mengatasi Error Amp Page Url Is Missing a Canonical Tag

10 Manfaat Dan Keuntungan Media Sosial Untuk Bisnis Online

Meta Tag Seo Untuk Hugo

Meta Judul SEO & Meta deskripsi SEO

Apa itu judul <title> SEO?

Apa itu meta deskripsi?

Judul SEO dan deskripsi SEO di Hugo: Cara membuatnya

Apakah kita benar-benar perlu membuat setiap judul SEO dan deskripsi SEO unik?

Meta Deskripsi

Menambahkan meta deskripsi ke tata letak halaman Hugo

Meta deskripsi untuk Konten

Meta Tag Homepage

Meta Tag Content

Canonicals

Apa itu tautan kanonik “referensi mandiri”?

Tag “noindex” dan “noarchive”

Apa itu tag noindex dalam SEO?

Seperti apa tampilan tag noindex, dan kemana perginya?

Akankah Google menghormati tag noindex?

Apa itu tag ’noarchive’ di SEO?

Akankah Google menghormati tag noarchive?

Kode untuk bermain bersama

Apa itu judul `<title>` SEO?