Замена текста H1 на изображение логотипа: лучший способ для SEO и доступности?

Кажется, есть несколько разных методов, поэтому я надеялся получить «окончательный» ответ на это …

На веб-сайте распространена практика создания логотипа, который ссылается на домашнюю страницу. Я хочу сделать то же самое, в то время как лучшая оптимизация для поисковых систем, программ чтения с экрана, IE 6+ и браузеров, которые отключили CSS и / или изображения.

Пример 1. Не использует тег h1. Не так хорошо для SEO, верно?

 

Пример два: нашел это где-то. CSS кажется немного взломанным.

 

Stack Overflow

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

Пример 3. Один и тот же HTML, другой подход с использованием текстового отступа. Это подход «Phark» к замене изображений.

 

Stack Overflow

 /* css */ #logo { background: transparent url("http://sofru.miximages.com/css/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; } 

Пример четыре: метод Лихи-Лангриджа-Джеффриеса . Отображается, когда изображения и / или css отключены.

 

Stack Overflow

 /* 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("http://sofru.miximages.com/css/logo.png"); /* the replacement image */ } 

Какой метод лучше всего подходит для такого рода вещей? Предоставьте html и css в своем ответе.

Вам не хватает опции:

 

Stack Overflow

title в href и img to h1 очень, очень важно!

Я делаю это в основном как выше, но по соображениям доступности мне нужно поддерживать возможность отключения изображений в браузере. Таким образом, вместо того, чтобы отступать текст от ссылки со страницы, я покрываю его, полностью позиционируя на всю ширину и высоту и используя z-index чтобы поместить его над текстом ссылки в стеке заказ.

Цена одна пустая , но я готов ее там для чего-то столь же важного, как

.

 

Stack Overflow

 #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  on top of  text */ } 

Если важны соображения доступности, используйте первый вариант (когда клиент хочет видеть изображение без стилей)

  

Не нужно соответствовать мнимым требованиям SEO, потому что HTML-код выше имеет правильную структуру, и только вы должны решить, подходит ли это для вас посетителей.

Также вы можете использовать вариант с меньшим количеством HTML-кода

 

Stack Overflow

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

Обратите внимание, что я удалил все другие стили и хаки CSS, потому что они не соответствовали задаче. Они могут быть полезны только в особых случаях.

Я думаю, вы были бы заинтересованы в дискуссиях H1 . Это дискуссия о том, следует ли использовать элемент h1 для названия страницы или для логотипа.

Лично я бы пошел с вашим первым предложением, что-то вроде этого:

    

About Us

MyCorp has been dealing in narcotics for over nine-thousand years...

Конечно, это зависит от того, использует ли ваш дизайн названия страниц, но это моя позиция по этой проблеме.

Вы пропустили название в элементе .

 

Stack Overflow

Я предлагаю поместить заголовок в элемент потому что клиент захочет узнать, в чем смысл этого изображения. Поскольку вы установили text-indent для теста

таким образом, этот пользователь может получить информацию о главном логотипе, когда он наводится на логотип.

Здесь немного поздно, но не мог устоять.

Вы сомневаетесь в том, что он недооценен. Позволь мне объяснить:

Первая половина вашего вопроса, касающаяся замены изображения, является правильным вопросом, и я считаю, что для логотипа – простой образ; атрибут alt; и CSS для его позиционирования достаточно.

Вторая половина вашего вопроса о «значении SEO» H1 для логотипа – неправильный подход к решению о том, какие элементы использовать для разных типов контента.

Логотип не является основным заголовком или даже заголовком вообще, и использование элемента H1 для разметки логотипа на каждой странице вашего сайта будет (немного) больше вреда, чем пользы для вашего рейтинга. Семантически заголовки (H1 – H6) подходят, ну, именно так: заголовки и подзаголовки для контента.

В HTML5 на каждую страницу разрешено более одного заголовка, но логотип не заслуживает ни одного из них. Ваш логотип, который может быть нечетким зелёным виджетами и некоторым текстом, находится в изображении сбоку заголовка по какой-либо причине – это своего рода «штамп», а не иерархический элемент для структурирования вашего контента. Первый (независимо от того, используете ли вы больше, зависит от вашей иерархии курса). H1 каждой страницы вашего сайта должен заголовок темы. Основной основной заголовок вашей индексной страницы может быть «Лучшим источником для нечетких зеленых виджетов в Нью-Йорке». Первичным заголовком на другой странице может быть «Сведения о доставке для наших нечетких виджетов». На другой странице это может быть «О Buz’s Fuzzy Widgets Inc.». Вы поняли эту идею.

Замечание: как невероятно, как кажется, не смотрите на источник веб-свойств, принадлежащих Google, для примеров правильной разметки. Это целая почта для себя.

Чтобы получить самую «ценность SEO» вне HTML и его элементов, взгляните на спецификации HTML5 и сделайте make-разметки на основе (HTML) семантики и ценности для пользователей перед поисковыми системами, и у вас будет больше успеха с вашей SEO.

 

Stack OverflowStack Overflow

Это был хороший вариант для SEO, потому что SEO дает высокий приоритет H1, внутри тега h1 должно быть ваше имя сайта. Используя этот метод, если вы будете искать имя сайта в SEO, он также покажет ваш логотип сайта.

вы хотите скрыть имя сайта или текст, используйте текстовый отступ в отрицательном значении. бывший

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

Один из вопросов, о котором никто не затронул, заключается в том, что атрибут h1 должен быть конкретным для каждой страницы, и использование логотипа сайта будет эффективно воспроизводить H1 на каждой странице сайта.

Мне нравится использовать az index hidden h1 для каждой страницы, так как лучший SEO h1 часто не самый лучший для продаж или эстетической ценности.

Я думаю, что пример один более чем достаточно, так как текст будет отображаться, если изображения отключены. Это также поможет поисковым системам узнать о вашем сайте.

Обновление: Похоже, я ошибся. Проверьте эту статью .

Я не знаю, но это формат использовал …

 

Насколько мне известно, на моем сайте не было никакого вреда. Вы могли бы сфотографировать его, но я не вижу его загрузки быстрее.

Предполагается, что новый метод (Keller) улучшит скорость по методу -9999px:

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

рекомендуется здесь: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

 

Name

 h1 a{ width: {logo width}; height: {logo height}; display:block; text-indent:-9999px; background:url({ logo url}); } 
  
 #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; } 

Для причины SEO:

  

Your awesome title

  • JSF / Facelets: почему не стоит смешивать JSF / Facelets с тегами HTML?
  • Является ли HTML5 действительным XML?
  • Как включить другой XHTML в XHTML с помощью JSF 2.0 Facelets?
  • Вставить презентацию PowerPoint в HTML
  • вертикальное и горизонтальное выравнивание (среднее и среднее) с помощью css
  • cols, colgroups и css: hover psuedoclass
  • Селектор родительских / предков CSS
  • Как разрешить объекты при загрузке в XDocument?
  • Почему и не берут размер шрифта и размер шрифта из тела?
  • Как вставить специальные символы, такие как & и <в атрибут значения компонентов JSF?
  • IE 8: исправление фонового размера
  • Давайте будем гением компьютера.