Ссылка на несколько элементов?

Question

У меня есть изображение, под ним есть заголовок и субтитры. Есть несколько из них в списке. Нажатие на них идет к статье.

<li> 
    <div class="img-container"><img src="test.jpg"></div> 
    <h2>The Title</h2> 
    <p>The sub title</p> 
</li> 

Мне нужно связать вышеуказанное. Я хочу, чтобы пользователь мог нажимать на изображение, заголовок или субтитры, чтобы перейти на страницу статьи.

Должен ли я обернуть каждый элемент и создать 3 х ссылки:

<li> 
    <div class="img-container"><a href="/whatever"><img src="test.jpg"></a></div> 
    <h2><a href="/whatever">The Title</a></h2> 
    <p><a href="/whatever">The sub title</a></p> 
</li> 

Или я должен обернуть весь блок:

<li> 
    <a href="/whatever"> 
     <div class="img-container"><img src="test.jpg"></div> 
     <h2>The Title</h2> 
     <p>The sub title</p> 
    </a> 
</li> 

бы либо метод оказывает влияние на SEO? Удобство использования?

Answer 1

Google used to have a limit о количестве ссылок на странице; сокращение количества ссылок (особенно ссылок на одно и то же место) считалось выгодным. Поэтому я бы порекомендовал ваш второй вариант обертывания содержимого <li> в теге <a>.

Answer 2

Обертывание всего содержимого на якоре лучше, так как оно более семантическое и обеспечивает лучшую читаемость кода. Не будет никакого влияния на SEO, поскольку алгоритмы googles учитывают все это (поскольку обтекание нескольких элементов уровня блока внутри якоря разрешено спецификацией HTML 5).

Что еще более важно, в этом коде, убедитесь, что у вас есть название атрибут на якоре, в альт атрибут на IMG и использовать лучше, содержащий элемент. В этом случае у вас есть список вещей, поэтому нечто более семантическое, как тег <article>, может обеспечить лучший SEO.