SEO Basics Cheat Sheet

<!-- Good: 50-60 characters, descriptive, keyword-rich -->
<title>React Hooks Tutorial - useState & useEffect Explained</title>
 
<!-- Bad: Too generic -->
<title>Tutorial</title>

<!-- Good: 150-160 characters, compelling, keyword-rich -->
<meta
 name="description"
 content="Pelajari React Hooks dari nol. Tutorial useState, useEffect, dan custom hooks dengan contoh yang mudah dipahami."
>
 
<!-- Bad: Too short -->
<meta name="description" content="React tutorial">
 

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Allow indexing and following links (default) -->
<meta name="robots" content="index, follow">
 
<!-- Prevent indexing -->
<meta name="robots" content="noindex, follow">
 
<!-- Prevent following links -->
<meta name

<!-- WAJIB di setiap page -->
<link rel="canonical" href="https://example.com/artikel/react-hooks">

<!-- Untuk duplicate content -->
<link rel="canonical" href="https://example.com/original-article">

<!-- Good: Clear hierarchy -->
<h1>Web Performance Optimization</h1>
 
<h2>Core Web Vitals</h2>
<h3>Largest Contentful Paint</h3>
<h3>Interaction to Next Paint</h3>
 
<h2>Optimization Techniques</

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Article",
 "headline": "React Hooks Tutorial",
 "description": "Panduan lengkap React Hooks",
 "image": "https://example.com/image.jpg",
 "author": {
  "@type": "Person",
  "name": "Galih Pratama",
  "url": "https://galihpratama.com"
 },

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Product",
 "name": "Product Name",
 "image": "https://example.com/product.jpg",
 "description": "Product description",
 "brand": {
  "@type": "Brand",
  "name": "Brand Name"
 },
 "offers": {

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "FAQPage",
 "mainEntity": [
  {
   "@type": "Question",
   "name": "Apa itu React Hooks?",
   "acceptedAnswer": {
    "@type": "Answer",
    "text": "React Hooks adalah fitur yang memungkinkan kamu menggunakan state dan lifecycle di functional components."

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "Organization",
 "name": "Belajar Koding",
 "url": "https://example.com",
 "logo": "https://example.com/logo.png",
 "sameAs": [
  "https://x.com/belajarkoding",
  "https://github.com/belajarkoding",
  "https://linkedin.com/company/belajarkoding"
 ],

<script type="application/ld+json">
{
 "@context": "https://schema.org",
 "@type": "BreadcrumbList",
 "itemListElement": [
  {
   "@type": "ListItem",
   "position": 1,
   "name": "Home",
   "item": "https://example.com"
  },
  {
   "@type": "ListItem",

<meta property="og:title" content="React Hooks Tutorial">
<meta property="og:description" content="Panduan lengkap React Hooks untuk pemula">
<meta property="og:image" content=

<meta property="article:published_time" content="2025-11-20T10:00:00Z">
<meta property="article:modified_time" content="2025-11-20T15:30:00Z">
<meta property="article:author" content="https://galihpratama.com"

<!-- Recommended size: 1200x630px (1.91:1 ratio) -->
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content=

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@belajarkoding">
<meta name="twitter:creator" content=

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="React Hooks Tutorial">
<meta name="twitter:description" content="Panduan lengkap React Hooks">

<article>
 <header>
  <h1>Article Title</h1>
  <time datetime="2025-11-20">20 November 2025</time>
  <address>
   <a rel=

<nav aria-label="Main navigation">
 <ul>
  <li><a href="/">Home</a></li>
  <li><a href="/artikel">Artikel</a

<nav aria-label="Breadcrumb">
 <ol>
  <li><a href="/">Home</a></li>
  <li><a href="/artikel">Artikel</a

<!-- Good: Descriptive -->
<img
 src="macbook.jpg"
 alt="MacBook Pro 16-inch with M3 chip on wooden desk"
>
 
<!-- Bad: Keyword stuffing -->
<img
 src="macbook.jpg"
 alt="macbook macbook pro laptop computer apple"
>
 
<!-- Bad: Generic -->

<!-- Use modern formats -->
<picture>
 <source srcset="image.avif" type="image/avif">
 <source srcset="image.webp" type="image/webp">
 <img
  src="image.jpg"

Good: descriptive-keywords.jpg
Bad: IMG_1234.jpg
Bad: photo.jpg

<!-- Good: Descriptive -->
<a href="/artikel/react-hooks">
 Pelajari lebih lanjut tentang React Hooks
</a>
 
<!-- Bad: Generic -->
<a href="/artikel/react-hooks">Klik di sini</a>
 
<!-- Bad: URL as anchor -->
<a href

<!-- Link ke related content -->
<p>
 Untuk memahami hooks lebih baik, baca dulu
 <a href="/artikel/javascript-fundamentals">JavaScript Fundamentals</a>
 dan <a href="/artikel/react-basics">React Basics</a>.
</p>

# Allow all bots to crawl everything
User-agent: *
Allow: /
 
# Disallow specific paths
Disallow: /admin/
Disallow: /api/
Disallow: /private/
Disallow: /cart/
Disallow: /checkout/
 
# Disallow search result pages
Disallow: /search?
 
# Sitemap location
Sitemap: https://example.com/sitemap.xml
Sitemap: https://example.com/sitemap-news.xml

# Block bad bots
User-agent: BadBot
Disallow: /
 
# Allow Googlebot everything
User-agent: Googlebot
Allow: /
 
# Allow others but restrict
User-agent: *
Disallow: /admin/

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
 <url>
  <loc>https://example.com</loc>
  <lastmod

// pages/sitemap.xml.js
export async function getServerSideProps({ res }) {
 const baseUrl = 'https://example.com';
 const posts = await getAllPosts();
 

Good:
https://example.com/artikel/react-hooks-tutorial
https://example.com/products/nike-air-max-90
https://example.com/category/web-development
 
Bad:
https://example.com/article?id=12345&cat=4
https://example.com/p/aX9kL2mN
https://example.com/kategori/web/artikel/2025/11/20/long/path/slug

// app/artikel/[slug]/page.js
export async function generateMetadata({ params }) {
 const post = await getPost(params.slug);
 
 return {
  title: post.title,
  description: post.description,

import { NextSeo, ArticleJsonLd } from 'next-seo';
 
export default function ArticlePage({ article }) {
 return (
  <>
   <

import { Helmet } from 'react-helmet';
 
function ArticlePage({ article }) {
 const structuredData =