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


240

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 harus memeriksa topik ini ke: stackoverflow.com/questions/1874895/…
meo

15
Matt Cutts menjawab pertanyaan ini. youtu.be/fBLvn_WkDJ4
troynt

2
Bukankah titleatribut seharusnya ada di <a>?
bobo

23
Pertanyaan ini tidak boleh ditandai sebagai di luar topik. Ini adalah pertanyaan yang cukup jelas tentang CSS dan optimisasi mesin pencari. Hanya karena itu bukan C # tidak berarti itu bukan kode.
MikeMurko

3
@troynt Saya menemukan Matt Cutts terkadang memberikan saran yang menyesatkan. Karena itu saya cenderung tidak mengawasinya.
TheBlackBenzKid

Jawaban:


221

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!


12
apakah membungkus h1 di sekitar gambar dengan teks alt membawa bobot yang sama (seo-wise) seperti teks biasa yang dibungkus dengan h1?
Andrew

11
Ngomong-ngomong, itu relevan, logo adalah bagian dari konten situs web Anda, itu tidak digunakan untuk dekorasi, jadi gunakan <img> dengan atribut alt bukan CSS untuk logo Anda.
Boris Guéry


34
Sayangnya tautan dalam komentar yang ditinggalkan oleh @troynt sekarang rusak. Berikut adalah permalink baru untuk konten: youtu.be/fBLvn_WkDJ4
ahsteele

10
Untuk semua yang bertanya-tanya apa yang ada di video yang ditautkan: Matt Cutts pada dasarnya mengatakan, Anda harus menggunakan atribut alt dari tag img alih-alih menyembunyikan teks dengan css.
bjunix

17

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

1
Apa yang salah dengan indentasi? Asumsi saya adalah bahwa pembaca layar dan perayap masih mengambil teks meskipun ada lekukan.
ckarbass

2
Maaf butuh waktu lama untuk kembali ke sini. Satu-satunya masalah dengan indentasi adalah jika gambar dinonaktifkan di browser pengguna tetapi CSS aktif, tidak ada yang muncul, teks atau gambar. Ini semacam kasus tepi, tetapi penting untuk dipertimbangkan bagi saya, bekerja di situs web universitas.
Rob Knight

hmm ... Saya tidak bisa menyelesaikan ini. Teks jangkar terus muncul di atas gambar.
Andrew

<nitpicker> alih-alih gunakan #logo span, ini akan lebih efisien bagi peramban untuk merender </nitpicker>
Chris Missal

1
Dalam beberapa kasus, Anda memerlukan {top: 0} untuk #logo rentang.
Marcus

11

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.


3
display:nonetidak dapat di akses.
KPM

Metode terbaik adalah membungkus logo di bawah div karena Accessibilitas, Usability dan optimasi SEO, dan sebagian besar digunakan di organisasi web besar. Twitter, Amazon, Mozilla tidak menggunakan <h1> untuk logo mereka tetapi judul utama untuk menangkap nilai halaman dengan lebih baik. bit.ly/1MR4fr5
Oriol

4

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


1
Menambah ini, bahwa semua ini benar, dan logo tidak boleh menjadi h1 di halaman lain kecuali beranda (& idealnya tidak di beranda). Namun, seringkali di beranda, tempat yang paling relevan untuk h1 adalah logo, karena konten spanduk pahlawan mungkin tidak cukup spesifik dengan topik situs web (yaitu, mungkin terkait dengan layanan atau produk saat ini yang didorong daripada topik inti situs). Jika situs hanya memiliki satu area fokus (misalnya situs untuk aplikasi), area pahlawan dapat bekerja untuk h1. Ketika itu tidak berfungsi gambar dengan alt dibungkus dengan h1 lebih baik daripada tidak sama sekali.
elmarko

3

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.


Saya cukup yakin IMG dianggap konten sedangkan gambar latar belakang css tidak. Itu sebabnya saya cenderung bersandar ke gambar latar belakang untuk gambar seluruh situs dan hal-hal yang tidak secara eksplisit untuk konten halaman itu.
Joe Phillips

@ d03boy: Nah dalam hal ini Anda bisa membuat inline div yang memiliki ukuran yang benar untuk ukuran logo dan memberikan latar belakang. Rentang di dalamnya (yang memiliki visibilitas: tersembunyi;) akan memberikan pengganti "teks alternatif".
Ross

6
Debat H1 sekarang merupakan tautan mati
alex

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

2

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.


2

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

1

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.


Anda selalu dapat menggunakan H1 untuk logo di halaman utama saja.
Mariusz Jamro


0

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.


0

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>

0

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

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

Sebaiknya jangan menggunakan indentasi teks masif seperti ini, karena hal itu berpotensi menyebabkan kinerja yang hebat. Penjelasan terperinci di sini .
Nick F

-1
<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;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.