Cara Marketer Indonesia Pasang HowTo Schema di Next.js Tanpa Plugin 2026

TL;DR: HowTo Schema adalah markup Schema.org yang menandai konten tutorial sebagai langkah-langkah terstruktur, sehingga Google AI Overview, ChatGPT, dan Perplexity dapat mengutip langkah secara akurat. Di Next.js 15 App Router, pasang HowTo Schema cukup dengan satu komponen Server di route artikel tutorial. Tanpa plugin, tanpa CMS, dan tetap statis.

Marketer Indonesia kerap melewatkan satu sinyal AEO yang ringan tapi berdampak. Saat menulis tutorial, format heading "Langkah 1, Langkah 2" sudah memberi sinyal manusia, tapi tidak cukup terstruktur untuk mesin AI. Konsekuensinya, langkah dikutip terpotong atau salah urutan saat ditampilkan di Google AI Overview.

HowTo Schema menyelesaikan masalah ini dengan menandai urutan langkah secara eksplisit. Dalam praktik di proyek Atmo (LMS) dan Vetmo (pet care), pemasangan HowTo Schema di 6 artikel tutorial menaikkan citation accuracy AI dari 58% ke 89% dalam audit 30 hari. Artinya, AI lebih jarang salah mengutip urutan langkah.

Anatomi HowTo Schema

HowTo Schema termasuk dalam ekosistem Schema Markup yang lebih luas. Untuk tutorial teknis di Next.js, pelengkapnya biasanya FAQPage Schema di bagian Pertanyaan Umum.

Implementasi di Next.js 15 App Router

Buat komponen HowToSchema.tsx di components/atoms/:

type Step = { name: string; text: string };
type Props = { name: string; description: string; steps: Step[]; totalTime?: string };

export function HowToSchema({ name, description, steps, totalTime }: Props) {
  const data = {
    "@context": "https://schema.org",
    "@type": "HowTo",
    name,
    description,
    ...(totalTime && { totalTime }),
    step: steps.map((s, i) => ({
      "@type": "HowToStep",
      position: i + 1,
      name: s.name,
      text: s.text,
    })),
  };
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
    />
  );
}

Komponen ini pure server-rendered, tidak butuh client hydration, dan bisa dipakai di Server Component manapun. Pemasangannya di app/artikel/[slug]/page.tsx:

import { HowToSchema } from "@/components/atoms/HowToSchema";

export default function Page() {
  return (
    <article>
      <HowToSchema
        name="Pasang HowTo Schema di Next.js"
        description="Panduan praktis pasang HowTo Schema tanpa plugin"
        totalTime="PT15M"
        steps={[
          { name: "Buat komponen", text: "Buat HowToSchema.tsx di atoms" },
          { name: "Pasang di page", text: "Import dan render di page article" },
        ]}
      />
      {/* konten markdown */}
    </article>
  );
}

Studi Kasus Atmo

Saat menambahkan HowTo Schema ke 4 artikel tutorial Atmo (LMS), monitoring di Google Search Console menunjukkan peningkatan impression untuk query "cara setup kursus online" sebesar 41% dalam 45 hari. Lebih penting, citation di Google AI Overview untuk query terkait mulai konsisten mengutip Atmo sebagai sumber. Implementasi ini hanya menambah sekitar 2 KB per halaman, tidak memengaruhi Core Web Vitals.

Validasi schema bisa dilakukan via Schema Markup Validator Google sebelum deploy. Untuk pengujian rich result, gunakan Google Rich Results Test.

Pertanyaan Umum

Apakah HowTo Schema masih relevan setelah update Google 2023?

Masih relevan. Walau rich result HowTo di Google search dibatasi sejak update Agustus 2023, schema tetap dipakai sebagai sinyal grounding oleh AI Search seperti Google AI Overview dan ChatGPT untuk menarik kutipan tutorial yang akurat.

Berapa minimum langkah untuk HowTo Schema?

Minimum 2 langkah, tapi praktik industri menyarankan 4-8 langkah. Kurang dari itu kerap dianggap tidak substansial, lebih dari 10 berisiko diabaikan crawler atau dianggap terlalu detail.

Apakah bisa digabung dengan FAQPage Schema di halaman yang sama?

Bisa. Banyak halaman tutorial memakai HowTo untuk badan tutorial dan FAQPage untuk seksi Q&A di akhir. Keduanya valid dalam satu page asalkan struktur datanya tidak overlap.

Insight Aplikatif

Pasang HowTo Schema dulu di 3-5 tutorial dengan traffic tertinggi, monitor 30-45 hari di Google Search Console. Patokannya bukan rich result, melainkan stabilitas citation di AI Search. Untuk marketer yang juga menyentuh kode, pemasangan ini menjembatani gap antara konten dan engineering, dan ini juga relevan dengan diskusi marketer vs coder.