Кажется, что есть несколько различных методов, поэтому я надеялся получить "окончательный" ответ на этот вопрос ...
На веб-сайте принято создавать логотип, который ссылается на домашнюю страницу. Я хочу сделать то же самое, но лучше оптимизировать для поисковых систем, программ чтения с экрана, IE 6+ и браузеров, которые отключили CSS и / или изображения.
Пример первый: не использует тег h1. Не так хорошо для SEO, верно?
<div id="logo">
<a href="">
<img src="logo.png" alt="Stack Overflow" />
</a>
</div>
Пример второй: нашел это где-то. CSS кажется немного хакерским.
<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;
}
Пример третий: тот же HTML, другой подход с использованием text-indent. Это «Phark» подход к замене изображения.
<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;
}
Пример четвертый: метод Лихи-Лангриджа-Джеффриса . Отображается, когда изображения и / или CSS отключены.
<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 */
}
Какой метод лучше всего подходит для такого рода вещей? Пожалуйста, предоставьте HTML и CSS в своем ответе.
title
атрибут не должен быть в<a>
?Ответы:
Вам не хватает опции:
название в href и img в h1 очень, очень важно!
источник
Я делаю это в основном так, как описано выше, но по соображениям доступности мне нужно поддерживать возможность отключения изображений в браузере. Таким образом, вместо отступа текста от ссылки со страницы, я покрываю его, помещая
его на полную ширину и высоту<span>
<a>
и используя егоz-index
для размещения над текстом ссылки в порядке расположения.Цена одна пустая
<span>
, но я готов иметь ее там для чего-то столь же важного, как и<h1>
.источник
Если важны причины доступности, используйте первый вариант (когда клиент хочет видеть изображение без стилей)
Нет необходимости соответствовать мнимым требованиям SEO, потому что приведенный выше HTML-код имеет правильную структуру, и только вы должны решить, подходит ли это для ваших посетителей.
Также вы можете использовать вариант с меньшим количеством HTML кода
Обратите внимание, что я удалил все другие стили и хаки CSS, потому что они не соответствовали задаче. Они могут быть полезны только в особых случаях.
источник
display:none
не доступенЗвонит здесь немного поздно, но не удержался.
Ваш вопрос наполовину несовершенен. Позволь мне объяснить:
Первая половина вашего вопроса о замене изображений - это правильный вопрос, и я считаю, что для логотипа - простое изображение; атрибут alt; и CSS для его позиционирования достаточно.
Вторая половина вашего вопроса о «ценности SEO» H1 для логотипа - неправильный подход к решению, какие элементы использовать для разных типов контента.
Логотип не является основным заголовком или даже вообще заголовком, и использование элемента H1 для разметки логотипа на каждой странице вашего сайта принесет (немного) больше вреда, чем пользы для вашего рейтинга. Семантически заголовки (H1 - H6) подходят, ну, просто для этого: заголовки и подзаголовки для контента.
В HTML5 допускается более одного заголовка на страницу, но логотип не заслуживает одного из них. Ваш логотип, который может быть нечетким зеленым виджетом и некоторым текстом, находится на изображении сбоку от заголовка по причине - это своего рода «штамп», а не иерархический элемент для структурирования вашего контента. Первый (то, используете ли вы больше, зависит от вашей иерархии заголовков) H1 каждой страницы вашего сайта должен озаглавить его предмет. Основным основным заголовком вашей индексной страницы может быть «Лучший источник нечетких зеленых виджетов в Нью-Йорке». Основной заголовок на другой странице может быть «Сведения о доставке для наших нечетких виджетов». На другой странице это может быть «О компании Bert's Fuzzy Widgets Inc.». Вы поняли идею.
Примечание: как бы невероятно это не звучало, не смотрите на источник веб-ресурсов, принадлежащих Google, чтобы найти примеры правильной разметки. Это целый пост сам по себе.
Чтобы получить наибольшую «ценность SEO» из HTML и его элементов, взгляните на спецификации HTML5 и примите решения о разметке, основанные на семантике (HTML) и ценности для пользователей, прежде чем поисковые системы, и вы добьетесь большего успеха с вашим SEO.
источник
Я думаю, что вы были бы заинтересованы в дебатах H1 . Это спор о том, использовать ли элемент h1 для заголовка страницы или для логотипа.
Лично я бы пошел с вашим первым предложением, что-то вроде этого:
Конечно, это зависит от того, использует ли ваш дизайн заголовки страниц, но это моя позиция по этому вопросу.
источник
Это был хороший вариант для SEO, потому что SEO придает тегу H1 высокий приоритет, внутри тега h1 должно быть имя вашего сайта. Используя этот метод, если вы будете искать имя сайта в SEO, он также покажет логотип вашего сайта.
Вы хотите скрыть имя сайта ИЛИ текст, пожалуйста, используйте текстовый отступ в отрицательном значении. бывший
источник
Вы пропустили заголовок в
<a>
элементе.Я предлагаю поместить заголовок в
<a>
элемент, потому что клиент хотел бы знать, что означает это изображение. Поскольку вы настроилиtext-indent
тестирование<h1>
таким образом, чтобы пользователь переднего плана мог получать информацию об основном логотипе, пока он зависает над логотипом.источник
Как работает W3C?
Просто взгляните на https://www.w3.org/ . Изображение имеет
z-index:1
, текст здесь, но позади из-заz-index:0
связанных сposition: absolute;
Оригинальный HTML:
Оригинальный CSS:
источник
Еще один момент, который никто не затронул, это тот факт, что атрибут h1 должен быть специфичным для каждой страницы, а использование логотипа сайта будет эффективно дублировать H1 на каждой странице сайта.
Мне нравится использовать индекс h скрытый h1 для каждой страницы, так как лучший SEO h1 часто не самый лучший для продаж или эстетической ценности.
источник
Новый метод (Keller) должен улучшить скорость по сравнению с методом -9999px:
рекомендуется здесь: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
источник
Я не знаю, но этот формат использовал ...
Просто, и это не принесло моему сайту никакого вреда, насколько я могу видеть. Вы могли бы css это, но я не вижу, что это загружается быстрее.
источник
По причине SEO:
источник
Прочитав вышеупомянутые решения, я использовал решение CSS Grid.
источник
источник
источник