SEO with HTML
SEO (Search Engine Optimization) is a technique for improving a website's ranking in search results.
Important Meta Tags
Title Tag
<title>Learn HTML - Complete Tutorial | Skillversitas</title>
Meta Description
<meta name="description" content="Complete HTML tutorial for beginners. Learn tags, elements, and HTML best practices.">
Meta Keywords
<meta name="keywords" content="HTML, tutorial, web development, learn programming">
Robots
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">
Open Graph (Social Media)
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="Complete HTML Tutorial">
<meta property="og:image" content="https://skillversitas.com/images/html-tutorial.jpg">
<meta property="og:url" content="https://skillversitas.com/tutorial/html">
<meta property="og:type" content="website">
Structured Data
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Complete HTML Tutorial",
"author": {
"@type": "Person",
"name": "Skillversitas"
},
"datePublished": "2024-01-15",
"image": "https://skillversitas.com/images/html.jpg"
}
</script>
Case Study: SEO-Friendly Tutorial Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO Meta Tags -->
<title>Complete HTML Tutorial from the Basics | Skillversitas</title>
<meta name="description" content="Learn HTML from zero to expert. A complete tutorial with code examples and exercises. Perfect for beginners.">
<meta name="keywords" content="tutorial html, learn html, html for beginners, web development">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="Complete HTML Tutorial">
<meta property="og:description" content="Learn HTML from zero to expert">
<meta property="og:image" content="https://skillversitas.com/images/html-og.jpg">
<meta property="og:url" content="https://skillversitas.com/tutorial/html">
<meta property="og:type" content="article">
<!-- Canonical URL -->
<link rel="canonical" href="https://skillversitas.com/tutorial/html">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Course",
"name": "Complete HTML Tutorial",
"description": "Learn HTML from zero to expert",
"provider": {
"@type": "Organization",
"name": "Skillversitas"
}
}
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', sans-serif; line-height: 1.8; color: #333; }
header { background: #1e3a5f; color: white; padding: 1rem 2rem; }
nav ul { list-style: none; display: flex; gap: 1.5rem; max-width: 1000px; margin: 0 auto; }
nav a { color: white; text-decoration: none; }
.container { max-width: 800px; margin: 2rem auto; padding: 0 2rem; }
h1 { color: #1e3a5f; margin-bottom: 1rem; font-size: 2rem; }
h2 { color: #1e3a5f; margin: 2rem 0 1rem; font-size: 1.4rem; }
h3 { color: #333; margin: 1.5rem 0 0.5rem; }
p { margin-bottom: 1rem; }
ul, ol { margin: 1rem 0 1rem 2rem; }
li { margin-bottom: 0.5rem; }
code { background: #f4f4f4; padding: 0.2rem 0.4rem; border-radius: 3px; font-family: 'Courier New', monospace; }
pre { background: #1e3a5f; color: #e5e7eb; padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 1rem 0; }
.breadcrumb { font-size: 0.9rem; color: #666; margin-bottom: 1rem; }
.breadcrumb a { color: #3498db; text-decoration: none; }
footer { background: #1e3a5f; color: white; padding: 2rem; text-align: center; margin-top: 3rem; }
</style>
</head>
<body>
<header>
<nav aria-label="Main Menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/tutorial">Tutorial</a></li>
<li><a href="/kontak">Kontak</a></li>
</ul>
</nav>
</header>
<article class="container">
<nav class="breadcrumb" aria-label="Breadcrumb">
<a href="/">Home</a> »
<a href="/tutorial">Tutorial</a> »
<span>HTML</span>
</nav>
<h1>Complete HTML Tutorial from the Basics</h1>
<p>HTML (HyperText Markup Language) is the standard markup language for building web pages. This lesson will guide you to understand HTML from the basics to advanced.</p>
<h2>Table of Contents</h2>
<ol>
<li><a href="#pengenalan">Pengenalan HTML</a></li>
<li><a href="#structure">Basic HTML Structure</a></li>
<li><a href="#tag">Tag-tag Penting</a></li>
</ol>
<h2 id="pengenalan">Pengenalan HTML</h2>
<p>HTML is the foundation of every web page. Web browsers read HTML files and render them as visible web pages.</p>
<figure>
<img src="html-structure.png" alt="Diagram of the basic HTML structure consisting of head and body" width="600">
<figcaption>Basic HTML Structure</figcaption>
</figure>
<h2 id="structure">Basic HTML Structure</h2>
<p>Every HTML document has a standard structure as follows:</p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
<body>
<h1>Main Title</h1>
<p>Web page content.</p>
</body>
</html></code></pre>
<h2 id="tag">Tag-tag Penting</h2>
<h3>Heading</h3>
<p>Use headings from h1 to h6 in order. Use h1 only once per page.</p>
<h3>Paragraf</h3>
<p>Use the <code><p></code> tag to create text paragraphs.</p>
<h3>Link</h3>
<p>Use the <code><a></code> tag to create links to other pages.</p>
</article>
<footer>
<p>© 2024 Skillversitas. All rights reserved.</p>
</footer>
</body>
</html>
SEO On-Page Checklist
- Title tag: Unique, descriptive, 50-60 characters
- Meta description: Descriptive, 150-160 characters
- Heading hierarchy: h1 once, h2-h6 in order
- Alt text: Descriptive for all images
- Clean URLs: Use descriptive slugs
- Internal linking: Link related pages
- Schema markup: Add structured data
- Mobile friendly: Responsive design
Best Practices
- Unique titles: Every page has a different title
- Quality content: Write for users, not machines
- Speed: Optimize images and code
- HTTPS: Use an SSL certificate
- Sitemap: Create a sitemap.xml
Summary
SEO helps your website appear on the top pages of search results. Implement on-page SEO correctly for optimal results.