- SEO контекст
- Плохие практики SEO электронной коммерции
- Расширить ссылку в JavaScript
- Краткое изложение хороших практик SEO

SEO контекст
Постоянной проблемой на сайтах электронной коммерции является чрезмерное количество ссылок на произведенные вставки в список страниц. Как правило, они состоят как минимум из одного изображения, заголовка и описания. Для проблем UX вся вставка должна быть кликабельной, что часто приводит к событиям, которые подрывают SEO.
Плохие практики SEO электронной коммерции
Наиболее распространенной практикой является размещение ссылки вокруг каждой части вставки. С точки зрения UX это работает хорошо, пользователь может щелкнуть в любом месте, чтобы попасть на страницу продукта. Однако с точки зрения SEO, он умножает ссылки, и Google отправляет большую часть внутреннего PageRank на первую найденную ссылку , т.е. на ту, что находится вокруг изображения. В отличие от текстовой ссылки, googlebot труднее понять контекст и связанную семантику. Это не продвигает SEO сайта.
Другая практика заключается в том, чтобы охватить весь блок одной ссылкой. Это вызывает ту же проблему.
Мы хотим разместить ссылку только на название продукта, сохраняя весь кликабельный блок. Цель состоит в том, чтобы объединить оптимизацию SEO и UX.
Расширить ссылку в CSS
Для этого мы поместим ссылку на желаемый якорь, а затем расширим ее в CSS.
Давайте создадим очень простую вставку продукта, которая просто включает изображение и название продукта:
<! - ВХОД ПРОДУКТА -> <div class = "product-content"> <! - ИЗОБРАЖЕНИЕ ПРОДУКТА -> <img src = "https://seo-data.clustaar.com/wp-content/uploads /2017/11/logo-black_SEO.png "width =" 219 "height =" 284 "> <! - НАЗВАНИЕ, СОДЕРЖАЩЕЕ ССЫЛКУ НА ПРОДУКТ -> <h2> <a href =" https: // seo data.clustaar.com "> Продукт </a> </ h2> </ div> <! - FIN ENCART PRODUCT ->Вставка продукта
Теперь давайте используем CSS, чтобы сделать все вставки кликабельными.
/ * Относительная позиция должна быть на div, который включает в себя все вставки продукта. Переполнение используется для предотвращения переполнения ссылки на вставку * / .product-content {position: относительный; ширина: 219px; высота: 345px; переполнение: скрытый; text-align: center;} / * Стиль заголовка * / .product-content a {text-ornament: none; color: black;} / * Псевдокласс, который позволит ссылке занять всю вставку, взяв 100% ее размера. Z-индекс позволяет (например) перемещать размерную панель выше. * / .product-content a: before {bottom: 0; content: ""; left: 0; позиция: абсолютная; right: -100%; верхняя часть: -100%; z-index: 1;}Этот метод не создает проблем в ответной реакции, поскольку ссылка всегда занимает 100% размера вставки.
сайт электронной коммерции Vertbaudet установил этот метод на своем сайте.
Расширить ссылку в JavaScript
/! \ Расширение ссылки javascript является более сложным и жадным, чем в CSS. Необходимо быть бдительным в определенных моментах:
- Лучше всего импортировать внешний файл JavaScript и заблокировать его в Google в файле Robots.txt . Избегайте встраивания непосредственно в HTML DOM между тегами <script>.
- Чтобы не замедлять работу сайта, рекомендуется включать файлы javascript непосредственно перед тегом <body>. Этот метод позволяет оптимизировать иерархию загрузки ресурсов.
- Вам следует избегать именования его функций « LinksSeo () » или « LinksOptimization () ». Заголовки, которые позволяют Google понять, что делает правильная функция в своем названии, должны быть запрещены.
- То же самое для имени файла скрипта. В этом примере я, например, назвал azerty.js .
Используя ту же HTML-вставку, вы должны добавить атрибут onmouseover = "myFunction ()" в блок, содержащий вставку продукта. В этом примере я не передавал никакие параметры функции, но это вполне возможно в контексте динамического создания URL. Я также включил файл сценария перед закрытием тега body через <script type = "text / javascript" src = "monscript.js"> </ script> .
Для JavaScript это функция, которая возвращает пользователя на страницу продукта. Мы добавляем событие click с помощью метода addEventListener () . Наконец, window.location.href = "" перенаправляет пользователя, когда происходит событие щелчка.
function display () {// Добавить событие click к записи идентификатора содержимого продукта document.getElementById ("product-content"). addEventListener ("click", function (event) {// Перенаправить на указанная ссылка window.location.href = "https://seo-data.clustaar.com";})}Краткое изложение хороших практик SEO
Всегда лучше использовать метод CSS, когда это возможно (обычно в 99% случаев). Первый способ менее громоздок и не замедляет работу сайта в отличие от JavaScript.
Этот метод позволяет:
- Не перегружайте DOM .
- Оптимизировать привязку ссылки .
- Контекстуализируйте страницу .
- Чтобы ответить на проблемы UX сайтов электронной коммерции .