DIV'ы и много текста внутри ссылок - плохо с точки зрения SEO?

big boy
На сайте с 18.11.2006
Offline
307
1828

На морде выводятся последние новости и популярные материалы, в которые входит стандартный набор:

- заголовок

- обложка материала в виде миниатюры

- краткий анонс

Классический подход в формировании ссылок - это сделать кликабельными картинку + заголовок.

Однако, посмотрев шайтан машину Вебвизор (жаль лишь что еще и с вебки не записывает, что юзер делает в этот момент), обнаружил, что многие пользователи, в попытках открыть материал, тыкают на некликабельные области рядом с очевидными ссылками (например на текст анонса). После этого несколько секунд тупят и либо находят-таки нужное место для тыка, либо психуют и уходят. При этом ссылки перепутать ни с чем другим нельзя - выделены жирно и ярко. Но закон про 95% никто не отменял.

Отсюда и желание сделать ссылку, которая охватывала бы всю карточку анонса материала. Упрощенно это выглядит так:


<a href="#">
<div><img src="#"></div>
<h3>Заголовок материала</h3>
<div>Краткий анонс</div>
<div>Дата, автор, просмотры</div>
</a>

При этом добавив няшный hover эффект получается очень красиво и ИМХО удобнее в плане юзер экспериенса + меньше шансов промахнуться по ссылке.

А что у нас при этом с точки зрения SEO? Если ссылкой является только заголовок - это 100% хорошо, так как поисковик цепляет нужные мне ключи и передаёт внутренний вес на соответствующие страницы.

Некоторые хардкорщики при этом убеждены, что дублировать при этом ссылку на картинку не стоит, так как поисковик хавает только одну ссылку на одну и ту же страницу (если их несколько), а все остальные может не учесть и этой учтённой ссылкой может быть картинка, а не нужный мне текст.

Отсюда вопрос - как такие громоздкие конструкции в ссылках (да еще и невалидные) могут отразиться на продвижении сайта? Что будут учитывать в качестве анкора поисковики? Научились ли они уже вычленять важную информацию из таких конструкций? Или же такие ссылки будут учитываться, как безанкорные?

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

Стоит ли париться по этому поводу или забить и ориентироваться лишь на удобство пользователей (о чем так сладко поёт тот же Платон при каждом ответе)?

---------- Добавлено 05.05.2016 в 22:54 ----------

Судя по документации в HTML5 разрешили такие конструкции:

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

Если по-русски, то ссылки могут содрержать параграфы, списки, таблицы и даже целые секции до тех пор, если внутри таких ссылок нет других интерактивных элементов (кнопок или других ссылок).

✔ Google spam update убил сайты? Что делать - https://webmasta.ru/blog/google-october-2022-spam-brain-update
Алексей Барыкин
На сайте с 04.02.2008
Offline
272
#1

ПС отдавать:

<div><img src="#"></div>
<h3><a href="#">Заголовок материала</a></h3>
<div>Краткий анонс</div>
<div>Дата, автор, просмотры</div>

Пользователю отдавать (после обработки яваскритом):

<div><a href="#"><img src="#"></div>
<h3><a href="#">Заголовок материала</a></h3>
<div><a href="#">Краткий анонс</a></div>
<div><a href="#">Дата, автор, просмотры</a></div>

Не?

TF-Studio
На сайте с 17.08.2010
Offline
334
#2

а через js не проще прокрутить?

отдавать разный контент ботам и людям - крайне плохая идея

Всё ещё лучший способ заработка для белых сайтов: GoGetLinks (https://www.gogetlinks.net/?inv=fahbn8).
[Удален]
#3
TF-Studio:
отдавать разный контент ботам и людям - крайне плохая идея

а кто говорил про разный?

Алексей Барыкин:
Пользователю отдавать (после обработки яваскритом):

я бы вообще свёл к конструкции

<a href=".....">Заголовок материала</a>

а пользователю js сформировал бы


<div class="класс">
<div><img src="#"></div>
<h3><a href="#">Заголовок материала</a></h3>
<div>Краткий анонс</div>
<div>Дата, автор, просмотры</div>
</div>

и js обрабатывал бы событие клик на блоке

в принципе вот пример http://www.unmedia.ru/03-12-2014.html (анонсы новостей внизу)

в html коде есть только 1 ссылка

<div id="Vitrin" class="nojscontent">

<a class="linpage" href="02-12-2014.html">Contributor за деньги без рекламы</a>
</div>

всё остальное делает js

CH
На сайте с 27.06.2011
Offline
88
#4

От гугла вы таким js ничего не спрячите.

богоносец
На сайте с 30.01.2007
Offline
753
#5
big boy:
громоздкие конструкции в ссылках (да еще и невалидные)

А как можно показать учёт валидности ПС?

big boy
На сайте с 18.11.2006
Offline
307
#6
богоносец:
А как можно показать учёт валидности ПС?

Ошибочка моя вышла - в HTML 5 уже валидно оно.

Что касается чисто сферического кода в вакууме, то есть мнение, что при прочих равных, сайт с валидным кодом может оказаться выше в поиске, чем тот, который валидацию не прошел. Хотя на практике такое проверить ой как сложно. Ну и гуглоиды неоднократно заявляли, что валидный код - это хорошо.

По сабжу - про JS почему-то забыл, да, наверное через него и буду делать. Вот, кстати и подходящее решение - https://github.com/nathanford/data-href

Внедрение тоже простое:


<article data-href="/content-page">

<h1><a href="/content-page">Headline goes here.</a></h1>
<p>And here goes a bit of copy about the content of the article.</p>

<small>Tags: <a href="/tags/content">content</a>, <a href="/tags/headlines">headlines</a></small>

</article>


---------- Добавлено 06.05.2016 в 16:35 ----------

Единственный минус у этого скрипта - из коробки не умеет обрабатывать среднюю кнопку мышки для открытия ссылок в новом окне.

---------- Добавлено 06.05.2016 в 17:19 ----------

Средняя кнопка всё же работает, но только в Хроме и если нет вертикальной прокрутки.
богоносец
На сайте с 30.01.2007
Offline
753
#7
big boy:
Что касается чисто сферического кода в вакууме, то есть мнение

Чисто конкретно, ПС не различали... им просто не надо то, что браузерам.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий