Расширение ссылок CSS и Javascript для SEO - Clustaar SEO & Data

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 .

<body> <! - ВХОД ПРОДУКТА -> <div id = "product-content" onmouseover = "display ()" style = "курсор: указатель; ширина: 219px; высота: 345px; переполнение: скрытое; выравнивание текста : center; "> <! - ИЗОБРАЖЕНИЕ ПРОДУКТА -> <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"> Product </a> </ h2> </ div> <! - FIN ENCART PRODUCT -> <script type = "text / javascript" src = "azerty.js"> </ script> </ body>

Используя ту же 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 сайтов электронной коммерции .

Расширить CSS и Javascript ссылку для SEO

SEO контекст

Плохие практики SEO электронной коммерции

Расширить ссылку в CSS

Расширить ссылку в JavaScript

Краткое изложение хороших практик SEO