CSS kullanabiliyorken neden p, span, hx etiketleri gibi etiketleri kullanmalıyız?

CSS kullanabiliyorken neden p, span, hx etiketleri gibi etiketleri kullanmalıyız? SEO açısından önemlidir?

Kısa versiyon, çeşitli etiketlerin ve CSS'nin farklı amaçlara sahip olmasıdır.

<h1>Whatever</h1>örneğin, kullanımıyla birlikte belirli bir anlam taşıyor: "Bu bir başlık, önemli, birinci seviye bir" ve benzeri. Bazı ayrıştırıcılar, hx etiketlerini (ve diğerleri) de kullanarak , belge işlem yapısının veri işlemeden erişilebilirliğe kadar herhangi bir şey için kullanılabilecek bir dokümanı taslağını oluşturmak için kullanır (örn. Webmaster ana sayfasında bir sonraki soruya atlayarak sonraki soruya atlayan ekran okuyucular) .

Anlamsal etiketleri CSS ile yapabileceklerinize göre reddedemezsiniz, bunun tersi de geçerlidir. HSS ile aynı görünmesini
sağlamak için CSS'yi başka bir etikete uygulayabilirsiniz , örneğin: ancak bu yayılma etiketini işlev ve anlam bakımından gerçek bir başlık yapmaz . Bu durumda, yukarıda bağladığım ana hat oldukça imkansız olurdu, çünkü bu açıklıklar başlık değil, sadece keyfi olarak büyük ve kalın yaptığınız bir metin.<span style="font-weight:bold;font-size:2em">Whatever</span>

İşaretleme ve sunum farklı

Bu biraz "Boya varken neden duvarlarımız olsun ki?" Diye sormak gibi. :)

HTML etiketleri , içeriğinizin ne olduğunu gösterir - bu bir başlık, bu bir liste vb.

CSS, içeriğinizin nasıl görünmesi gerektiğini gösterir - başlıklar mavi olmalı, listeler bu kadar girintili olmalı, menü solda olmalı, vs.

Javsascript, sayfanızın nasıl davranması gerektiğini - animasyonlar vb.

Bu nedenle, HTML içeriği olmadan, CSS ve Javascript üzerinde çalışacak hiçbir şey yoktur.

Bu kategoriler% 100 siyah ve beyaz değildir - örneğin, CSS şimdi animasyonlar olan "geçişleri" belirtebilir - ancak temel fikirdir.

StackOverflow'daki bu konuda daha önceki tartışmalar bakınız burada ve burada .

İyi biçimlendirme bir ton çaba harcar ve daha iyi çalışır

Bir şeyin bağlantı gibi davranmasını istiyorsanız, <span class="mylink">görünmesini ve doğru hissetmesini sağlamak için bir demet CSS ve JS kullanabilirsiniz. Veya bir <a>öğeyi kullanabilir ve tüm bunları ücretsiz olarak indirebilirsiniz, indirilecek ek bir kod yoktur, çünkü tarayıcılar ne yapacağını zaten biliyor ve mantığın hızlı, yerel kodda uygulanmasını sağlıyor. Ayrıca , ekran okuyucular, mobil tarayıcılar, arama motorları, toplayıcılar ve düşünmediğiniz diğer kullanım durumları için doğru çalışması çok daha olasıdır.

Bu nedenle , sayfanızın ana bölümünde, <button>tıklanabilir eylemler, a <label>etiketlemek için <input>a ve a etiketlerini kullanmanız gerekir <main>.

İyi biçimlendirme SEO’yu nasıl etkiler?

Temel olarak, SEO, arama motorlarını içeriğinizin bir arama terimi için en iyi eş olduğuna inandırmakla ilgilidir. Açıkçası, Google’daki hiç kimse kişisel olarak her web sayfasını okuyor ve sıralamıyor.

Bu nedenle, arama motorlarının içeriğinizin ne olduğunu bilmesi için bir programın onu ayrıştırması gerekir.

Ve hey, bak! İçeriğinizi, makinelerin anlayabileceği şekilde etiketlemek için kullanılan HTML adında bütün bir dile sahibiz! :)

Yani evet, açık bir şekilde işaretleme, arama motorlarının sayfalarınızı daha iyi dizine eklemesine yardımcı olacaktır.

Aşırı bir örnek kullanmak gerekirse, sayfanızın başlığı bir gazete başlığının çektiği bir fotoğraf olsaydı, ilginç görünebilirdi ve insanlar bunu iyi okuyabilirdi, ancak bir arama motoruna, anlamı olmayan bir görüntü olurdu. . Oysa <h1>Turtle Groomer 5000</h1>, arama motorlarına, test hijyenini kolaylaştıran bir ürüne sahip olduğunuzu açıkça söyler.

