Kode Meta Tag SEO-Friendly untuk Untuk Template Blogger

Darmudi Susanto
14 Feb, 2025

Berikut adalah contoh meta tag SEO-friendly untuk template Blogger. Meta tag ini membantu meningkatkan visibilitas blog di mesin pencari seperti Google.

Kode Meta Tag SEO-Friendly untuk Blogger

Letakkan kode ini di dalam <head> template Blogger:

<head>
    <!-- Meta Data Dasar -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Nama Anda">
    <meta name="language" content="id">
    
    <!-- Dynamic Meta Title -->
    <title><data:blog.pageTitle/></title>

    <!-- Dynamic Meta Description -->
    <b:if cond='data:blog.metaDescription'>
        <meta name="description" content='data:blog.metaDescription'/>
    <b:else/>
        <meta name="description" content="Deskripsi singkat tentang blog Anda di sini."/>
    </b:if>

    <!-- Dynamic Meta Keywords -->
    <b:if cond='data:blog.pageType == "index"'>
        <meta name="keywords" content="kata kunci utama, niche blog, keyword tambahan"/>
    <b:else/>
        <meta name="keywords" content="<data:blog.pageTitle/>"/>
    </b:if>

    <!-- Open Graph for Social Media -->
    <meta property="og:title" content="<data:blog.pageTitle/>"/>
    <meta property="og:description" content="Deskripsi singkat untuk media sosial."/>
    <meta property="og:image" content="URL_GAMBAR_THUMBNAIL"/>
    <meta property="og:url" content="<data:blog.url/>"/>
    <meta property="og:type" content="website"/>

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:title" content="<data:blog.pageTitle/>"/>
    <meta name="twitter:description" content="Deskripsi singkat untuk Twitter."/>
    <meta name="twitter:image" content="URL_GAMBAR_THUMBNAIL"/>

    <!-- Canonical URL -->
    <link rel="canonical" href="<data:blog.canonicalUrl/>"/>

    <!-- Robots Meta Tag (SEO) -->
    <b:if cond='data:blog.pageType == "index"'>
        <meta name="robots" content="index, follow"/>
    <b:else/>
        <meta name="robots" content="noindex, follow"/>
    </b:if>
</head>

Penjelasan Meta Tag

  1. <title> → Menggunakan data:blog.pageTitle, sehingga judul halaman otomatis sesuai dengan konten.
  2. meta description → Menampilkan deskripsi blog atau artikel (gunakan data:blog.metaDescription).
  3. meta keywords → Bisa diisi dengan kata kunci relevan, meskipun Google kini lebih mengutamakan konten berkualitas.
  4. Open Graph & Twitter Card → Untuk tampilan yang lebih menarik saat dibagikan di media sosial.
  5. Canonical URL → Mencegah duplikat konten dengan menentukan URL utama.
  6. Robots Meta Tag → Memastikan halaman indeks di Google dengan benar.

Kode ini bisa langsung dimasukkan ke template Blogger untuk meningkatkan SEO blog Anda. Jika butuh penyesuaian lebih lanjut, beri tahu saya!

Tambahan:

Jika kode meta tag tidak bisa disimpan di Blogger, kemungkinan ada beberapa masalah, seperti:

  • Karakter < dan > dalam tag Blogger (<data:blog.../>) harus diubah ke format XML yang valid.
  • Gunakan b:if yang benar, terutama dalam kondisi dinamis.
  • Pastikan semua tag ditutup dengan benar.

Berikut adalah kode meta tag SEO yang sudah diperbaiki agar bisa disimpan di template Blogger:

Kode Meta Tag SEO-Friendly Blogger (Fix Error)

<head>
    <!-- Meta Data Dasar -->
    <meta charset='UTF-8'/>
    <meta name='viewport' content='width=device-width, initial-scale=1'/>
    <meta name='author' content='Nama Anda'/>
    <meta name='language' content='id'/>

    <!-- Dynamic Meta Title -->
    <title><data:blog.pageTitle/></title>

    <!-- Dynamic Meta Description -->
    <b:if cond='data:blog.metaDescription != ""'>
        <meta expr:name='description' expr:content='data:blog.metaDescription'/>
    <b:else/>
        <meta name='description' content='Deskripsi blog Anda di sini'/>
    </b:if>

    <!-- Dynamic Meta Keywords -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <meta name='keywords' content='kata kunci utama, niche blog, keyword tambahan'/>
    <b:else/>
        <meta expr:name='keywords' expr:content='data:blog.pageTitle'/>
    </b:if>

    <!-- Open Graph (Facebook, WhatsApp, etc.) -->
    <meta expr:property='og:title' expr:content='data:blog.pageTitle'/>
    <meta expr:property='og:description' expr:content='data:blog.metaDescription'/>
    <meta property='og:image' content='URL_GAMBAR_THUMBNAIL'/>
    <meta expr:property='og:url' expr:content='data:blog.url'/>
    <meta property='og:type' content='website'/>

    <!-- Twitter Card -->
    <meta name='twitter:card' content='summary_large_image'/>
    <meta expr:name='twitter:title' expr:content='data:blog.pageTitle'/>
    <meta expr:name='twitter:description' expr:content='data:blog.metaDescription'/>
    <meta property='twitter:image' content='URL_GAMBAR_THUMBNAIL'/>

    <!-- Canonical URL -->
    <link expr:href='data:blog.canonicalUrl' rel='canonical'/>

    <!-- Robots Meta Tag -->
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <meta name='robots' content='index, follow'/>
    <b:else/>
        <meta name='robots' content='noindex, follow'/>
    </b:if>
</head>

Perbaikan yang Dilakukan

  1. Menggunakan expr:name dan expr:content untuk elemen yang membutuhkan ekspresi (data:blog...).
  2. Mengubah tanda kutip ganda (") menjadi entitas XML (&quot;) untuk kondisi b:if, agar valid di Blogger.
  3. Memastikan semua tag ditutup dengan benar, terutama untuk b:if.

Sekarang, kode ini seharusnya bisa disimpan tanpa error di template Blogger. Silakan coba, dan jika masih ada kendala, beri tahu saya!

Next Post Previous Post