Якорный тег внутри <h1> или <h1> внутри якорного тега: что лучше?

52

Я пытаюсь использовать <h1>теги в своем блоге для заголовка сообщения и столкнулся с одной проблемой. Название гиперссылки.

Дело 1:

<h1> <a href=""> xyz </a> </h1>

случай 2:

<a href=""> <h1> xyz</h1> </a> 

Какой из них лучше с точки зрения SEO?

Sangram
источник

Ответы:

57

Если вы используете HTML5 , просто выберите один; они эквивалентны.
HTML5 допускает ссылки на уровне блоков , но в вашем случае нет особой причины делать это, поскольку существует только один элемент уровня блоков. Лично я не стал бы делать это здесь, потому что наличие <h1>тега снаружи облегчило бы поиск в исходном коде.

Все остальное (XHTML, HTML4 и т. Д.), А второе - просто неправильно. Это не будет действительный код, и на каком-то уровне это плохо для вашей поисковой оптимизации [Вставьте стандартный отказ от ответственности о том, насколько любое отдельное нарушение действительно влияет на что-либо, и т. Д.].

Су»
источник
У меня есть вопрос: <h1> привет <h1> // 5 символов <h1> <a> привет </a> </ h1> // 5 символов или Google читает его как 12 символов?
Хфаразм
11

Они такие же, как и SEO. (Обычно элементы уровня блока содержат встроенные элементы, а не наоборот, поэтому вы должны использовать первый пример, но это не повлияет на SEO).

Джон Конде
источник
3
На самом деле встроенные элементы не должны содержать блочных элементов в соответствии со спецификацией HTML.
Рассерженная шлюха
3
@DisgruntledGoat Не совсем. Doctype необходимо учитывать.
Су '
@Su ', какие типы документов допускают блочные элементы внутри встроенных элементов?
Рассерженная шлюха
4
@DisgruntledGoat HTML5 позволяет ссылкам (ранее просто встроенным элементам) окружать блочные элементы, такие как заголовки и теги абзаца. Вот где важен доктайп. Если вы используете HTML5, обязательно используйте шаблон <a><h1></h1></a>. В противном случае используйте традиционный шаблон <h1><a></a></h1>. Google будет обращать внимание на оба метода одинаково, но некоторые браузеры могут не очень хорошо сочетаться с нестандартным шаблоном, ЕСЛИ У вас нет правильного типа документа (HTML5).
Тина Белл Вэнс
Таким образом, вышеприведенное применимо и для именованных тегов привязки не так ли? хорошо иметь <h1> <a name='intro'> введение </a> </ h1>, кроме <a name='intro'> <h1> введение </ h1> </a>.
Джаяпал Чандран
6

Они оба верны в html5 , html позволяет блокировать элементы во встроенных элементах. Это также не влияет на SEO, так как в обоих случаях текст переносится в заголовок, поэтому он остается неизменным.

Это не выбор правильности, а предпочтение в пользовательском интерфейсе:

  • Если вы оберните заголовок вокруг якоря, вы создадите большой якорь, кликать будет только текст.
  • Когда вы оборачиваете якорь вокруг заголовка, вся строка становится кликабельной.

Я сделал вам пример на jsFiddle.net

Мартейн
источник
4

Я обнаружил, что в случае 2 hrefвставка часто не соответствует остальной части моей страницы. Но это могло быть способом, которым я установил свои края в своем .css. Таким образом, я предпочел бы Случай 1.

Гай Томас
источник
1

То, что здесь сказано, проницательно, спасибо всем. Давайте рассмотрим еще одну метку: добавление микроданных и тому подобное в уравнение.

Допустим, у нас есть

<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-Add-Microdata-To-Your-Blog

Шерп ван Вуден
источник
0

<h1> <a href=""> xyz </a> </h1> Этот пример верный.

rakonda
источник
3
либо верны в HTML5
Саймон Хейтер
0

В целях SEO следует избегать ссылок на уровне блоков - из уст в уста: https://www.seroundtable.com/block-level-links-google-seo-16369.html

Обновление: вынос по ссылке ...

Наличие какой-либо ссылочной конструкции, как уже говорили другие, хорошо для связывания. Тем не менее, в целях SEO, вы должны содержать текст привязки в чистоте, чтобы Google мог лучше интерпретировать привязку и назначить соответствующую релевантность.

Джон Мюллер (аналитик веб-мастеров Google) продолжает ...

Такое использование было бы хорошо для нас (Google) - мы все равно выбрали бы ссылку и могли бы связать ваш текст в качестве якоря с этим. Мы довольно гибки в разборе HTML, так что вы, возможно, даже можете использовать это с HTML4. Тем не менее, чем яснее вы сделаете свой якорный текст, тем легче нам понять контекст ссылки, поэтому я не всегда буду использовать целый абзац в качестве якоря для всех ваших внутренних ссылок.

TL; DR Для SEO не используйте ссылку на уровне блока.

Сумматоры
источник
Надежда на то, что вы обновите свой ответ, отчасти показывает, почему оба примера НЕ эквивалентны, как говорили другие.
Роб
-1

Если цель состоит в том, чтобы внутри ссылки были дополнительные кликабельные элементы (например, изображение и т. Д.), И при этом все равно проверяйте с помощью 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>

иначе просто:

<h1 onclick="if (this.getElementsByTagName('a')[0]) location=this.getElementsByTagName('a')[0].href;">
<a href="#">
linked-heading
</a>
</h1>

добавить cursor:pointerк css родительского элемента, чтобы завершить трюк.

Люциан Давидеску
источник
1
Встроенный JavaScript? Мы вернулись в 1999 году? ;)
Мартейн
Зачем тебе это делать? Просто оберните заголовок в якорь. Это просто плохая практика
Мартейн
Внимательно прочитайте комментарий, вы найдете ответ, записанный прямо здесь;) HTML 4.01 на самом деле уже 1999 года. Когда вы попытаетесь подтвердить свое предложение в соответствии с этим типом документа, вы получите следующую ошибку: "[D] тип документа делает не разрешать элемент "H1" здесь (...) Одной из возможных причин для этого сообщения является то, что вы попытались поместить элемент уровня блока (например, "<p>" или "<table>") внутри встроенного элемента ( например, "<a>", "<span>" или "<font>"). " Конечно, абсолютно не нужно заботиться о том, что говорят валидаторы, отсюда и «если» в самом начале комментария.
Люциан Давидеску