Lütfen (bir örnek olarak) braille okuyucu kullanmak zorunda olan bir tür engeli olan insanlar hakkında düşünün. Bu gibi durumlarda, html etiketleri görsel css stillerinden çok daha önemlidir.

Su anlamsal kısmı cevapladı. SEO ile ilgili olarak, h1 elemanına arama motorları tarafından diğer etiketlerden daha fazla ağırlık verildiğini göreceksiniz. H2 / b / strong etiketlerine normal metinden biraz daha ağırlık verilir.

Diğer etiketlerin çoğu hemen hemen eşittir, ancak iş için her zaman en uygun etiketi kullanmalısınız. Google yakın zamanda tablo verileri için kullanıldığında tabloları ayrıştırmaya başladı ve diğer uygun şekilde kullanılan HTML, hangi içeriğin diğerlerinden daha önemli olduğuna dair sinyaller verebilir.

HTML5 için, HTML5'te kalın ve italik göz atın .

Özet:

<b>Metnin bağlamsal öneme sahip olmadan farklı bir stile sahip olmasını istediğinizde kullanın , ancak <strong>metnin bir içerikten veya SEO perspektifinden daha fazla öneme sahip olmasını istediğinizde kullanın .

<i>Metnin havasını dengelemek için kullanın , ancak <em>metni vurgulamak için kullanın .

Ayrıca: anlambilimin engelli kullanıcılar için önemini de unutmayın. Ekran okuyucu yazılımı, bu anlambilimine, görme engelli kişilere engelli olmaları nedeniyle ihtiyaç duydukları bağlamı görmediğini gösterir.

Birincisi, <hx>diğerlerinin belirttiği gibi başlıkları tanımladığı için oldukça önemli bir etikettir. Başlıklar sadece görünüm için değil, bölümleri bir benzerinin yapamayacağı şekilde ayırdıkları için çok kullanışlıdır. Örneğin Wikipedia'ya bir göz atın. Bazı programlar, bu tür etiketlere, belgeleri “parçalamak” veya hatta otomatik bir içindekiler tablosu oluşturmak için bağımlıdır. Bir arama motoru, bir <h1>etiket içindeki metnin başlık olduğundan daha önemli olacağını düşünür .

Daha sonra, stil sayfaları harika olsa da, bazı cihazlar stil sayfalarını görmezden gelecek ve yalnızca bir etiketin <em>kullanışlı olduğu HTML'ye odaklanacak . Stil sayfaları devre dışı bırakılmışsa veya yüklenirken bir sorun varsa (örneğin, internet bağlantısı sorunları), metin hala biçimlendirilmiş görünüyor. <em>Ayrıca, kelimeye vurgu yapılması gerektiği söylenebilir, oysa italik, bir film başlığından sadece resim yazısı oluşturmaya kadar her şey normal metinden farklı olabilir. Bu, aksi halde genel olarak vurgu yapmayı başaramayan sakatlık araçlarını kullananlar tarafından kullanılabilir.

<span>Öte yandan, büyük ölçüde bir satır içi versiyonudur <div>etiketi ve bir şey varsa, sadece gerçekten kullanmak isteyeyim ki varlık söyledi (ile ekstra sınıf yazmak zorunda sizi kaydedebilirsiniz <span class="italic">yerine <i>her italik örneği için (Kodun okunmasını zorlaştırır, daha az standartlaştırır (geniş bir çoğunluğun sonuncuyu eskiden kullanacağı varsayımı altındadır) ve belgeyi hiçbir şekilde geliştirmez.

<p>ayrıca, engelli kişiler için de faydalıdır, çünkü metnin yönetilemez paragraflara yapılamayacak şekilde kırılmasını sağlar <br />.

Elbette, HTML’nin stil oluşturma amaçlı olmadığını söyleyebiliriz, ancak tasarım ve stil arasında hassas bir çizgi var; ve açıkçası, bunun kullanıcı tercihi olduğunu söyleyebilirim. Kullanmak İster <i>ya <span class="italic">, bu size kalmış ve SEO için bir farklılık yaratmayacaktır. Sonuçta, neden bizi bir şeyler yapmanın bir yoluyla sınırlandırıyorlar? (JavaScript'in satırlarının ucunda noktalı virgül kullanıp kullanmamayı seçmemiz gibi - Her zaman onları kullanırım, diğerleri asla kullanmaz ve işlevsellik açısından hiçbir önemi yoktur.)