H1 metnini bir logo görüntüsüyle değiştirmek: SEO ve erişilebilirlik için en iyi yöntem?

Orada birkaç farklı teknik var gibi görünüyor, bu yüzden bu konuda "kesin" bir cevap almayı umuyordum ...

Bir web sitesinde, ana sayfaya bağlantı veren bir logo oluşturmak yaygın bir uygulamadır. Arama motorları, ekran okuyucular, IE 6+ ve CSS ve / veya resimleri devre dışı bırakmış tarayıcılar için en iyi şekilde optimize ederken de aynı şeyi yapmak istiyorum.

Birinci örnek: Bir h1 etiketi kullanmaz. SEO için iyi değil, değil mi?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

İkinci Örnek: Bunu bir yerde buldum. CSS biraz acayip görünüyor.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Örnek Üç: Aynı HTML, metin girintisini kullanan farklı yaklaşım. Bu, görüntü değişimine "Phark" yaklaşımıdır.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Dördüncü Örnek: Leahy-Langridge-Jefferies yöntemi . Görüntüler ve / veya css kapatıldığında görüntülenir.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>

/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

Bu tür şeyler için en iyi yöntem hangisidir? Lütfen cevabınızda html ve css sağlayın.

Seçeneği kaçırıyorsunuz:

<h1>
  <a href="http://stackoverflow.com">
    <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

href ve h1 img başlık çok, çok önemlidir!

Bunu çoğunlukla yukarıdaki gibi yapıyorum, ancak erişilebilirlik nedenleriyle, görüntülerin tarayıcıda devre dışı bırakılması olasılığını desteklemem gerekiyor. Bu nedenle, metni sayfa dışındaki bağlantıdan girintilemek yerine, kesinlikle <span>tam genişliğine ve yüksekliğine konumlandırarak <a>ve z-indexbağlantı metninin üst üste yerleştirme sırasına yerleştirmek için kullanarak kaplarım.

Fiyat bir boş <span>, ama ben kadar önemli bir şey için orada olmaya hazırım <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>

#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }

Erişilebilirlik nedenleri önemliyse, ilk varyantı kullanın (müşteri resmi stilsiz görmek istediğinde)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Yukarıdaki HTML kodu doğru yapıya sahip olduğundan ve sadece sizin karar vermeniz gerektiğinden, hayali SEO gereksinimlerine uymaya gerek yoktur.

Ayrıca, varyantı daha az HTML koduyla kullanabilirsiniz

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>

/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Göreve karşılık gelmedikleri için diğer tüm CSS stillerini ve bilgisayar korsanlıklarını kaldırdığımı lütfen unutmayın. Yalnızca belirli durumlarda yararlı olabilirler.

Biraz geç geliyorum ama dayanamadım.

Sorunuz yarı kusurlu. Açıklamama izin ver:

Resminizin değiştirilmesiyle ilgili sorunuzun ilk yarısı geçerli bir soru ve bence bir logo için basit bir resim; bir alt özellik; ve konumlandırılması için CSS yeterlidir.

Sorunuzun ikinci yarısı, bir logo için H1'in "SEO değeri" nde, farklı içerik türleri için hangi öğelerin kullanılacağına karar vermek için yanlış bir yaklaşımdır.

Bir logo birincil başlık, hatta hiç başlık değildir ve sitenizin her sayfasındaki logoyu işaretlemek için H1 öğesini kullanmak, sıralamalarınız için iyi olandan (biraz) daha fazla zarar verecektir. Anlamsal olarak, başlıklar (H1 - H6) aşağıdakiler için uygundur: içerik için başlıklar ve alt başlıklar.

