Google'da CSS ile eklenen metin indekslenir mi?

Google'da CSS ile eklenen metin, özellikle content özelliğiyle oluşturuluyorsa indekslenmeyebilir. Bunun temel nedeni, bu metnin sayfanın HTML DOM yapısında gerçek bir metin düğümü olarak bulunmamasıdır. Tarayıcı metni ekranda gösterebilir, fakat Google aynı metni arama dizinine eklemek zorunda değildir.

Bu ayrım, tasarım amacıyla kullanılan kısa etiketlerle SEO için yazılan başlık ve açıklamalar arasında önemlidir. CSS ile eklenen bir ikon etiketi, dekoratif işaret veya görsel destek metni farklı değerlendirilir. Ana başlık, hizmet açıklaması, ürün adı ve önemli anahtar kelimeler ise doğrudan HTML içinde bulunmalıdır.

Aşağıdaki açıklamalar, Google’ın Eylül 2026 dokümantasyonunda CSS content özellikleri için netleştirdiği DOM yaklaşımıyla uyumludur. Uygulamada en güvenli yöntem, arama motorunun okumasını istediğiniz metni HTML’e yazmak ve CSS’yi yalnızca sunum için kullanmaktır.

Google'da CSS ile eklenen metin indekslenir mi?

Google, CSS ile eklenen her metni güvenilir ve indekslenebilir saymaz; özellikle ::before ve ::after üzerinden üretilen içerik risklidir. CSS kodu, tarayıcıya bir metni görsel olarak üretmesini söyleyebilir. Ancak bu metin, kaynak HTML içinde yer almıyorsa DOM’un gerçek içerik akışına dahil olmayabilir.

Örneğin bir başlığa CSS ile “İzmir Web Tasarım” yazdırmak, kullanıcı ekranında beklenen sonucu verebilir. Buna rağmen Googlebot, başlığın HTML karşılığını göremediği için bu ifadeyi sayfanın ana içeriği olarak değerlendirmeyebilir. Google sayfayı oluşturmayı denese bile oluşturulan her görsel öğenin dizine alınacağı garanti edilmez.

Bu nedenle CSS ile eklenen metin için kesin bir “her zaman indekslenir” cevabı verilmemelidir. Metnin SEO değeri varsa HTML içinde gerçek bir h1, h2, p, li veya bağlantı metni olarak bulunmalıdır. CSS, bu metnin rengini, konumunu ve görünümünü değiştirebilir.

Yanlış: “Başlığı CSS ile ekleyelim; kullanıcı görüyor, Google da mutlaka görür.” Doğru: “Başlığı HTML’e yazalım; CSS ile görsel stilini düzenleyelim.”

CSS content özelliği neden SEO açısından sorun oluşturur?

CSS content özelliği, HTML’e yeni bir içerik eklemekten çok tarayıcıya üretilmiş bir sunum öğesi gösterir. En yaygın kullanım biçimi, ::before veya ::after sözde öğelerine kısa metin eklemektir.

Örneğin .etiket::before { content: "Yeni"; } kodu, ekranda “Yeni” ifadesini gösterebilir. Fakat kaynak HTML’de yalnızca <span class="etiket"></span> bulunuyorsa, “Yeni” kelimesi belge içeriğinin parçası değildir. Bu durum, CSS ile oluşturulan fiyat açıklamaları, kategori adları ve hizmet başlıklarında risk yaratır.

Google’ın sayfa işleme sistemi HTML, JavaScript ve CSS’yi birlikte değerlendirebilir. Ancak oluşturma sürecinin çalışması, CSS kaynaklı her metnin dizine alınacağı anlamına gelmez. İndeksleme kararı; metnin DOM’daki konumu, sayfanın ana içeriğiyle ilişkisi, erişilebilirliği ve teknik sunum biçimiyle birlikte ele alınır.

CSS content çoğunlukla dekoratif amaçla tasarlanmıştır. Alıntı işareti, ayraç, ikon açıklaması veya görsel bir rozet için kullanılabilir. Fakat sayfanın anlamını değiştiren metinler için uygun temel değildir. SEO metni, kullanıcı CSS kapalıyken veya farklı bir tarayıcı kullandığında da HTML’den okunabilmelidir.

Google, oluşturulmuş CSS metnini DOM içinde görür mü?

