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

Дело 1:

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

случай 2:

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

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

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

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

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

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

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

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

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

Я обнаружил, что в случае 2 hrefвставка часто не соответствует остальной части моей страницы. Но это могло быть способом, которым я установил свои края в своем .css. Таким образом, я предпочел бы Случай 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

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

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

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

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

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

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

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

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