HTML5'te, sayfa başına birden fazla başlığa izin verilir, ancak bir logo bunlardan birini hak etmiyordur. Bulanık yeşil bir widget ve bazı metinler içeren logonuz, bir nedenden ötürü üstbilginin yan tarafındaki bir resimdedir - içeriğinizi yapılandırmak için hiyerarşik bir öğe değil, bir çeşit "damga" dır. Birincisi (daha fazla kullanıp kullanmadığınız, başlık hiyerarşinize bağlıdır) Sitenizdeki her sayfanın H1 değeri konunun başlığını taşımalıdır. Dizin sayfanızın ana ana başlığı 'NYC'deki Bulanık Yeşil Widget'lar için En İyi Kaynak' olabilir. Başka bir sayfadaki birincil başlık 'Bulanık Widget'larımız için Gönderim Ayrıntıları' olabilir. Başka bir sayfada, 'Bert'in Bulanık Widget'ları Hakkında' olabilir. Kaptın bu işi.

Yan not: Göründüğü kadar inanılmaz, doğru işaretleme örnekleri için Google'a ait web mülklerinin kaynağına bakmayın. Bu kendi başına bütün bir gönderi.

HTML ve öğelerinden en fazla "SEO değerini" elde etmek için, HTML5 spesifikasyonlarına göz atın ve arama motorlarından önce (HTML) anlambilimine ve kullanıcılara göre değere dayalı işaretleme kararları verin ve SEO.

Bence ilgileneceksin H1 tartışmasıyla . Bu, h1 öğesini sayfanın başlığı veya logo için kullanmasıyla ilgili bir tartışmadır.

Şahsen ilk önerinizle, şu satırlarda bir şeyle giderdim:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Tabii ki bu, tasarımınızın sayfa başlıkları kullanıp kullanmadığına bağlıdır, ancak bu benim bu konudaki duruşumdur.

<h1>
  <a href="http://stackoverflow.com">
  Stack Overflow<img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Bu SEO için iyi bir seçimdi çünkü SEO H1 etiketine yüksek öncelik verir, h1 etiketi içinde sitenizin adı olmalıdır. SEO'da site adını ararsanız bu yöntemi kullanarak site logonuzu da gösterir.

site adını VEYA metnini gizlemek istiyorsanız lütfen negatif değer içeren metin girintisini kullanın. eski

h1 a {
 text-indent: -99999px;
}

Öğede başlığı kaçırdınız <a>.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

<a>Öğeyi öğeye koymanızı öneririm çünkü müşteri bu görüntünün ne anlama geldiğini bilmek ister. text-indentTest için ayarladığınız için <h1>, bu ön uç kullanıcı logo üzerinde gezinirken ana logo hakkında bilgi alabilir.

W3C nasıl yapar?

Https://www.w3.org/ adresine bir göz atın . Görüntü var z-index:1metin nedeniyle burda ama arkasında z-index:0bağlanmışposition: absolute;

Orijinal HTML:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

Orijinal CSS:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}

Kimsenin değinmediği bir nokta, h1 özelliğinin her sayfaya özgü olması ve site logosunu kullanmanın H1'i sitenin her sayfasında etkili bir şekilde çoğaltacağı gerçeğidir.

En iyi SEO h1 genellikle satış veya estetik değer için en iyi olmadığı için her sayfa için az indeksi gizli h1 kullanmayı seviyorum.

-9999px yöntemine göre hızı arttırmak için yeni bir (Keller) yönteminin olması gerekiyor:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

burada tavsiye edilir: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Bilmiyorum ama bu biçim kullanılmış ...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Basit ve gördüğüm kadarıyla siteme herhangi bir zarar vermedi. Sen css olabilir ama daha hızlı yükleniyor görmüyorum.

SEO nedeniyle:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>

Yukarıdaki çözümleri okuduktan sonra bir CSS Grid çözümü kullandım.

1. H1 metnini ve görüntüyü içeren bir div oluşturun.
2. İki öğeyi aynı hücreye yerleştirin ve her ikisini de nispeten konumlandırın.
3. Metin girintisi, boşluk ve taşma özelliklerini kullanarak metni gizlemek için eski zeldman.com tekniğini kullanın .

<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>

.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

<h1><a href="/" title="Some title">Name</a></h1>

h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}

<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>

#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}