SORU
20 Mart 2009, Cuma


Logo bir resim ile H1 metin değiştirme: SEO için en iyi yöntem ve erişilebilirlik?

Birkaç farklı teknikler vardır gibi görünüyor, almayı umuyordum yani bir "kesin" cevap...

Bir web sitesinde, bu yaygın bir uygulama ana sayfaya bağlanan bir logo oluşturmak için. Arama motorları, ekran okuyucuları, 6 ve CSS ve/veya resimleri devre dışı bırakan tarayıcılar IE için aynı, iyi optimize ederken yapmak istiyorum.

Bir Örnek:H1 etiketi kullanmak değildir. SEO için iyi değil, değil mi?

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

Örnek İki:Bu bir yerde bulundu. CSS biraz hacky 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, farklı yaklaşım metin-girinti kullanarak. Bu "Phark" görüntü değiştirme yaklaşımı.

<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;
}

Örnek Dört:The Leahy-Langridge-Jefferies method. Görüntü ve/veya css kapatıldığında görüntüler.

<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 */
}

Ne yöntemi bu tür şeyler için en iyisi bu mu? Html ve css sağlamak cevap lütfen.

CEVAP
21 Mart 2009, CUMARTESİ


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

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

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • CruzerLite

    CruzerLite

    1 EKİM 2011
  • GavinMichaelBooth

    GavinMichael

    26 AĞUSTOS 2006
  • Techmoan

    Techmoan

    31 Mayıs 2009