Basics Of Seo
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic SEO: title & meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Title muncul di tab browser & hasil pencarian -->
<title>Best Coffee Shop in Jakarta | Kopi Mantap</title>
<!-- Meta description muncul di snippet Google -->
<meta
name="description"
content="Kopi Mantap adalah coffee shop di Jakarta yang menyajikan single origin, manual brew, dan kopi susu kekinian dengan harga terjangkau."
/>
<!-- Robots: biarkan search engine mengindeks halaman -->
<meta name="robots" content="index, follow" />
<!-- Canonical URL: menghindari duplikat konten -->
<link rel="canonical" href="https://example.com/coffee-shop-jakarta" />
<!-- Open Graph (untuk share di sosial media) -->
<meta property="og:title" content="Best Coffee Shop in Jakarta | Kopi Mantap" />
<meta
property="og:description"
content="Temukan kopi terbaik di Jakarta dengan suasana nyaman dan Wi-Fi kencang."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/coffee-shop-jakarta" />
<meta
property="og:image"
content="https://example.com/images/coffee-shop-cover.jpg"
/>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 16px;
}
header, main, footer {
margin-bottom: 16px;
}
article {
margin-bottom: 24px;
}
img {
max-width: 100%;
border-radius: 8px;
}
</style>
</head>
<body>
<header>
<!-- H1: satu judul utama per halaman -->
<h1>Best Coffee Shop in Jakarta: Kopi Mantap</h1>
<p>
Mencari tempat nongkrong dengan kopi enak dan Wi-Fi kencang di Jakarta?
Kopi Mantap adalah jawabannya.
</p>
<nav>
<a href="#menu">Menu</a> |
<a href="#location">Location</a> |
<a href="#reviews">Reviews</a>
</nav>
</header>
<main>
<article>
<h2 id="menu">Our Signature Coffee Menu</h2>
<p>
Kami menyajikan berbagai pilihan kopi mulai dari
<strong>single origin</strong> hingga <strong>kopi susu kekinian</strong>.
</p>
<!-- Gambar dengan alt yang deskriptif -->
<img
src="https://via.placeholder.com/800x400"
alt="Barista menuang latte art ke dalam cangkir kopi"
/>
<h3>Recommended Drinks</h3>
<ul>
<li>Es Kopi Susu Mantap</li>
<li>V60 Single Origin Aceh Gayo</li>
<li>Cold Brew Citrus</li>
</ul>
</article>
<article id="location">
<h2>Location & Opening Hours</h2>
<p>
Kami berlokasi di pusat Jakarta, dekat dengan stasiun MRT dan halte
TransJakarta.
</p>
<p><strong>Address:</strong> Jl. Contoh No. 123, Jakarta, Indonesia.</p>
<p><strong>Opening Hours:</strong> 09.00 – 22.00 (Setiap hari)</p>
</article>
<article id="reviews">
<h2>Customer Reviews</h2>
<p>
“Tempatnya cozy, kopinya enak, cocok buat kerja remote.”
</p>
<p>
“Favorite banget sama Es Kopi Susu Mantap. Manisnya pas.”
</p>
</article>
</main>
<footer>
<p>© 2025 Kopi Mantap Jakarta</p>
</footer>
</body>
</html>
demo.html
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic SEO: title & meta tags -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Title muncul di tab browser & hasil pencarian -->
<title>Best Coffee Shop in Jakarta | Kopi Mantap</title>
<!-- Meta description muncul di snippet Google -->
<meta
name="description"
content="Kopi Mantap adalah coffee shop di Jakarta yang menyajikan single origin, manual brew, dan kopi susu kekinian dengan harga terjangkau."
/>
<!-- Robots: biarkan search engine mengindeks halaman -->
<meta name="robots" content="index, follow" />
<!-- Canonical URL: menghindari duplikat konten -->
<link rel="canonical" href="https://example.com/coffee-shop-jakarta" />
<!-- Open Graph (untuk share di sosial media) -->
<meta property="og:title" content="Best Coffee Shop in Jakarta | Kopi Mantap" />
<meta
property="og:description"
content="Temukan kopi terbaik di Jakarta dengan suasana nyaman dan Wi-Fi kencang."
/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/coffee-shop-jakarta" />
<meta
property="og:image"
content="https://example.com/images/coffee-shop-cover.jpg"
/>
<style>
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 16px;
}
header, main, footer {
margin-bottom: 16px;
}
article {
margin-bottom: 24px;
}
img {
max-width: 100%;
border-radius: 8px;
}
</style>
</head>
<body>
<header>
<!-- H1: satu judul utama per halaman -->
<h1>Best Coffee Shop in Jakarta: Kopi Mantap</h1>
<p>
Mencari tempat nongkrong dengan kopi enak dan Wi-Fi kencang di Jakarta?
Kopi Mantap adalah jawabannya.
</p>
<nav>
<a href="#menu">Menu</a> |
<a href="#location">Location</a> |
<a href="#reviews">Reviews</a>
</nav>
</header>
<main>
<article>
<h2 id="menu">Our Signature Coffee Menu</h2>
<p>
Kami menyajikan berbagai pilihan kopi mulai dari
<strong>single origin</strong> hingga <strong>kopi susu kekinian</strong>.
</p>
<!-- Gambar dengan alt yang deskriptif -->
<img
src="https://via.placeholder.com/800x400"
alt="Barista menuang latte art ke dalam cangkir kopi"
/>
<h3>Recommended Drinks</h3>
<ul>
<li>Es Kopi Susu Mantap</li>
<li>V60 Single Origin Aceh Gayo</li>
<li>Cold Brew Citrus</li>
</ul>
</article>
<article id="location">
<h2>Location & Opening Hours</h2>
<p>
Kami berlokasi di pusat Jakarta, dekat dengan stasiun MRT dan halte
TransJakarta.
</p>
<p><strong>Address:</strong> Jl. Contoh No. 123, Jakarta, Indonesia.</p>
<p><strong>Opening Hours:</strong> 09.00 – 22.00 (Setiap hari)</p>
</article>
<article id="reviews">
<h2>Customer Reviews</h2>
<p>
“Tempatnya cozy, kopinya enak, cocok buat kerja remote.”
</p>
<p>
“Favorite banget sama Es Kopi Susu Mantap. Manisnya pas.”
</p>
</article>
</main>
<footer>
<p>© 2025 Kopi Mantap Jakarta</p>
</footer>
</body>
</html>