Mengapa muncul peringatan bahwa terdapat beberapa tag H1?

Setelah membuat halaman dengan Framer dan menjalankannya melalui alat analisis SEO, terkadang kita menerima pesan peringatan bahwa 'Terdapat beberapa tag H1'. Pesan ini muncul karena Framer menggandakan elemen yang sama di berbagai posisi untuk mewujudkan desain web responsif.
Misalnya, untuk menampilkan judul yang sama di posisi berbeda pada lingkungan desktop dan mobile, elemen H1 ditempatkan berulang, dan dalam proses menggunakan media query (CSS) untuk menyembunyikan atau menampilkan elemen sesuai situasi, kode HTML terlihat memiliki beberapa tag H1, tetapi judul sebenarnya yang tampil di layar hanya satu, sehingga tidak menjadi masalah besar untuk SEO.

Bagaimana Google menganalisis halaman?

Google tidak hanya melihat kode HTML saja, tetapi juga menggunakan alat bernama browser Headless Chromium untuk merender halaman. Sederhananya, Google menganalisis halaman persis seperti yang kita lihat di peramban. Kemudian, Google secara otomatis mengabaikan elemen tersembunyi (display: none dll.) sehingga tag H1 yang digandakan dan disembunyikan oleh CSS tidak mempengaruhi analisis mesin pencari.

Catatan: Headless Chromium adalah alat yang membuka dan menganalisis situs web tanpa layar (program yang membaca dan memproses halaman secara otomatis).

Apakah peringatan dari alat SEO boleh diabaikan?

Alat SEO tidak seakurat Google dan hanya menganalisis berdasarkan kode HTML. Oleh karena itu, bisa muncul peringatan bahwa terdapat beberapa tag H1. Namun, peringatan ini berbeda dengan cara evaluasi halaman oleh Google sehingga, jika Anda memahami maksud desain Framer, Anda dapat mengabaikannya.
Jika peringatan ini tetap mengganggu, coba metode berikut.

• Gunakan tag lain (h2, h3, dll) dan atur hanya stylenya, meskipun teks adalah sama

• Menggunakan aria-hidden="true" atau display: none untuk mengabaikan semantik (Anda dapat menetapkan sehingga Google mengabaikan tag ini sambil tetap mematuhi standar aksesibilitas.)

Cara pengaturan aria-hidden="true" (atribut aksesibilitas)

Anda tidak dapat memasukkan atribut HTML secara langsung ke elemen di FramerFramer, tetapi Anda dapat melakukannya dengan menggunakan Komponen Kode (Code Component).

1. Klik tab Assets di pojok kiri atas layar pengeditan Framer (atau klik tombol + di pojok kanan atas → cari item “Code”)

2. Klik item Code di bagian bawah

3. Pilih New Code Component

export function HiddenHeading() {
  return <h1 aria-hidden="true">Judul tersembunyi</h1>;
}

Jika komponen ini ditempatkan di kanvas desain, elemen tersebut akan terlihat di layar tetapi diabaikan oleh pembaca layar atau mesin pencari.

Cara mengatur display:none (menyembunyikan sepenuhnya)

1. Pilih elemen yang ingin disembunyikan

2. Di panel properti sebelah kanan, cari opsi Visibility atau Display dan atur menjadi Hidden Atau, Anda juga dapat mengatur Visible/Hidden secara berbeda hanya pada titik pemecahan tertentu (seperti mobile/desktop).

Di HTML, ini akan dirender sebagai style="display: none", dan Google juga mengenali dan mengabaikannya.

Artikel ini merupakan terjemahan dan adaptasi dari konten resmi blog Framer berjudul ‘Are multiple H1 tags in Framer a problem?’.