Ваше благополучие зависит от ваших собственных решений.

Джон Дэвисон Рокфеллер

Меню сайта
  • Компьютеры
  • Телефоны
  • Бизнес
  • Свое дело
  • Решение проблем
  • Интернет
  • Новости
  • Новости
    Реклама
    Реклама

    5 эффективных оптимизаций PrestaShop для улучшения SEO вашей домашней страницы

    1. Вывод: PrestaShop немного оптимизирован для SEO по умолчанию
    2. Реальный случай с реальным клиентом
    3. SEO 1 оптимизация: заголовок страницы или базовый уровень
    4. SEO 2 оптимизация: основные категории
    5. SEO оптимизация 3: названия продуктов
    6. SEO оптимизация 4: слайдер или карусель или слайд-шоу
    7. SEO оптимизация 5: информационный блок CMS
    8. Оптимизация SEO 6 (бонус): названия модулей
    9. баланс

    Чтобы продать, вы должны быть видны: это так просто! Давайте подробно расскажем о том, как улучшить видимость домашней страницы вашего магазина PrestaShop .

    Деньги не растут на земле, поэтому давайте посмотрим, как получить больше с вашим PrestaShop!

    Вывод: PrestaShop немного оптимизирован для SEO по умолчанию

    По умолчанию PrestaShop предлагает модуль для создания файла карты сайта , выделенные поля для настройки мета-заголовка и тегов описания ... но нет возможности выбрать, какой элемент на домашней странице является <h1> с четко определенным содержимым, что элемент <h2> и т. д.

    Это позор, потому что немного похоже на чтение книги с произвольно выбранным названием с неуместными субтитрами. Вы бы проходили в книжном магазине, не покупая его, это точно! То же самое для вашего сайта, потому что на домашнюю страницу не ссылаются, если содержание не имеет значения.

    Недостаток: если по умолчанию выбор содержимого и позиций на главной странице невозможен, то это потому, что это код интеграции, поэтому управление через него невозможно. администрация PrestaShop. Надо будет засучить рукава 🙂

    Реальный случай с реальным клиентом

    Я представлю конкретные решения, совместимые с версиями PrestaShop 1.4 до 1.6 и PrestaShop 1.7, чтобы удовлетворить наибольшее количество, но прежде, я поделюсь с вами отзывом.

    домашняя страница сайта artifice.re под PrestaShop

    Например, я работал в магазине www.artifice.re который предлагает фейерверки и петарды в Реюньоне.

    Для этого конкретного случая я вмешался в части скорости загрузки и оптимизации кода. Клиент не был виден в запросах, которые генерируют продажи сегодня, например:

    ==> 2-я позиция достигнута за 34 дня для выражения "artifice la réunion":

    ==> 3-я позиция достигнута за 34 дня для выражения "встреча фейерверков":

    И как это повлияет на продажи?

    ==> В магазине сгенерировано в июне и июле 2017 года всего 10 заказов. После оптимизации скорости и ссылок, магазин сгенерировал в августе и 14 сентября заказы на оборот вдвое !

    SEO 1 оптимизация: заголовок страницы или базовый уровень

    Ваша домашняя страница должна иметь заголовок, который не имеет место по умолчанию. Этот заголовок будет <h1> на главной странице, но простым текстом на других страницах, которые все имеют заголовок <h1>. Я даю вам код для размещения желательно самого высокого в вашем коде.

    В файле www / themes / your-theme / header.tpl с PrestaShop 1.4 до 1.6:

    {if $ page_name == 'index'} <h1> {ls = 'Заголовок страницы'} </ h1> {else} <p id = "titredepage"> {ls = 'Заголовок страницы'} </ p> {/}, если

    В файле www / themes / your-theme / templates / _partials / header.tpl с PrestaShop 1.7:

    {if $ page.page_name == 'index'} <h1> {ls = 'Заголовок страницы'} </ h1> {else} <p id = "titredepage"> {ls = 'Заголовок страницы'} </ p> {/ if}

    Осталось только стилизовать <h1> на главной странице и затем абзац на других страницах. Я добавил идентификатор "titredepage" в абзац, чтобы просто использовать CSS.

    SEO 2 оптимизация: основные категории

    После домашней страницы важными страницами вашего магазина являются страницы категорий независимо от уровня: подкатегория, подкатегория ... Я советую вам использовать модуль по умолчанию в PrestaShop для выполнения операции.

    В частности, цель здесь состоит в том, чтобы разместить на своей домашней странице контент, включая заголовки со ссылками (не злоупотребляйте количеством ссылок), к основным категориям в виде <h2> в коде.

    Не размещайте заголовки типа <Hn> в меню вашего сайта для информации.

    [Редактировать 20/10/2017] Почему бы не поставить <Hn> в меню? Имея около десяти названий, субтитры не будут иметь значения, потому что один слишком оптимизирует. Нет интереса пользователя и чрезмерной оптимизации для Google. Чтобы избежать тогда.

    PrestaShop 1.4 до 1.6: настроить модуль «Редактор домашней страницы»:

    PrestaShop 1.7: настроить модуль «Пользовательские текстовые блоки»:

    [Редактировать 20/10/2017] На домашней странице или на странице категорий не рекомендуется отображать большое количество заголовков <h2> по категориям. Попробуйте ограничить до 4 до 6 названий максимум. Таким образом, выбор <h2> сфокусирован на названиях, которые имеют отношение к вашим клиентам и так важны для SEO.

    SEO оптимизация 3: названия продуктов

    По умолчанию PrestaShop 1.7 хорошо построен на этом уровне, поскольку у каждого продукта есть заголовок в <section>, который является чистым. PrestaShop 1.4 до 1.6 отображает <h5> названия продуктов, которые не являются оптимальными. Мы преобразуем заголовки в простой абзац.

    В файле www / themes / your-theme / product-list.tpl с PrestaShop 1.4 до 1.6:

    • Найдите следующий код, выполнив поиск "<h5":
    <h5 itemprop = "name"> {if isset ($ product.pack_quantity) && $ product.pack_quantity} {$ product.pack_quantity | intval | cat: 'x'} {/ if} <a class = "product-name" href = "{$ product.link | escape: 'html': 'UTF-8'}" title = "{$ product.name | escape: 'html': 'UTF-8'}" itemprop = "url"> {$ product.name | truncate: 45: '...' | escape: 'html': 'UTF-8'} </a> </ h5>
    • Замените его следующим кодом (попутно мы могли бы удалить "| truncate: 45: '...'", который закрывает отображение заголовков, созданных до 45 символов):
    <p class = "p_name" itemprop = "name"> {if isset ($ product.pack_quantity) && $ product.pack_quantity} {$ product.pack_quantity | intval | cat: 'x'} {/ if} <a класс = "product-name" href = "{$ product.link | escape: 'html': 'UTF-8'}" title = "{$ product.name | escape: 'html': 'UTF-8'}" itemprop = "url"> {$ product.name | truncate: 45: '...' | escape: 'html': 'UTF-8'} </a> </ p>

    [Редактировать 04/12/2017] После комментария от Harriboman я выполнил модификацию 3, чтобы исправить проблему со скриптом.

    • Замените функцию отображения (строки с 272 по 352) в файле www / themes / your-theme / js / global.js в PrestaShop 1.6 и замените ее следующей измененной функцией:
    function display (view) {if (view == 'list') {$ ('ul.product_list'). removeClass ('grid'). addClass ('list list'); $ ('product_list> li'). removeClass ('col-xs-12 col-sm-6 col-md-4'). addClass ('col-xs-12'); $ ('product_list> li'). each (function (index, element) {var html = ''; html = '<div class = "product-container"> <div class = "row">'; html + = '<div class = "левый блок col-xs-4 col-sm-5 col-md-4">' + $ (element) .find ('left-block'). html () + '< / div> '; html + =' <div class = "центральный блок col-xs-4 col-sm-7 col-md-4"> '; html + =' <div class = "product-flags"> '+ $ (element) .find (' product-flags '). html () +' </ div> '; html + =' <p class = "p_name" itemprop = "name"> '+ $ (элемент ) .find ('. p_name'). html () + '</ p>'; var hookReviews = $ (element) .find ('. hook-reviews'); if (hookReviews.length) {html + = hookReviews .clone (). wrap ('<div>'). parent (). html (); html + = '<p class = "product-desc">' + $ (element) .find ('. desc '). html () +' </ p> '; var colorList = $ (element) .find ('. color-list-container '). html (); if (colorList! = null) {html + = '<div class = "color-list-container">' + colorList + '</ div>';} var Availability = $ (элемент) .find ('. Availability'). html (); // check: каталог режим включен, если (доступность! = ноль) {ht ml + = '<span class = "Availability">' + Availability + '</ span>'; } html + = '</ div>'; html + = '<div class = "правый блок col-xs-4 col-sm-12 col-md-4"> <div class = "right-block-content row">'; var price = $ (element) .find ('. content_price'). html (); // проверка: режим каталога включен if (price! = null) {html + = '<div class = "content_price col-xs-5 col-md-12">' + price + '</ div>'; } html + = '<div class = "кнопка-контейнер col-xs-7 col-md-12">' + $ (элемент) .find ('кнопка-контейнер'). html () + '</ div > «; html + = '<div class = "функциональные кнопки clearfix col-sm-12">' + $ (элемент) .find ('функциональные кнопки'). html () + '</ div>'; html + = '</ div>'; html + = '</ div> </ div>'; $ (Element) .html (HTML); }); $ ( 'Display') Найти ( 'LI # список') addClass ( 'выбрано') ..; $ ( 'Display') Найти ( '# Li сетки') removeAttr ( 'класс') ..; $ .totalStorage ('display', 'list'); } else {$ ('ul.product_list'). removeClass ('list'). addClass ('row grid'); $ ('product_list> li'). removeClass ('col-xs-12'). addClass ('col-xs-12 col-sm-6 col-md-4'); $ ('. product_list> li'). each (function (index, element) {var html = ''; html + = '<div class = "product-container">'; html + = '<div class = " left-block "> '+ $ (element) .find (' left-block '). html () +' </ div> '; html + =' <div class =" right-block "> '; html + = '<div class = "product-flags">' + $ (element) .find ('product-flags'). html () + '</ div>'; html + = '<p class = " p_name "itemprop =" name "> '+ $ (element) .find ('. p_name '). html () +' </ p> '; var hookReviews = $ (element) .find ('. hook-reviews ' if (hookReviews.length) {html + = hookReviews.clone (). wrap ('<div>'). parent (). html (); html + = '<p itemprop = "description" class = " product-desc "> '+ $ (element) .find (' product-desc '). html () +' </ p> '; var price = $ (element) .find ('. content_price '). html (); // проверка: режим каталога включен, если (price! = null) {html + = '<div class = "content_price">' + price + '</ div>';} html + = '<div itemprop = "offer" itemscope itemtype = "https://schema.org/Offer" class = "button-container"> '+ $ (element) .find (' button-container '). html () +' </ div> '; va r colorList = $ (element) .find ('. color-list-container'). html (); if (colorList! = null) {html + = '<div class = "color-list-container">' + colorList + '</ div>'; } var Availability = $ (элемент) .find ('. Availability'). html (); // проверка: режим каталога включен if (Availability! = NULL) {html + = '<span class = "Availability">' + Availability + '</ span>'; } html + = '</ div>'; html + = '<div class = "функциональные кнопки clearfix">' + $ (элемент) .find ('функциональные кнопки'). html () + '</ div>'; html + = '</ div>'; $ (Element) .html (HTML); }); $ ( 'Display') Найти ( '# Li сетки') addClass ( 'выбрано') ..; $ ( 'Display') Найти ( 'LI # список') removeAttr ( 'класс') ..; $ .totalStorage ('display', 'grid'); }}

    [Редактировать 20/10/2017] Следуя нескольким людям, которые спрашивали меня: почему бы не оставить <h3> на названиях, созданных в списках PrestaShop? Давайте сравним магазин с страницей текстового документа:

    • У нас есть заголовок страницы, который будет заголовком <h1> веб-страницы
    • Тогда у нас будут подчасти, которые будут названиями категорий или подкатегорий <h2> с содержанием, связанным с каждой частью.
    • Наконец, у нас были бы подподчасти с заголовком, но без содержимого, вот что произойдет, если мы поместим <h3> в названия продуктов в списках: есть заголовки, но нет содержимого, если только мы кормим каждый продукт подробным описанием

    Так что это скорее пользователь, чем технический подход, который я привожу здесь. Вы можете поместить <h3> в названия продуктов, но в этом случае рекомендуется размещать контент для каждого продукта.

    SEO оптимизация 4: слайдер или карусель или слайд-шоу

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

    PrestaShop 1.4 до 1.6: настройте модуль «Image Slider» для своей домашней страницы:

    PrestaShop 1.7: настроить модуль «Карусель»:

    SEO оптимизация 5: информационный блок CMS

    Никаких действий не требуется в PrestaShop 1.7, но в более ранних версиях, включая 1.6, был показан модуль для представления элементов подтверждения по одному для каждого элемента. Элементы подтверждения, хотя они и важны, не очень полезны для SEO, поэтому мы выделим их в простом абзаце жирным шрифтом.

    PrestaShop 1.6: настроить модуль «Информационный блок клиента CMS»:

    Оптимизация SEO 6 (бонус): названия модулей

    Более сложная, эта модификация является плюсом, потому что мы удаляем заголовки элементов, которые не оказывают положительного влияния на ваш SEO.

    Отображая инструмент отладки Chrome, мы видим на следующем скриншоте синим цветом выделение заголовка для модуля Facebook. Это название не относится к SEO, поэтому мы заменим его простым абзацем.

    снимок экрана с помощью средства отладки браузера Chrome

    Этот совет касается PrestaShop 1.6, также по умолчанию модули расположены в папке www / modules, но когда вы их правильно модифицируете, вы должны поместить переопределения в папку www / themes / your-theme / modules / your-module / your -fichier.tpl

    Поэтому для модуля Facebook мы создадим папку «blockfacebook» в www / themes / your-theme / modules / и поместим в эту папку копию файла blockfacebook.tpl из www / modules / blockfacebook /.

    Теперь откройте файл www / themes / your-theme / modules / blockfacebook.tpl и измените его в качестве примера:

    {if $ facebookurl! = ''} <div id = "fb-root"> </ div> <div id = "facebook_block" class = "col-xs-4"> <p class = "title"> {ls = 'Следуйте за нами в Facebook' mod = 'blockfacebook'} </ p> <div class = "facebook-fanbox"> <div class = "fb-like-box" data-href = "{$ facebookurl | escape: ' html ':' UTF-8 '} "data-colorscheme =" light "data-show-face =" true "data-header =" false "data-stream =" false "data-show-border =" false "> </ div> </ div> </ div> {/ if}

    Чтобы сохранить чистую компоновку, мы добавим несколько строк CSS в конце вашего файла www.wwww/memes/ your-theme / css / global.css:

    #facebook_block p.title {padding: 35px 0 0 0; поле: 0 0 12px 0; do: 300 21px / 25px "Open Sans", без засечек; цвет: # 6f6d6d; }

    Визуально ничего не меняется, но код более оптимизирован, потому что теперь основное внимание уделяется контенту, связанному с вашим бизнесом и вашими продуктами.

    Повторите это для каждого из ваших модулей, который отображает заголовок <h4>, чтобы оптимизировать его!

    баланс

    Оптимизация кода PrestaShop - это одно, а качественный контент - это другое. Предлагаемые здесь действия - это рабочая база, которая должна быть дополнена подробным и уникальным контентом для ваших клиентов. Если ваши клиенты останутся довольны, поисковые системы и особенно Google скоро добавят вас в первые результаты поиска.

    Я также советую вам прочитать две статьи, чтобы протестировать и повысить скорость PrestaShop . Скорость загрузки также улучшает SEO вашего сайта: 10 бесплатных инструментов для проверки скорости вашего сайта электронной коммерции и Оптимизация производительности PrestaShop ,

    До скорой встречи 🙂

    Если у вас нет времени или навыков для оптимизации вашего магазина PrestaShop, я справлюсь!

    Свяжитесь со мной

    Вам понравилась эта статья? Обратите внимание на это со звездами! Спасибо!

    Редактировать 20/10/2017] Почему бы не поставить <Hn> в меню?
    Профиль
    Реклама
    Деловой календарь
    Пн Вт Ср Чт Пт Сб Вс
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    Реклама
       
    Sti.lg.ua © 2016