Genel Bakış
MarkaClick, arama motoru optimizasyonu (SEO) için kapsamlı ve otomatik çözümler sunar. Inline CSS/JS temizliği, yapısal veri desteği ve akıllı meta tag yönetimi ile sitenizin arama sonuçlarında üst sıralarda yer almasını sağlar.
Otomatik SEO Özellikleri
MarkaClick aşağıdaki SEO özelliklerini otomatik olarak yönetir:
Otomatik Özellikler
- Meta Title & Description: Sayfa başlığı ve açıklaması otomatik oluşturulur
- Canonical URL: Duplicate içerik sorunlarını önler
- Open Graph Tags: Sosyal medya paylaşımları için optimizasyon
- Twitter Cards: Twitter'da zengin önizleme
- Schema.org JSON-LD: Ürün ve organizasyon yapısal verisi
- XML Sitemap: Otomatik sitemap.xml oluşturma
- Robots.txt: Arama motoru tarayıcı yönetimi
Inline CSS/JS Temizliği
Google PageSpeed ve Lighthouse, inline CSS/JS kullanımını negatif olarak değerlendirir. MarkaClick bu sorunu şu şekilde çözer:
CSS Variables Sistemi
Tüm dinamik stiller CSS değişkenleri olarak harici dosyada tanımlanır:
/* dynamic-theme.php - Harici CSS Dosyası */
:root {
--primary-color: #007AFF;
--header-bg-color: #ffffff;
--header-text-color: #1d1d1f;
--slider-height: 500px;
--slider-border-radius: 12px;
}
/* Inline yerine CSS değişkeni kullanımı */
.navbar {
background: var(--header-bg-color);
color: var(--header-text-color);
}- Tarayıcı CSS'i önbelleğe alabilir
- PageSpeed "Render-blocking" uyarısı almaz
- CSS dosyası sıkıştırılabilir (gzip)
- Daha temiz HTML çıktısı
Temizlenen Inline Stiller
| Öncesi (Inline) | Sonrası (CSS Variable) |
|---|---|
style="background: #007AFF" |
var(--primary-color) |
style="height: 500px" |
var(--slider-height) |
style="border-radius: 12px" |
var(--slider-border-radius) |
style="color: #1d1d1f" |
var(--header-text-color) |
Meta Tag Yönetimi
Her sayfa için otomatik meta tag'ler oluşturulur:
<!-- Temel Meta Tags -->
<title>Ürün Adı | Site Adı</title>
<meta name="description" content="Ürün açıklaması...">
<link rel="canonical" href="https://example.com/product/urun-slug">
<!-- Open Graph (Facebook, LinkedIn) -->
<meta property="og:title" content="Ürün Adı">
<meta property="og:description" content="Ürün açıklaması...">
<meta property="og:image" content="https://example.com/uploads/product.jpg">
<meta property="og:url" content="https://example.com/product/urun-slug">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Ürün Adı">
<meta name="twitter:image" content="https://example.com/uploads/product.jpg">Canonical URL
Canonical URL, aynı içeriğin farklı URL'lerde gösterilmesi durumunda arama motorlarına asıl URL'i belirtir:
Aynı ürün şu URL'lerde erişilebilir olabilir:
- example.com/product/urun-slug
- example.com/product/urun-slug?ref=facebook
- example.com/product/urun-slug?utm_source=google
MarkaClick, canonical URL'i otomatik olarak belirler ve parametre sorunu olmadan doğru URL'i işaret eder:
<link rel="canonical" href="https://example.com/product/urun-slug">Performans İpuçları
Görsel Optimizasyonu
WebP formatı kullanın, lazy loading aktif edin, uygun boyutlarda yükleyin.
Cache Kullanımı
Tarayıcı önbelleğini aktif edin, CDN kullanmayı düşünün.
Mobil Uyumluluk
Tüm temalar responsive, mobile-first yaklaşımla tasarlanmıştır.