Якорная метка внутри <h1> или <h1> внутри тега ахор: что лучше?
Я пытаюсь использовать теги <h1>
в своем блоге для заголовка сообщения и столкнулся с одной проблемой. Заголовок гиперссылки.
Случай 1:
<h1> <a href=""> xyz </a> </h1>
случай 2:
<a href=""> <h1> xyz</h1> </a>
Какой из них лучше с точки зрения SEO?
8 ответов
Если вы используете HTML5 , просто выберите один; они эквивалентны.
HTML5 позволяет ссылки на уровне блоков , но в вашем случае нет особых причин для этого , так как есть только один элемент уровня блока. Лично я бы этого не сделал, потому что тег <h1>
был бы легче сканировать в исходном коде.
Все остальное (XHTML, HTML4 и т. д.), а второе - просто неправильно. Это будет недействительным код, а на каком-то уровне это плохо для вашей оптимизации поиска. [Вставьте стандартную оговорку о том, сколько какого-либо правонарушения действительно влияет на что-либо и т. Д.].
Они такие же, как SEO. (Обычно элементы уровня блока содержат встроенные элементы, а не наоборот, поэтому вы должны использовать первый пример, но это не повлияет на SEO).
Они оба правильны в html5 , html позволяет блокировать элементы в встроенных элементах. Это также не влияет на SEO, в обоих случаях текст обернут в заголовок, поэтому он остается тем же значением.
Это не выбор достоверности, а предпочтение в пользовательском интерфейсе:
- Если вы закроете заголовок вокруг якоря, вы создадите большой якорь, только текст будет доступен для клика.
- Когда вы завертываете привязку вокруг заголовка, вся строка получается нажатой.
Я нахожу, что с Case 2 вставка href
часто не соответствует остальной части моей страницы. Но это может быть так, как я устанавливаю свои поля в моем .css
. Таким образом, я бы предпочел Случай 1.
<h1> <a href=""> xyz </a> </h1>
Этот пример является правильным.
Для целей SEO следует избегать ссылки на уровне блоков - из уст лошади: https://www.seroundtable.com/block-level- ссылки-Google-сео-16369.html
Обновление: Вынос из ссылки ...
Наличие связующей конструкции, как говорили другие, отлично подходит для связывания. Однако для целей SEO вы должны сохранить текст привязки чистым, чтобы Google мог лучше интерпретировать привязку и присвоить соответствующую релевантность.
Джон Мюллер (аналитик аналитиков веб-мастеров в Google) продолжает ...
Это будет хорошо с нами (Google) - мы все равно возьмем ссылку, и мог бы связать ваш текст как якорь с этим. Мы довольно гибкая с разбором HTML, поэтому вы, вероятно, даже можете использовать это с HTML4. Тем не менее, чем яснее вы делаете свой якорный текст, Нам легче понять контекст ссылки, поэтому я не обязательно всегда будет использовать целый абзац в качестве якоря для все ваши внутренние ссылки.
TL; DR Для SEO не используйте ссылку на уровне блока.
То, что сказано здесь, проницательно, спасибо всем. Давайте рассмотрим еще одну отметку: добавление микроданных и т. Д. В уравнение.
Предположим, у нас есть
<h1 itemprop="name"><a href="http://goldenage.com/maths.html"
itemprop="url">Mathematics in The Muslim Golden Age</a></h1>
конкурирует с
<a href="http://goldenage.com/maths.html" itemprop="url"><h1
itemprop="name">Mathematics in The Muslim Golden Age</h1></a>
Для меня, «независимо от производительности», пример 2 имеет больше смысла. Потому что ссылка никогда не является частью имени. Разница сводится к различию между innerHTML и textContent, DOMwise. Глядя на него через innerHTML, якорь мешает. Если textContent был способом, теги будут удалены. Так что также ставится вопрос: innerHTML или textContent.
Таким образом, я бы сказал, принимая во внимание микроданные, причем привязка снаружи более чистая.
на основе: http://thenewcode.com/617/How-To- Надстройка Microdata-To-Your-блог
Если целью является добавление дополнительных ссылок в ссылку (например, изображение и т. д.) и все еще проверка с помощью html <5, вы можете использовать оба способа с помощью javascript:
<div onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<img src="/foo" alt="" />
<h1>
<a href="#">
linked-heading
</a>
</h1>
</div>
else, просто:
<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>
добавить курсор cursor:pointer
в css родительского элемента, чтобы сделать трюк полным.