Google, CSS ile oluşturulan metni gerçek bir HTML metin düğümüyle aynı şekilde değerlendirmeyebilir. DOM, tarayıcının belgeyi yapılandırdığı ağaçtır; CSS sözde öğeleri ise bu ağaca klasik bir içerik düğümü olarak eklenmez.

Bir tarayıcı geliştirici araçlarında ::before veya ::after satırını görebilirsiniz. Bu görünüm, metnin kaynak HTML’de bulunduğunu göstermez. Geliştirici araçları, hesaplanan stilleri ve sözde öğeleri ayrıca gösterir. Kaynak kodda kelime yoksa, arama motoru için de temel içerik sinyali zayıflar.

Bu farkı basit bir testle anlayabilirsiniz. Sayfada görünen metni seçip kopyalayın, ardından sayfanın kaynak kodunda veya DOM metin görünümünde arayın. Metin yalnızca stil panelinde bulunuyor, HTML yapısında görünmüyorsa, CSS üretimi kullanılıyor olabilir.

Yine de DOM kontrolü tek başına indekslenme kanıtı değildir. Google’ın önbelleği, indeks durumu ve arama sonuçlarında görünme davranışı ayrıca incelenmelidir. DOM’da bulunan bir metin de düşük değer, kopya içerik, engellenmiş kaynak veya başka teknik sebeplerle arama sonucunda yer almayabilir.

Bu yüzden hedef, yalnızca Google’ın CSS’yi işleyebilmesi olmamalıdır. Hedef, önemli metni açık, erişilebilir ve anlamlı HTML yapısında sunmaktır. Bu yaklaşım, tarayıcı, ekran okuyucu ve arama motoru arasında daha tutarlı sonuç verir.

Hangi CSS metinleri indekslenme riski taşır?

Başlık, ürün adı, hizmet açıklaması, fiyat bilgisi ve kategori metni CSS ile üretiliyorsa indekslenme riski taşır. Bu metinler, sayfanın ne hakkında olduğunu anlatan ana içerik unsurlarıdır.

Risk özellikle üç durumda yükselir. İlk durumda metin yalnızca content özelliğinde bulunur. İkinci durumda HTML’de boş bir kapsayıcı vardır ve anlamlı ifade JavaScript veya CSS ile sonradan oluşturulur. Üçüncü durumda mobil ve masaüstü sürümlerinden biri önemli metni tamamen stil katmanına taşır.

Örneğin bir emlak sayfasında “İzmir Karşıyaka Satılık Daireler” ifadesi CSS ile eklenirse, sayfanın konu sinyali zayıflayabilir. Aynı ifade HTML içinde bir h1 başlığı olarak yer alırsa kullanıcı, ekran okuyucu ve arama motoru için daha açık bir yapı oluşur.

CSS ile eklenen küçük görsel işaretler genellikle aynı öneme sahip değildir. “1”, “2” gibi adım numaraları, ayraç çizgileri, dekoratif oklar veya yıldız sembolleri çoğunlukla SEO metni sayılmaz. Ancak bu işaretler ürün puanını veya kritik bir koşulu tek başına ifade ediyorsa, gerçek değer HTML’de de bulunmalıdır.

İçerik planında her metni iki gruba ayırın: anlam taşıyan metin ve görsel destek metni. İlk gruptaki tüm ifadeleri HTML’e yazın. İkinci gruptaki ifadeleri CSS ile sunabilirsiniz; fakat erişilebilirlik açısından gerekli alternatifleri ayrıca sağlayın.

CSS ile eklenen başlık ve açıklama nasıl düzeltilir?

CSS ile eklenen başlık veya açıklama, aynı metin HTML içinde gerçek bir öğe olarak oluşturularak düzeltilir. CSS daha sonra bu öğenin tasarımını yönetmelidir.

Örneğin yanlış uygulamada HTML’de boş bir div bulunur ve başlık ::before ile eklenir. Doğru uygulamada <h1>İzmir’de Diyetisyen Web Sitesi</h1> kullanılır. Stil dosyası, bu başlığın yazı tipi, aralığı, rengi ve konumunu değiştirir.

