{"id":236,"date":"2026-05-19T02:27:46","date_gmt":"2026-05-19T02:27:46","guid":{"rendered":"https:\/\/tools.dwiyanti.com\/blog\/?p=236"},"modified":"2026-05-19T02:33:53","modified_gmt":"2026-05-19T02:33:53","slug":"seo-dan-tag-html","status":"publish","type":"post","link":"https:\/\/tools.dwiyanti.com\/blog\/seo-dan-tag-html","title":{"rendered":"SEO dan Tag HTML"},"content":{"rendered":"
\n\n<main><article> - membungkus tulisan dengan ini, apakah mendapat perlakuan khusus robot crawl?\n--\nSingkatnya: **tidak ada \u201cperlakuan khusus\u201d dalam arti ranking langsung** hanya karena kamu membungkus konten dengan `<main>` atau `<article>`. Tapi tetap **sangat penting untuk SEO teknis dan pemahaman struktur oleh crawler**.\n\nMari kita luruskan biar tidak misleading \ud83d\udc47\n\n---\n\n 1. Apa yang sebenarnya dilakukan `<main>` dan `<article>`?\n\nKeduanya adalah bagian dari **HTML5 semantic elements**.\n\n* `<main>` \u2192 menandai **konten utama halaman**\n* `<article>` \u2192 menandai **unit konten mandiri** (post, blog, news, dll)\n\nCrawler seperti **Google** menggunakan ini untuk:\n\n* memahami **struktur halaman**\n* membedakan konten utama vs sidebar vs footer\n* membantu proses seperti indexing, snippet, dan ekstraksi konten\n\n---\n\n 2. Apakah ada efek langsung ke ranking?\n\n\ud83d\udc49 **Tidak secara langsung.**\n\nGoogle sendiri tidak bilang:\n\n> \u201cpakai `<article>` \u2192 ranking naik\u201d\n\nJadi:\n\n* \u274c Bukan ranking factor langsung\n* \u2705 Tapi **membantu interpretasi konten (indirect impact)**\n\n---\n\n 3. Kenapa tetap penting secara SEO?\n\nIni yang sering disalahpahami.\n\nWalaupun bukan faktor ranking langsung, efeknya terasa di:\n\n a. Content extraction (AI & search engine)\n\nStruktur yang jelas membantu:\n\n* featured snippet\n* AI overview \/ LLM understanding\n* readability parsing\n\n b. Accessibility (aksesibilitas)\n\nScreen reader dan bot lebih mudah membaca struktur\n\n c. Technical SEO clarity\n\nCrawler lebih cepat \u201cpaham\u201d:\n\n* mana konten utama\n* mana navigasi\n* mana iklan\n\n---\n\n 4. Perbandingan sederhana\n\n| Tanpa semantic          | Dengan semantic     |\n| ----------------------- | ------------------- |\n| `<div class=\"content\">` | `<main><article>`   |\n| ambigu                  | jelas struktur      |\n| parsing lebih berat     | parsing lebih mudah |\n\n---\n\n 5. Best practice (yang benar)\n\nUntuk halaman artikel\/blog:\n\n```html\n<main>\n  <article>\n    <h1>Judul<\/h1>\n    <p>Isi konten...<\/p>\n  <\/article>\n<\/main>\n```\n\nTambahan penting:\n\n* 1 `<main>` per halaman\n* `<article>` bisa lebih dari 1 (misal list post)\n* jangan overuse (semua jadi `<article>` itu salah)\n\n---\n\n 6. Insight penting (biar kamu tidak over-optimasi)\n\nKalau kamu berharap:\n\n> \u201cpakai `<article>` biar ranking naik\u201d\n\n\u2192 itu terlalu sederhana.\n\nYang lebih berdampak:\n\n* kualitas konten\n* internal linking\n* topical authority\n* page experience\n\nSemantic HTML hanya:\n\n> **membantu Google memahami, bukan menentukan siapa menang**\n\n---\n\n Kesimpulan\n\n* `<main>` & `<article>` **tidak memberi boost ranking langsung**\n* Tapi **membantu crawler memahami konten lebih baik**\n* Efeknya **indirect \u2192 bisa improve SEO jika digabung dengan struktur yang benar**\n\n---\n\nKalau kamu mau, aku bisa bantu audit struktur HTML di halaman kamu (homepage vs about vs blog) supaya benar-benar \u201cSEO-friendly + AI-friendly\u201d, bukan cuma sekadar semantic.\n-----\njadi artinya, yang seharusnya crawl cepat dengan semantic, tanpa semantic seperti pusing cari ini itu yang makin lama, hasilnya bisa semua gak ke crawl. begitu? selain main dan article, yang sangat diperlukan semantic itu apa lagi?\n--\nTidak persis seperti itu\u2014analogi \u201ctanpa semantic bikin crawler pusing sampai tidak ke-crawl\u201d agak berlebihan.\n\n**Realitanya:**\n\n* Crawler seperti Google **tetap bisa crawl halaman tanpa semantic HTML dengan baik**.\n* Mereka sudah sangat canggih membaca `<div>` sekalipun.\n* Jadi:\n\n  * \u274c Bukan berarti tanpa `<main>` \/ `<article>` lalu halaman gagal di-crawl\n  * \u274c Bukan berarti crawl jadi jauh lebih lambat secara signifikan\n  * \u2705 Tapi **semantic membantu efisiensi pemahaman (parsing & interpretation)**\n\nLebih tepatnya begini:\n\n> Semantic HTML = \u201cpeta yang jelas\u201d\n> Non-semantic = \u201cmasih bisa dibaca, tapi perlu usaha ekstra\u201d\n\n---\n\n Jadi apa efek nyatanya?\n\nBukan di \u201ccrawl atau tidak\u201d, tapi di:\n\n 1. Content prioritization\n\nCrawler lebih cepat tahu:\n\n* ini konten utama\n* ini navigasi\n* ini boilerplate\n\n\u2192 penting untuk indexing & snippet\n\n---\n\n 2. Rendering & extraction (terutama era AI search)\n\nStruktur yang jelas membantu:\n\n* AI summary\n* featured snippet\n* passage indexing\n\n---\n\n 3. Crawl efficiency (skala besar)\n\nKalau websitenya besar:\n\n* semantic bantu **crawl budget efficiency**\n* bukan dramatis, tapi tetap ada efek\n\n---\n\n Selain `<main>` dan `<article>`, semantic apa yang penting?\n\nIni yang benar-benar berguna (bukan sekadar formalitas):\n\n---\n\n 1. `<header>` & `<footer>`\n\nUntuk membedakan:\n\n* intro \/ branding\n* penutup\n\n```html\n<header>...<\/header>\n<footer>...<\/footer>\n```\n\n---\n\n 2. `<nav>`\n\nSangat penting untuk:\n\n* struktur internal linking\n* memahami site architecture\n\n```html\n<nav>\n  <a href=\"\/about\">About<\/a>\n<\/nav>\n```\n\n---\n\n 3. `<section>`\n\nUntuk membagi konten jadi blok logis\n\n```html\n<section>\n  <h2>Technical SEO<\/h2>\n<\/section>\n```\n\n---\n\n 4. `<aside>`\n\nUntuk:\n\n* sidebar\n* related content\n* bukan konten utama\n\n---\n\n 5. Heading structure (`<h1>` \u2013 `<h6>`)\n\nIni bahkan **lebih penting dari semantic container**\n\n* `<h1>` = topik utama\n* `<h2>` = subtopik\n* `<h3>` = breakdown\n\n\ud83d\udc49 Ini yang benar-benar dibaca serius oleh crawler\n\n---\n\n 6. `<figure>` & `<figcaption>`\n\nUntuk gambar + konteks\n\n```html\n<figure>\n  <img src=\"seo.png\">\n  <figcaption>Technical SEO Strategy<\/figcaption>\n<\/figure>\n```\n\n---\n\n 7. `<time>`\n\nUntuk tanggal (berguna untuk freshness signal)\n\n```html\n<time datetime=\"2026-05-04\">May 4, 2026<\/time>\n```\n\n---\n\n Urutan prioritas (biar tidak overthinking)\n\nKalau kamu fokus SEO, urutannya:\n\n1. **Heading structure (WAJIB benar)**\n2. **Content quality**\n3. **Internal linking**\n4. Semantic HTML (sebagai support)\n\n---\n\n Kesalahan umum (ini yang sering kejadian)\n\n* Semua dibungkus `<article>` \u274c\n* Tidak pakai `<nav>` padahal banyak link \u274c\n* `<h1>` lebih dari satu tanpa struktur \u274c\n* Pakai semantic tapi **isi kontennya lemah** \u274c\n\n---\n\n Kesimpulan jujur\n\n* Semantic HTML **tidak membuat crawl jadi jauh lebih cepat**\n* Tapi membuat:\n\n  * struktur lebih jelas\n  * parsing lebih efisien\n  * hasil ekstraksi lebih akurat\n\nDan di era sekarang:\n\n> **yang menang bukan yang paling \u201crapi HTML-nya\u201d, tapi yang paling jelas makna kontennya**\n\n---\n\nKalau kamu mau, aku bisa bantu bikin **template HTML SEO (homepage \/ about \/ article)** yang sudah optimal untuk:\n\n* Google\n* AI search\n* personal branding kamu sebagai SEO specialist\n-----\nNah, Homepage, terdiri nav, footer, dan banyak section, yang di bungkus main hanya section-section ini kan? bagaimana dengan hero?\n--\nPertanyaan bagus\u2014dan ini sering bikin bingung karena \u201chero section\u201d itu bukan tag HTML, tapi pola desain.\n\nJawaban singkatnya:\n\n> **Ya, hero tetap masuk ke dalam `<main>` sebagai bagian dari konten utama.**\n\n---\n\n Struktur yang benar untuk homepage\n\nSecara umum:\n\n```html id=\"k2n4qp\"\n<body>\n  <header>\n    <nav>...<\/nav>\n  <\/header>\n\n  <main>\n    <section class=\"hero\">...<\/section>\n    <section>...<\/section>\n    <section>...<\/section>\n  <\/main>\n\n  <footer>...<\/footer>\n<\/body>\n```\n\n---\n\n Jadi hero itu apa secara semantic?\n\nHero biasanya:\n\n* headline utama (branding)\n* value proposition\n* CTA\n\n\ud83d\udc49 Secara makna, dia adalah:\n\n> **bagian paling penting dari konten utama**\n\nJadi:\n\n* \u2705 Masuk `<main>`\n* \u2705 Biasanya pakai `<section>`\n* \u274c Bukan `<header>` (ini kesalahan umum)\n\n---\n\n Kapan hero pakai `<header>`?\n\nBoleh pakai `<header>` **kalau dia header khusus untuk section\/article**, bukan header global.\n\nContoh valid:\n\n```html id=\"xsz9oy\"\n<main>\n  <section>\n    <header>\n      <h1>Dwi Yanti \u2013 SEO Specialist<\/h1>\n      <p>Technical SEO Strategy Expertise<\/p>\n    <\/header>\n  <\/section>\n<\/main>\n```\n\n\ud83d\udc49 Ini sah karena:\n\n* `<header>` di sini milik `<section>`\n* bukan header global halaman\n\n---\n\n Kesalahan yang sering terjadi\n\n \u274c Hero di luar `<main>`\n\n```html\n<div class=\"hero\">...<\/div>\n<main>...<\/main>\n```\n\n\u2192 ini bikin struktur jadi ambigu\n\n---\n\n \u274c Semua dibungkus `<header>`\n\n```html\n<header>\n  <nav>...<\/nav>\n  <div class=\"hero\">...<\/div>\n<\/header>\n```\n\n\u2192 ini salah secara semantic\nkarena `<header>` harusnya:\n\n* intro \/ navigasi\n* bukan seluruh konten utama\n\n---\n\n Praktik terbaik (SEO + AI-friendly)\n\nUntuk homepage personal branding seperti kamu:\n\n```html id=\"k8c3lf\"\n<header>\n  <nav>...<\/nav>\n<\/header>\n\n<main>\n  <section class=\"hero\">\n    <h1>Dwi Yanti \u2013 SEO Specialist<\/h1>\n    <p>Technical SEO Strategy Expertise<\/p>\n  <\/section>\n\n  <section id=\"about\">...<\/section>\n  <section id=\"services\">...<\/section>\n  <section id=\"case-study\">...<\/section>\n<\/main>\n\n<footer>...<\/footer>\n```\n\n---\n\n Insight penting (ini yang sering dilewatkan)\n\nHero itu bukan sekadar desain\u2014dia:\n\n* tempat **H1 utama**\n* menentukan **topical relevance halaman**\n* jadi anchor untuk seluruh halaman\n\nKalau salah struktur:\n\u2192 bukan crawl yang kena, tapi **pemahaman konteks halaman**\n\n---\n\n Kesimpulan\n\n* Hero = bagian dari konten utama\n* Jadi:\n\n  * \u2714 masuk `<main>`\n  * \u2714 biasanya `<section>`\n  * \u2714 boleh punya `<header>` internal\n* Jangan campur dengan `<header>` global\n\n---\n\nKalau kamu mau, aku bisa bantu breakdown khusus homepage kamu:\n\n* mana yang jadi hero\n* mana section SEO penting\n* dan susunan yang paling kuat untuk personal branding di Google & AI search\n\nKarena homepage personal branding itu beda strategi dibanding blog biasa.\n-----\nGimana halnya kalau H1 itu adanya di nav, biasanya suka ada di logo bagian kiri?\n--\nIni salah satu praktik yang sering terjadi\u2014dan memang **tidak ideal kalau tidak dipikirkan konteksnya**.\n\nJawaban jujurnya:\n\n> **Boleh H1 ada di logo dalam nav, tapi seringkali itu bukan pilihan terbaik untuk SEO homepage.**\n\n---\n\n Kenapa banyak orang taruh H1 di logo?\n\nBiasanya struktur seperti ini:\n\n```html\n<header>\n  <nav>\n    <h1 class=\"logo\">Dwi Yanti<\/h1>\n  <\/nav>\n<\/header>\n```\n\nTujuannya:\n\n* branding kuat\n* logo dianggap identitas utama\n\n\ud83d\udc49 Secara HTML: **valid**\n\ud83d\udc49 Secara SEO: **kurang optimal (tergantung konteks)**\n\n---\n\n Masalah utamanya\n\n 1. H1 jadi kehilangan makna topik\n\nCrawler seperti Google melihat:\n\n> H1 = topik utama halaman\n\nKalau isinya cuma:\n\n> \u201cDwi Yanti\u201d\n\n\u2192 ini hanya **nama**, bukan konteks\n\nBandingkan dengan:\n\n> \u201cDwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise\u201d\n\n\ud83d\udc49 Yang kedua jauh lebih kuat secara SEO & entity clarity\n\n---\n\n 2. Hero jadi \u201ctidak punya H1\u201d\n\nKalau H1 sudah dipakai di nav:\n\n* hero biasanya pakai `<h2>` \u274c\n* padahal hero adalah konten utama\n\n\u2192 ini membalik prioritas struktur\n\n---\n\n Best practice (yang lebih kuat)\n\n \u2705 Opsi 1 (direkomendasikan)\n\nLogo **bukan H1**, tapi H1 ada di hero\n\n```html\n<header>\n  <nav>\n    <div class=\"logo\">Dwi Yanti<\/div>\n  <\/nav>\n<\/header>\n\n<main>\n  <section class=\"hero\">\n    <h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n  <\/section>\n<\/main>\n```\n\n\ud83d\udc49 Ini:\n\n* jelas untuk crawler\n* kuat untuk keyword + entity\n* align dengan konten utama\n\n---\n\n \u2705 Opsi 2 (masih aman, tapi hati-hati)\n\nLogo pakai H1 + hero juga punya heading\n\n```html\n<h1 class=\"logo\">Dwi Yanti<\/h1>\n<h2>SEO Specialist with Technical SEO Strategy Expertise<\/h2>\n```\n\n\ud83d\udc49 Ini **boleh di HTML5**, tapi:\n\n* secara SEO **lebih lemah**\n* karena H1 tidak deskriptif\n\n---\n\n Insight penting (yang sering salah kaprah)\n\nDulu:\n\n> \u201cHarus cuma 1 H1\u201d\n\nSekarang:\n\n* HTML5 **boleh multiple H1**\n* tapi tetap:\n\n  > **Google fokus ke H1 yang paling representatif**\n\n---\n\n Strategi khusus untuk kamu (personal branding)\n\nKarena kamu bangun **entity \u201cDwi Yanti SEO Specialist\u201d**, maka:\n\n\ud83d\udc49 H1 ideal = kombinasi:\n\n* nama\n* profesi\n* spesialisasi\n\nContoh:\n\n```html\n<h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n```\n\nLogo cukup:\n\n```html\n<div class=\"logo\">Dwi Yanti<\/div>\n```\n\n---\n\n Kesimpulan tegas\n\n* H1 di nav\/logo \u2192 **boleh tapi lemah secara SEO**\n* H1 di hero \u2192 **lebih kuat & direkomendasikan**\n* Fokus:\n\n  > H1 harus menjelaskan \u201chalaman ini tentang apa\u201d, bukan cuma \u201cini siapa\u201d\n\n---\n\nKalau kamu mau, aku bisa bantu:\n\n* mapping H1, H2, H3 untuk seluruh halaman kamu\n* supaya konsisten dengan strategi **entity SEO + AI search (LLM-friendly)**\n\nKarena ini yang bikin nama kamu \u201cnempel\u201d di Google, bukan sekadar muncul.\n-----\nJadi artinya, kalau H1 di Nav berarti di header dan dia tidak masuk dalam main, artinya section setelahnya bisa ambigu?\n--\nPendeknya: **tidak otomatis jadi ambigu**, tapi **bisa melemahkan kejelasan struktur dan prioritas konten**\u2014terutama untuk homepage.\n\n---\n\n Apa yang sebenarnya terjadi?\n\nKalau kamu punya struktur seperti ini:\n\n```html\n<header>\n  <nav>\n    <h1>Dwi Yanti<\/h1>\n  <\/nav>\n<\/header>\n\n<main>\n  <section class=\"hero\">\n    <h2>SEO Specialist with Technical SEO Strategy Expertise<\/h2>\n  <\/section>\n<\/main>\n```\n\nCrawler seperti Google akan:\n\n* tetap bisa memahami halaman (jadi **tidak \u201cgagal paham\u201d**)\n* tapi melihat:\n\n  * **H1 = \u201cDwi Yanti\u201d (lemah secara topik)**\n  * konten utama justru mulai dari `<h2>`\n\n\ud83d\udc49 Ini yang bikin **prioritas jadi kurang optimal**, bukan benar-benar ambigu total.\n\n---\n\n Kenapa disebut \u201ckurang optimal\u201d?\n\nKarena secara logika struktur:\n\n* `<main>` = konten utama\n* H1 idealnya = menjelaskan isi `<main>`\n\nKalau H1 ada di `<header>`:\n\n* dia **di luar konteks konten utama**\n* dan **tidak menjelaskan topik halaman dengan lengkap**\n\n---\n\n Analogi biar kebayang\n\nBayangkan halaman sebagai artikel:\n\n* `<header>` = cover buku\n* `<main>` = isi buku\n\nKalau H1 ada di cover:\n\n> \u201cDwi Yanti\u201d\n\nTapi isi buku:\n\n> tentang SEO Specialist\n\n\ud83d\udc49 Masih nyambung, tapi **judulnya kurang menjelaskan isi**\n\n---\n\n Kapan ini masih aman?\n\nKalau:\n\n* brand kamu sudah sangat kuat (entity sudah dikenal)\n* atau halaman memang fokus brand saja\n\nMaka:\n\n* H1 di logo **tidak jadi masalah besar**\n\n---\n\n Kapan jadi masalah?\n\nUntuk kasus kamu (personal branding SEO):\n\n* kamu butuh:\n\n  * **nama + profesi + spesialisasi**\n* bukan hanya nama\n\nJadi kalau H1 cuma di nav:\n\u2192 kamu kehilangan kesempatan memperkuat:\n\n* keyword relevance\n* entity clarity\n\n---\n\n Struktur yang lebih kuat\n\n```html\n<header>\n  <nav>\n    <div class=\"logo\">Dwi Yanti<\/div>\n  <\/nav>\n<\/header>\n\n<main>\n  <section class=\"hero\">\n    <h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n  <\/section>\n<\/main>\n```\n\n\ud83d\udc49 Ini membuat:\n\n* H1 = bagian dari konten utama\n* langsung menjelaskan halaman\n\n---\n\n Kesimpulan yang tepat\n\n* \u274c Bukan berarti jadi ambigu total\n* \u274c Bukan berarti crawler bingung\n* \u2705 Tapi:\n\n  > **struktur jadi kurang kuat dalam menyampaikan topik utama**\n\n---\n\nKalimat paling akuratnya:\n\n> H1 di nav tidak merusak SEO, tapi juga tidak memaksimalkan sinyal yang seharusnya bisa kamu kirim ke Google.\n\n---\n\nKalau kamu mau, kita bisa lanjut bahas:\n\n* struktur ideal untuk halaman About vs Homepage\n* karena penempatan H1 bisa berbeda strateginya (ini sering salah kaprah juga)\n-----\nNah, Kalau hero di design menjadi 3 kolom, dan H1 ada di kolom 1, secara semantic dan SEO bagaimana?\n--\nAman. **Layout (3 kolom) tidak mengubah makna semantic.** Yang dinilai crawler seperti Google adalah **struktur HTML (DOM)**, bukan posisi visual kolom di layar.\n\n---\n\n Intinya\n\n> **H1 di kolom 1 dalam hero tetap valid dan kuat secara SEO**, selama:\n\n* dia berada di dalam `<main>`\n* menjadi heading utama untuk konten tersebut\n* didukung oleh struktur heading yang rapi di bawahnya\n\n---\n\n Contoh struktur yang benar\n\n```html id=\"c1t8vx\"\n<main>\n  <section class=\"hero\">\n    <div class=\"container\">\n      <div class=\"col col-1\">\n        <h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n        <p>Helping brands grow with technical SEO strategy<\/p>\n      <\/div>\n\n      <div class=\"col col-2\">\n        <!-- visual \/ image -->\n      <\/div>\n\n      <div class=\"col col-3\">\n        <!-- CTA \/ badge \/ trust signal -->\n      <\/div>\n    <\/div>\n  <\/section>\n<\/main>\n```\n\n\ud83d\udc49 Ini:\n\n* semantic \u2714\n* SEO \u2714\n* fleksibel secara desain \u2714\n\n---\n\n Kenapa ini tidak masalah?\n\nKarena:\n\n* CSS (grid \/ flex \/ bootstrap) hanya mengatur **tampilan**\n* crawler membaca **urutan HTML**\n\nJadi walaupun:\n\n* H1 di kiri, tengah, atau kanan secara visual\n  \u2192 **tidak ada pengaruh langsung ke SEO**\n\n---\n\n Yang lebih penting dari posisi kolom\n\n 1. H1 tetap jadi yang pertama dibaca (di DOM)\n\nIdealnya:\n\n* H1 muncul lebih dulu di struktur HTML\n* baru diikuti elemen lain\n\n\ud83d\udc49 ini membantu parsing lebih jelas\n\n---\n\n 2. Jangan pisahkan H1 dari konteksnya\n\nHindari:\n\n```html id=\"1hhijw\"\n<div class=\"col-1\">\n  <h1>Dwi Yanti<\/h1>\n<\/div>\n\n<div class=\"col-3\">\n  <p>SEO Specialist with Technical SEO Strategy Expertise<\/p>\n<\/div>\n```\n\n\ud83d\udc49 ini bikin:\n\n* konteks H1 terpecah\n* makna jadi kurang kuat\n\nLebih baik:\n\n```html id=\"66owxh\"\n<h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n```\n\n---\n\n 3. Pastikan hierarki lanjutannya benar\n\n```html id=\"8c8fb3\"\n<h1>...<\/h1>\n<h2>About Me<\/h2>\n<h2>Services<\/h2>\n```\n\n\ud83d\udc49 ini jauh lebih penting daripada layout kolom\n\n---\n\n Insight penting (ini sering dilewatkan)\n\nYang dilihat mesin bukan:\n\n> \u201cini kolom 1 atau kolom 3\u201d\n\nTapi:\n\n> \u201capa topik utama halaman ini, dan seberapa jelas dijelaskan?\u201d\n\n---\n\n Kesalahan umum pada hero multi kolom\n\n* \u274c H1 terlalu kecil (diganti styling jadi tidak dominan)\n* \u274c H1 hanya nama tanpa konteks\n* \u274c keyword utama dipisah ke kolom lain\n* \u274c visual lebih dominan daripada teks utama\n\n---\n\n Kesimpulan\n\n* 3 kolom = **tidak masalah sama sekali**\n* H1 di kolom 1 = **aman dan benar**\n* Yang penting:\n\n  * H1 tetap utuh (tidak terpecah)\n  * berada di dalam `<main>`\n  * menjelaskan topik utama dengan jelas\n\n---\n\nKalau kamu mau, aku bisa bantu:\n\n* layout hero 3 kolom yang tetap \u201cSEO kuat + visual premium\u201d\n* sekalian positioning CTA & trust signal biar bukan cuma bagus, tapi juga konversi tinggi\n-----\nkalau muncul section, div, image, baru h1, h1 ini nantinya ada diatas image, kurang lebih 20% dari bawah posisinya.\n--\nBoleh saja secara desain\u2014tapi dari sisi **semantic & SEO, itu bukan pola yang ideal**.\n\nMari kita luruskan tanpa overthinking:\n\n---\n\n Masalah utamanya bukan \u201cposisi visual\u201d, tapi **urutan di HTML (DOM)**\n\nKalau struktur kamu seperti ini:\n\n```html\n<section class=\"hero\">\n  <img src=\"hero.jpg\" alt=\"...\">\n  <h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n<\/section>\n```\n\nLalu dengan CSS kamu bikin:\n\n* H1 muncul di atas gambar (overlay)\n* posisinya 20% dari bawah\n\n\ud83d\udc49 **Secara visual bagus**\n\ud83d\udc49 Tapi di DOM:\n\n* `<img>` dibaca dulu\n* baru `<h1>`\n\n---\n\n Apakah ini fatal?\n\n\u274c Tidak\n\u274c Tidak bikin gagal ranking\n\u274c Tidak bikin tidak ke-crawl\n\nCrawler seperti Google tetap:\n\n* bisa memahami halaman\n* tahu H1 kamu\n\n---\n\n Tapi kenapa kurang ideal?\n\n 1. Prioritas konten jadi tidak optimal\n\nSecara logika:\n\n* H1 = sinyal utama topik halaman\n* idealnya muncul lebih awal\n\nKalau didahului image:\n\u2192 H1 \u201cterlihat\u201d bukan elemen utama di awal parsing\n\n---\n\n 2. Image bisa dianggap lebih dominan\n\nKalau:\n\n* image besar\n* H1 kecil \/ overlay\n\n\u2192 bisa memberi sinyal lemah tentang topik utama\n\n---\n\n Cara yang lebih optimal (tanpa mengorbankan desain)\n\n\ud83d\udc49 **Balik urutan HTML, tetap pakai overlay di CSS**\n\n```html\n<section class=\"hero\">\n  <h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n  <img src=\"hero.jpg\" alt=\"Technical SEO Strategy\">\n<\/section>\n```\n\nLalu di CSS:\n\n* jadikan image sebagai background \/ layer\n* posisi H1 tetap overlay\n\n---\n\n Alternatif terbaik (best practice modern)\n\nGunakan background image:\n\n```html\n<section class=\"hero\">\n  <h1>Dwi Yanti \u2013 SEO Specialist with Technical SEO Strategy Expertise<\/h1>\n<\/section>\n```\n\n```css\n.hero {\n  background-image: url('hero.jpg');\n}\n```\n\n\ud83d\udc49 Ini:\n\n* H1 langsung terbaca pertama\n* visual tetap sama\n* lebih \u201cbersih\u201d untuk SEO\n\n---\n\n Insight penting (ini yang sering salah fokus)\n\nGoogle tidak peduli:\n\n> \u201cH1 kamu 20% dari bawah atau di tengah\u201d\n\nYang dipedulikan:\n\n> \u201cApa elemen pertama yang menjelaskan halaman ini?\u201d\n\n---\n\n Kapan urutan image dulu masih oke?\n\nMasih aman kalau:\n\n* H1 tetap jelas\n* tidak terlalu jauh dari atas DOM\n* bukan halaman kompetitif tinggi\n\n---\n\n Kesimpulan tegas\n\n* \u274c Bukan masalah besar kalau `<img>` sebelum `<h1>`\n* \u2705 Tapi bukan struktur paling optimal\n* \u2714 Idealnya:\n\n  * H1 muncul lebih dulu di HTML\n  * visual diatur dengan CSS\n\n---\n\nKalimat paling jujurnya:\n\n> Ini bukan kesalahan fatal, tapi kalau kamu serius bangun **entity SEO + personal branding**, lebih baik rapikan dari awal.\n\n---\n\nKalau kamu mau, aku bisa bantu:\n\n* bikin struktur hero (HTML + CSS) yang **SEO kuat + design tetap clean (overlay, gradient, positioning, dll)**\n* sekalian disesuaikan dengan positioning kamu sebagai SEO Specialist supaya H1 benar-benar \u201cnempel\u201d di Google\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
<main><article> – membungkus tulisan dengan ini, apakah mendapat perlakuan khusus robot crawl? — Singkatnya: **tidak ada \u201cperlakuan khusus\u201d dalam arti ranking langsung** hanya karena kamu membungkus konten dengan `<main>` atau `<article>`. Tapi tetap **sangat penting untuk SEO teknis dan pemahaman struktur oleh crawler**. Mari kita luruskan biar tidak misleading \ud83d\udc47 — 1. Apa yang sebenarnya […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-236","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/posts\/236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/comments?post=236"}],"version-history":[{"count":3,"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions"}],"predecessor-version":[{"id":240,"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/posts\/236\/revisions\/240"}],"wp:attachment":[{"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/media?parent=236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/categories?post=236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tools.dwiyanti.com\/blog\/wp-json\/wp\/v2\/tags?post=236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}