Technical SEO dalam Development
Technical SEO bukan hanya tanggung jawab SEO specialist, tapi juga developer. Implementasi yang benar dari awal development akan menghemat waktu dan effort untuk optimasi SEO di kemudian hari.
HTML Structure untuk SEO
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title dan Meta Description -->
<title>Keyword-Rich Title | Brand Name</title>
<meta name="description" content="Compelling meta description dengan target keyword">
<!-- Open Graph -->
<meta property="og:title" content="Social Media Title">
<meta property="og:description" content="Social media description">
<meta property="og:image" content="/og-image.jpg">
<meta property="og:type" content="website">
<!-- Canonical URL -->
<link rel="canonical" href="https://example.com/page">
<!-- Structured Data -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"author": "Author Name"
}
</script>
</head>URL Structure dan Routing
- Gunakan descriptive URLs: /blog/seo-tips bukan /blog/123
- Implement proper URL hierarchy
- Use hyphens untuk word separation
- Avoid dynamic parameters jika memungkinkan
- Setup proper redirects untuk URL changes
Core Web Vitals Implementation
// Lazy loading implementation
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.classList.remove('lazy');
observer.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));
// Preload critical resources
<link rel="preload" href="/critical.css" as="style">
<link rel="preload" href="/hero-image.jpg" as="image">
<link rel="dns-prefetch" href="//fonts.googleapis.com">Mobile-First Development
- Responsive design dengan mobile-first approach
- Touch-friendly interface elements
- Optimize untuk mobile Core Web Vitals
- Test dengan real devices
- Implement proper viewport meta tag