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

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

Случай 1:

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

случай 2:

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

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

46 голосов | спросил Sangram 3 +04002011-10-03T16:33:29+04:00312011bEurope/MoscowMon, 03 Oct 2011 16:33:29 +0400 2011, 16:33:29

8 ответов


51

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

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

ответил Su' 3 +04002011-10-03T20:02:32+04:00312011bEurope/MoscowMon, 03 Oct 2011 20:02:32 +0400 2011, 20:02:32
10

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

ответил John Conde 3 +04002011-10-03T16:43:53+04:00312011bEurope/MoscowMon, 03 Oct 2011 16:43:53 +0400 2011, 16:43:53
6

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

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

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

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

ответил Martijn 22 J0000006Europe/Moscow 2015, 14:23:57
4

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

ответил Guy Thomas 3 +04002011-10-03T20:20:34+04:00312011bEurope/MoscowMon, 03 Oct 2011 20:20:34 +0400 2011, 20:20:34
0

<h1> <a href=""> xyz </a> </h1> Этот пример является правильным.

ответил rakonda 3 Maypm13 2013, 21:23:11
0

Для целей SEO следует избегать ссылки на уровне блоков - из уст лошади: https://www.seroundtable.com/block-level- ссылки-Google-сео-16369.html

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

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

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

  

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

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

ответил Adders 26 Maypm17 2017, 12:30:27
0

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

Предположим, у нас есть

<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-блог

ответил Sjerp van Wouden 17 +03002017-10-17T15:19:37+03:00312017bEurope/MoscowTue, 17 Oct 2017 15:19:37 +0300 2017, 15:19:37
-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>

else, просто:

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

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

ответил Lucian Davidescu 22 J0000006Europe/Moscow 2015, 13:34:07

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132