Açıklamalarda da aynı yöntem geçerlidir. Hizmetin ne yaptığını anlatan cümleler p veya uygun liste öğeleri içinde yazılmalıdır. CSS ile oluşturulan metin, açıklamanın yerine geçmemelidir. Özellikle landing page sayfalarında mesaj eşleşmesi önemlidir; başlık, reklam metni ve sayfa içeriği aynı HTML mesajını taşımalıdır.

Bir sayfanın HTML yapısını düzeltmek için aşağıdaki sırayı uygulayın:

1. CSS content kullanılan seçicileri bulun.
2. Bu seçicilerdeki metinleri önem derecesine göre listeleyin.
3. SEO veya erişilebilirlik açısından önemli ifadeleri HTML’e taşıyın.
4. CSS’yi yalnızca stil, konum ve dekorasyon için bırakın.
5. Mobil görünümde metnin iki kez gösterilmediğini kontrol edin.
6. Kaynak kodu ve Google’ın oluşturulmuş görünümünü yeniden test edin.

Bu işlem, mevcut tasarımı tamamen değiştirmeyi gerektirmez. Aynı sınıf adları korunabilir ve HTML’e eklenen metin mevcut CSS seçicileriyle biçimlendirilebilir. Sorun, çoğu zaman tasarım dosyasında değil, içeriğin yanlış katmanda tutulmasındadır.

CSS metni ile HTML metni arasındaki fark nedir?

HTML metni belge içeriğinin parçasıdır; CSS metni ise çoğunlukla görsel sunum amacıyla üretilir. Bu fark, indeksleme kadar erişilebilirlik, kopyalama ve bakım süreçlerini de etkiler.

HTML’de bulunan bir metin, sayfanın yapısal anlamını daha açık taşır. Örneğin h2 etiketi, bir bölüm başlığını ifade eder. CSS ile content: "Hizmetlerimiz" yazdırmak ise aynı yapısal anlamı sağlamaz.

Bu durum, web sitesini farklı dillere çevirirken de ortaya çıkar. CSS dosyasındaki ifadeler içerik yönetim sisteminden bağımsız kaldığı için çeviri listelerine girmeyebilir. Aynı metin HTML’de tutulduğunda editör, çevirmen ve geliştirici tarafından daha kolay yönetilir.

Bir başka fark da içerik denetimidir. Sayfa içeriğini denetleyen araçlar, HTML metnini daha kolay raporlar. CSS içine gömülen ifadeler ise başlık uzunluğu, tekrar oranı veya boş içerik kontrollerinde gözden kaçabilir. Bu nedenle teknik kalite kontrolü yalnızca tarayıcı görüntüsüne göre yapılmamalıdır.

CSS content kullanımını SEO için nasıl test edebilirsiniz?

CSS ile eklenen metni test etmek için kaynak HTML, canlı DOM, mobil görünüm ve Google Search Console verilerini ayrı ayrı kontrol etmelisiniz. Tek bir araç kesin sonuç vermez.

İlk olarak tarayıcıda sayfanın kaynak kodunu açın ve önemli ifadeyi arayın. Metin kaynakta yoksa, CSS veya JavaScript üretimi kullanılıyor olabilir. Ardından geliştirici araçlarında ilgili öğeyi inceleyin. Metnin yalnızca ::before ya da ::after altında bulunduğunu doğrulayın.

İkinci adımda CSS’yi geçici olarak devre dışı bırakın. Sayfanın anlamı, başlıkları ve açıklamaları hâlâ okunabiliyorsa temel içerik HTML’de bulunuyor demektir. Kritik metin tamamen kayboluyorsa, CSS’ye bağımlı bir içerik yapısı vardır.

Üçüncü adımda Google Search Console içindeki URL Denetimi aracını kullanın. Canlı URL testi, Google’ın sayfayı nasıl alabildiğini ve oluşturabildiğini incelemek için yardımcı olur. Ancak bu test, görünen her metnin kesin olarak indeksleneceğini garanti etmez.

• Ana başlık HTML içinde gerçek bir h1 öğesi mi?
• Hizmet veya ürün açıklaması kaynak kodunda bulunuyor mu?
• CSS content yalnızca dekoratif öğelerde mi kullanılıyor?
• Mobil görünümde önemli metin gizleniyor veya iki kez gösteriliyor mu?
• Ekran okuyucu testinde anlam kaybı oluşuyor mu?
• Google Search Console’da canlı URL testinden sonra içerik doğru görünüyor mu?

