Сниппет ТегиСниппет "Теги" с SEO уклоном
Короткий фрагмент кода, который отрисует теги товара с перекрёстными ссылками на товар.
Скорее всего вы знаете, как обычно используются теги: выведенные в разметку клиентской стороны сайта, каждый из них представляет собой ссылку на страницу со списком товаров, помеченных таким же тегом. По сути, это разновидность поиска в один клик по ключевому слову. Однако существует ещё один вид применения, он служит для создания перекрёстных ссылок на страницу, а по клику уже действует как обычный тег - ведёт на теговый список.
Плюс такого способа в том, что кроме обычной теговой функциональности, выполняется одна из SEO-задач: получить на внетоварных страницах сайта ссылки на товарную страницу с разным якорным текстом, точно соответствующим ключевым словам той страницы.
Рассмотрим несколько его реализаций. Каждый пример кода написан так, словно это маленький
модулёчек, например разместим его в файле common/tags.htm нашего шаблона,
и который останется вызвать в нужном месте страницы, скажем во время вывода мини карточек
товаров:
...
{foreach $products as $item}
...
{include 'common/tags.htm'}
{/foreach}
...
Примечательно Код сохраняет работоспособность в том числе для страниц категорий, брендов, новостей, статей и вообще любой записи, которая содержит поле тегов.
Простейший случай
Здесь воспроизводится типичная теговая функциональность.
{$tags = explode(',', $item-»tags|default:'')}
{if !empty($tags)}
«div class="tags"»
{foreach $tags as $tag}
{$tag = trim($tag|lower)}
{$key = preg_replace('/\s+/u', '-', $tag)}
«a href="tags/{$key|escape}" rel="nofollow"»
{$tag}
«/a»
{/foreach}
«/div»
{/if}
Механизм работы кода Из входной переменной $item, содержащей запись текущего отрисовываемого товара, извлекаем список тегов, которые администратор должен был перечислить через запятую. Если список не пустой, пробегаем по его элементам и выводим каждый в виде теговой ссылки: название тега и ключевой url.
Обратите внимание Ссылки снабжены признаком nofollow, ведь нам как раз не интересно, чтобы поисковик ходил по таким ссылкам.
Простейший случай + SEO
Тот же код с небольшим изменением, в результате чего теговые ссылки указывают на страницу товара, а ключевой url подставляется только в момент физического нажатия на ссылку.
{$tags = explode(',', $item-»tags|default:'')}
{if !empty($tags)}
«div class="tags"»
{foreach $tags as $tag}
{$tag = trim($tag|lower)}
{$key = preg_replace('/\s+/u', '-', $tag)}
{$href = 'tags/'|cat:($key|escape)}
«a href="{url}" onclick="this.href = '{$href}'"»
{$tag}
«/a»
{/foreach}
«/div»
{/if}
Обратите внимание Ссылки сделаны без признака nofollow, поскольку мы хотим, чтобы поисковик прошёл и сопоставил с такими тегами именно реальную страницу товара.
SEO без теговой функциональности
Очевидно, найдутся сайты, каким плевать на теговый поиск, но привлекательна продвиженческая составляющая тегов. Тогда тот же код можно записать короче.
{$tags = explode(',', $item-»tags|default:'')}
{if !empty($tags)}
«div class="tags"»
{foreach $tags as $tag}
«a href="{url}"»
{trim($tag|lower)}
«/a»
{/foreach}
«/div»
{/if}
Важно В таком случае стремитесь перечислить в каждом товаре немного самых основных тегов, чтобы избежать ссылочного спама.
Улучшенный случай + SEO
Отличается от кода выше тем, что вдобавок устраняет человеческий фактор, когда администратор
копипастит теги и не следит за их повторяемостью или небрежен в перечислении. Например этот
код правильно обработает, скажем такое перечисление тегов flat, adaptive, , ,, flat , , flat,
в то время как код выше 3 раза повторил бы ссылку flat и ещё 4 пустые ссылки.
{$tags = []}
{$list = explode(',', $item-»tags|default:'')}
{if !empty($list)}
{foreach $list as $tag}
{$tag = trim($tag|lower)}
{if $tag != ''}
{$key = preg_replace('/\s+/u', '-', $tag)}
{$href = 'tags/'|cat:($key|escape)}
{$tags[$href] = $tag}
{/if}
{/foreach}
{/if}
{if !empty($tags)}
«div class="tags"»
{foreach $tags as $href =» $tag}
«a href="{url}" onclick="this.href = '{$href}'"»
{$tag}
«/a»
{/foreach}
«/div»
{/if}
Механизм работы кода Похож на код выше, только перед выводом списка тегов, он сначала прогоняется на предмет повтора тегов и отбрасывания пустых.
Расширенный случай: SEO без теговой функциональности
Дело в том, что поле тегов в записи о товаре заполняется не всяким магазином, а поле Meta Keywords, хотя и служит другим целям, но по сути родственно теговому перечислению или прекрасно дополняет его. И вот неплохо было иметь такой код, чтобы учитывал данную особенность полей и объединял их списки в один теговый список. Пожалуйста:
{$tags = []}
{$pack = [ explode(',', $item-»tags|default:''),
explode(',', $item-»meta_keywords|default:'') ]}
{foreach $pack as $list}
{if !empty($list)}
{foreach $list as $tag}
{$tag = trim($tag|lower)}
{if $tag != ''}
{$key = preg_replace('/\s+/u', '-', $tag)}
{$tags[$key] = $tag}
{/if}
{/foreach}
{/if}
{/foreach}
{if !empty($tags)}
«div class="tags"»
{foreach $tags as $tag}
«a href="{url}"»
{$tag}
«/a»
{/foreach}
«/div»
{/if}
Стилизация
Пример простой раскраски блока тегов. Эти правила следует расположить в файле стилей вашего шаблона.
.tags {
border-top: #ddd 1px solid;
font-size: 10pt;
margin: .5em 0 0;
padding: 1em;
overflow: hidden;
}
.tags a {
background: #ddd;
border-radius: 3px;
display: inline-block;
float: left;
line-height: 1.4em;
margin: .5em 1.5em;
padding: 0 .5em;
white-space: nowrap;
}
