Mengganti teks H1 dengan gambar logo: metode terbaik untuk SEO dan aksesibilitas?

Sepertinya ada beberapa teknik berbeda di luar sana, jadi saya berharap untuk mendapatkan jawaban "pasti" pada ...

Di situs web, merupakan praktik umum untuk membuat logo yang tertaut ke beranda. Saya ingin melakukan hal yang sama, sementara mengoptimalkan yang terbaik untuk mesin pencari, pembaca layar, IE 6+, dan browser yang telah menonaktifkan CSS dan / atau gambar.

Contoh Satu: Tidak menggunakan tag h1. Tidak sebagus SEO, kan?

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

Contoh Dua: Ditemukan di suatu tempat. CSS tampaknya agak berantakan.

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

Contoh Tiga: HTML yang sama, pendekatan yang berbeda menggunakan indentasi teks. Ini adalah pendekatan "Phark" untuk penggantian gambar.

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

Contoh Empat: Metode Leahy-Langridge-Jefferies . Menampilkan ketika gambar dan / atau css dimatikan.

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

Metode apa yang terbaik untuk hal semacam ini? Harap berikan html dan css dalam jawaban Anda.

Anda melewatkan opsi:

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

Judul dalam href dan img to h1 sangat, sangat penting!

Saya melakukannya sebagian besar seperti yang di atas, tetapi untuk alasan aksesibilitas, saya perlu mendukung kemungkinan gambar dinonaktifkan di browser. Jadi, alih-alih inden teks dari tautan dari halaman, saya menutupinya dengan benar-benar memposisikan <span>untuk lebar dan tinggi penuh <a>dan menggunakan z-indexuntuk menempatkannya di atas teks tautan dalam urutan susun.

Harganya satu kosong <span>, tapi saya bersedia memilikinya di sana untuk sesuatu yang sama pentingnya dengan <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 */  }

Jika alasan aksesibilitas penting maka gunakan varian pertama (ketika pelanggan ingin melihat gambar tanpa gaya)

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

Tidak perlu memenuhi persyaratan SEO imajiner, karena kode HTML di atas memiliki struktur yang benar dan hanya Anda yang harus memutuskan apakah ini cocok untuk pengunjung Anda.

Anda juga dapat menggunakan varian dengan kode HTML yang lebih sedikit

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

Harap perhatikan bahwa saya telah menghapus semua gaya dan peretas CSS karena tidak sesuai dengan tugas. Mereka mungkin berguna dalam kasus-kasus tertentu saja.

Berdentang agak terlambat di sini, tetapi tidak bisa menahan diri.

Pertanyaan Anda setengah cacat. Biarkan saya jelaskan:

Bagian pertama dari pertanyaan Anda, tentang penggantian gambar, adalah pertanyaan yang valid, dan pendapat saya adalah bahwa untuk logo, gambar sederhana; atribut alt; dan CSS untuk penentuan posisi cukup.

Bagian kedua dari pertanyaan Anda, pada "nilai SEO" dari H1 untuk logo adalah pendekatan yang salah untuk memutuskan elemen mana yang akan digunakan untuk berbagai jenis konten.

Logo bukanlah heading utama, atau bahkan heading sama sekali, dan menggunakan elemen H1 untuk menandai logo pada setiap halaman situs Anda akan melakukan (sedikit) lebih banyak ruginya daripada baik untuk peringkat Anda. Secara semantik, pos (H1 - H6) sesuai untuk, yah, hanya itu: pos dan subpos untuk konten.

Di HTML5, lebih dari satu tajuk diizinkan per halaman, tetapi logo tidak layak mendapatkannya. Logo Anda, yang mungkin berupa widget hijau kabur dan beberapa teks berada dalam gambar di samping header karena suatu alasan - itu semacam "cap", bukan elemen hierarkis untuk menyusun konten Anda. Yang pertama (apakah Anda menggunakan lebih banyak tergantung pada hierarki heading Anda) H1 dari setiap halaman situs Anda harus menjadi judul pokok bahasannya. Judul utama utama halaman indeks Anda mungkin 'Sumber Terbaik Untuk Widget Hijau Fuzzy di NYC'. Judul utama pada halaman lain mungkin 'Detail Pengiriman untuk Widget Fuzzy Kami'. Di halaman lain, mungkin 'Tentang Bert's Fuzzy Widgets Inc.'. Anda mendapatkan idenya.

Catatan samping: Kedengarannya luar biasa, jangan lihat sumber properti web milik Google untuk contoh markup yang benar. Ini adalah keseluruhan pos untuk dirinya sendiri.

Untuk mendapatkan "nilai SEO" maksimal dari HTML dan elemen-elemennya, lihat spesifikasi HTML5 , dan buat keputusan markup berdasarkan semantik dan nilai (HTML) untuk pengguna sebelum mesin pencari, dan Anda akan lebih sukses dengan SEO

Saya pikir Anda akan tertarik pada debat H1 . Ini perdebatan tentang apakah menggunakan elemen h1 untuk judul halaman atau untuk logo.

Secara pribadi saya akan pergi dengan saran pertama Anda, sesuatu seperti ini:

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

Tentu saja ini tergantung pada apakah desain Anda menggunakan judul halaman tetapi ini adalah sikap saya tentang masalah ini.

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

Ini adalah pilihan yang baik untuk SEO karena SEO memberikan prioritas tinggi pada tag H1, di dalam tag h1 haruslah nama situs Anda. Menggunakan metode ini jika Anda mencari nama situs di SEO, itu akan menampilkan logo situs Anda juga.

Anda ingin menyembunyikan nama situs ATAU teks, silakan gunakan indentasi teks dalam nilai negatif. ex

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

Anda melewatkan judul dalam <a>elemen.

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

Saya menyarankan untuk meletakkan judul di <a>elemen karena klien ingin tahu apa arti gambar itu. Karena Anda telah menetapkan text-indentuntuk pengujian <h1>demikian, pengguna ujung depan itu bisa mendapatkan informasi logo utama ketika mereka berada di logo.

Bagaimana W3C?

Lihat saja https://www.w3.org/ . Gambar memiliki z-index:1, teks ada di sini tetapi di belakang karena z-index:0digabungkan keposition: absolute;

HTML asli:

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

CSS asli:

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

Satu hal yang belum disentuh oleh seseorang adalah fakta bahwa atribut h1 harus spesifik untuk setiap halaman dan menggunakan logo situs akan secara efektif mereplikasi H1 pada setiap halaman situs.

Saya suka menggunakan indeks az tersembunyi h1 untuk setiap halaman karena SEO terbaik h1 sering bukan yang terbaik untuk penjualan atau nilai estetika.

Metode baru (Keller) seharusnya meningkatkan kecepatan dibandingkan metode -9999px:

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

direkomendasikan di sini: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

Saya tidak tahu tapi ini format yang digunakan ...

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

Sederhana dan tidak merusak situs saya sejauh yang saya lihat. Anda bisa css tapi saya tidak melihatnya memuat lebih cepat.

Untuk alasan SEO:

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

Setelah membaca solusi di atas, saya menggunakan solusi CSS Grid.

1. Buat div yang berisi teks h1 dan gambar.
2. Posisikan dua item dalam sel yang sama dan buat keduanya relatif diposisikan.
3. Gunakan teknik zeldman.com lama untuk menyembunyikan teks menggunakan properti indentasi teks, spasi putih, dan overflow.

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