Son olarak metni farklı araçlarda arayın: sayfa kaynağı, DOM metin görünümü, tarayıcıda kopyalama ve ekran okuyucu. Dört kontrolden biri başarısızsa, önemli içeriği CSS katmanında bırakmamak gerekir.

CSS ile metin eklemek ne zaman kullanılabilir?

CSS ile metin eklemek, metin sayfanın anlamı için kritik değilse kullanılabilir. Dekoratif rozetler, ayraçlar, numaralandırmalar ve görsel vurgu işaretleri bu kapsama girebilir.

Örneğin bir kartın önüne CSS ile küçük bir ok eklemek, tasarım açısından pratik olabilir. Bu okun “Devam et” bağlantısının tek açıklaması olmaması gerekir. Bağlantıda gerçek bir metin bulunmalı ve ok yalnızca görsel destek sağlamalıdır.

Alıntı işaretleri de benzer bir örnektir. Bir alıntının başına CSS ile tırnak işareti eklemek genellikle sorun oluşturmaz. Fakat alıntının yazarı, tarihi veya önemli bir hukuki koşulu CSS ile eklemek doğru değildir. Bu bilgiler HTML içinde açıkça bulunmalıdır.

CSS ile sayaç üretiminde de dikkat gerekir. Liste numaralarını counter() ile göstermek mümkün olsa da adımların sırası HTML listesindeki öğelerle korunmalıdır. Kullanıcı CSS kapattığında “1. adım” bilgisi tamamen kayboluyorsa yapı kırılgan hale gelir.

Karar kuralı basittir: Metin, kullanıcı sayfayı anlamak için ona ihtiyaç duyuyorsa HTML’e yazın. Metin yalnızca görsel düzeni destekliyorsa CSS ile eklenebilir. Bu ayrım, “Google bunu indeksler mi?” sorusundan önce yapılmalıdır.

Web tasarımında CSS kaynaklı indeksleme hataları nasıl önlenir?

CSS kaynaklı indeksleme hatalarını önlemenin en etkili yolu, içerik ve sunum görevlerini geliştirme sürecinin başında ayırmaktır. İçerik HTML’de, görünüm CSS’de, etkileşim ise JavaScript’te tutulmalıdır.

Yeni bir sayfa hazırlanırken önce başlık hiyerarşisini yazılı olarak oluşturun. Bir h1, konuyu açıklayan h2 başlıkları ve paragraf metinleri HTML’e eklenmeden CSS tasarımına geçmeyin. Böylece tasarım dosyasına içerik gömme ihtiyacı azalır.

Mevcut sitede denetimi seçici bazında yapın. Kod içinde content: araması, ilk teknik taramayı hızlandırır. Sonuçları dekoratif, işlevsel ve SEO açısından önemli olmak üzere üç gruba ayırın. SEO açısından önemli gruptaki ifadeleri HTML’e taşıyın.

Bir web sitesinin fiyatı veya kapsamı değerlendirilirken bu teknik iş de hesaba katılmalıdır. Örneğin [İzmir’de web sitesi yaptırma maliyeti rehberinde](/izmirde-web-sitesi-maliyeti-fiyatlar) yalnızca görsel tasarım değil, içerik yapısı ve teknik teslim maddeleri de ayrı sorulmalıdır.

Yerel işletme sayfalarında hizmet bölgesi, uzmanlık ve iletişim bilgileri özellikle görünür HTML metni olmalıdır. Google Haritalar’da hizmet bölgesi kullanan işletmeler için ilgili bilgiler [hizmet bölgesi tanımlama rehberindeki](/google-haritalar-da-hizmet-bolgesi-nasil-tanimlanir) mantıkla tutarlı, açık ve denetlenebilir yazılmalıdır.

İçerik ekibinin kullandığı kontrol listesi de geliştirici teslimine dahil edilmelidir. Başlıkların CSS ile üretilip üretilmediği, sayfa kaynağında metin bulunup bulunmadığı ve mobilde içerik kaybı yaşanıp yaşanmadığı teslim öncesi kaydedilmelidir.

Özetle, CSS metni tamamen yasak değildir. Fakat SEO hedefi olan cümleleri CSS’ye bırakmak teknik bir tasarım tercihi değil, gereksiz bir indeksleme riskidir. Önemli kelimeler ve açıklamalar HTML’de kalmalıdır.