Наверх
INTERACTIVE DIGITAL AGENCY «GOLDEN MEDIA» · Dreamed up with ❤ in Kyiv

Создание страницы карты сайта на платформе Shopify


vanger - 23.03.2019 - 0 comments

Как добавить карту сайта в формате HTML в свой магазин Shopify

Shopify Создать страницу карты сайта

 

 

По умолчанию Shopify генерирует карту сайта в формате XML для вашего магазина, но некоторые люди также хотят добавить карту в формате HTML. Вот как это сделать.

Прежде чем мы начнем, давайте сделаем краткий обзор карт сайта Shopify:

XML карта сайта
Shopify автоматически генерирует карту сайта XML для вашего магазина. Вы можете найти свой, перейдя на yourstore.com/sitemap.xml.

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

Кроме отправки XML-карты сайта в поисковые системы, вам больше нечего делать с ней. Shopify работает с ним и автоматически обновляет его, когда вы добавляете новые продукты, страницы, сообщения в блогах и т. Д.

Изображение Sitemap
Также существует так называемая карта сайта с изображениями. Shopify не создает для вас ни одного из них.

Shopify действительно включает ссылки на ваши изображения в XML-карту сайта, но перечисляет только первое изображение продукта, а не варианты изображений продукта. Итак, Shopify здесь только частично.

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

Создание карты сайта для изображений — это не то, о чем я собираюсь рассказывать в этой статье, но, как и в случае с Shopify, есть приложение Image Sitemap, которое сделает это за вас.

HTML карта сайта
Некоторые владельцы магазинов Shopify хотят иметь HTML-версию своей карты сайта.

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

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

В любом случае, хватит болтовни, давайте перейдем к тому, как вы на самом деле добавляете карту сайта HTML в свой магазин Shopify.

Шаг 1
В админке Shopify перейдите в Интернет-магазин> Темы и в раскрывающемся списке Действия выберите «Изменить код».

Прокрутите вниз до «Шаблоны» и выберите «Добавить новый шаблон». Создайте новый шаблон на основе страницы, которую я назвал «htmlsitemap».

Код в этом шаблоне будет выглядеть примерно так:

<div class = «page-width»>
<div class = «grid»>
<div class = «grid__item medium-up — пять шестых средний-вверх — толчок-одна-двенадцатая»>
<div class = «section-header text-center»>
<h1> {{page.title}} </h1>
</div>

<div class = «rte»>
{{page.content}}
</div>
</div>
</div>
</div>
Замените этот раздел кода {{page.content}} приведенным ниже кодом:

{% — comment -%} Начало кода HTML SiteMap {% — endcomment -%}
<div class = «row»>
<div class = «col-md-6″>
<h2> Коллекции </h2>
<ul>
{% для c в коллекциях%}
<li>
<a href=»{{ c.url }}»> {{c.title}} </a>
</li>
{% endfor%}
</ul>
</div>
<div class = «col-md-6″>
<h2> Продукты </h2>
<ul>

{% paginate collections.all.products на 1000%}
{% для продукта в collections.all.products%}
<li>
<a href=»{{ product.url }}»> {{product.title}} </a>
</li>
{% endfor%}
{% endpaginate%}

</ul>
</div>
</div>
{% — комментарий -%}
Конец HTML-кода карты сайта {% — endcomment -%
{% — endcomment -%}}
Шаг 2
Затем нам нужно добавить ваш HTML-файл Sitemap в качестве страницы в вашем магазине Shopify.

Перейдите в Интернет-магазин> Страницы> Добавить страницу и создайте новую страницу, выбрав «page.htmlsitemap» в качестве шаблона.

Добавление страницы для вашей карты сайта Shopify Store HTML
Затем сохраните страницу и просмотрите ее, теперь вы увидите свой HTML-файл Sitemap.

Так будет выглядеть ваш Shopify HTML Sitemap
Шаг 3
Это фактическая карта сайта. Теперь все, что вам нужно сделать, это добавить ссылку на эту страницу на свой сайт.

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

Добавление страницы карты сайта HTML в нижний колонтитул вашего магазина Shopify
Вот так ссылка теперь выглядит в моем нижнем колонтитуле.

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

 

 

 

 

 

Файлы Sitemap информируют поисковые системы об URL-адресах веб-сайта, доступных для сканирования. Так что это очень важно для лучшего SEO. Карта сайта электронной коммерции — это просто страница, на которой перечислены все ваши продукты, коллекции или категории, а также другие страницы.
Прежде всего, вам нужно создать новый шаблон, в который мы добавим несколько строк кода. Чтобы создать новый шаблон, выполните следующие действия:
От администратора Shopify перейдите в Интернет-магазин> Темы.
Найдите тему, в которой вы хотите создать карту сайта, а затем щелкните Действия> Изменить код.
В каталоге «Шаблоны» нажмите «Добавить новый шаблон».
Выберите страницу из раскрывающегося списка и назовите ее картой сайта, как показано ниже.
Изображение для публикации
Теперь вы можете добавить в этот шаблон фрагмент кода ниже. Убедитесь, что вы добавили код под строкой ‘{{page.content}}’.
Чтобы перечислить все продукты вашего магазина Shopify, сначала вам нужно создать одну новую коллекцию. Скажем, эта коллекция «все продукты» и ниже код для вновь созданного шаблона.
Чтобы перечислить все продукты из коллекции all-products,

<div class=»parent-container»>
<h1>Products:</h1>
<div class=»link-container»>
{% if collections.all-products.products.size > 0 %}
{% for product in collections.all-products.products %}
<a class=»sitemap_link» href=»{{ product.url }}»>{{ product.title | escape }}</a>
{% endfor %}
{% endif %}
</div>
</div>

Чтобы перечислить все коллекции,

<div class=»parent-container»>
<h1>Collections:</h1>
<div class=»link-container»>
{% for product in collections %}
{% if product.handle != ‘all-products’ %}
<a class=»sitemap_link» href=»{{ product.url | within: collection }}»>{{ product.title }}</a>&nbsp;
{% endif %}
{% endfor %}
</div>
</div>

Сюда я не включил коллекцию «все продукты».
Чтобы перечислить все наши страницы,

<div class=»parent-container»>
<h1>Pages:</h1>
<div class=»link-container»>
{% for link in linklists.sitemap-menu.links %}
<a class=»sitemap_link» href=»{{ link.url }}»>{{ link.title }} </a>
{% endfor %}
</div>
</div>

Теперь наш шаблон готов. Итак, давайте создадим новую страницу. Чтобы создать новую страницу, выполните следующие действия:
От администратора Shopify перейдите в Интернет-магазин> Страницы и нажмите Добавить страницу.
Задайте заголовок страницы как файл Sitemap и оставьте содержимое пустым.
В разделе «Шаблон» справа выберите page.sitemap.
Изображение для публикации
Теперь наша страница Sitemap завершена и готова к тестированию. Таким образом мы можем перечислить все продукты, коллекции и страницы Shopify на одной странице.

 

 

 

 

 

Кажется, существует большая путаница с добавлением HTML-карты сайта на веб-сайты Shopify, поэтому мы создали эту статью, чтобы показать вам, насколько это на самом деле просто. Большинство людей думают, что им нужно прибегать к использованию сторонних приложений (которые обычно взимают ежемесячную плату), однако это не так. В этом посте мы шаг за шагом объясним, как создать карту сайта Shopify HTML менее чем за пять минут.

Да, это действительно так просто.

Не знаете, как насчет html-карты сайта. ЧТО ТАКОЕ HTML-КАРТА САЙТА?
Карта сайта HTML позволяет посетителям веб-сайта и поисковым роботам (таким как Google Bot) легко перемещаться по всем страницам веб-сайта на одной странице. По сути, это маркированная текстовая версия навигации по веб-сайту. Текст привязки, отображаемый в карте сайта HTML, ссылается непосредственно на страницу, на которую он ссылается.

ЧТО ТАКОЕ XML-КАРТА САЙТА?
Карты сайта в формате XML очень похожи на карты сайта в формате HTML, поскольку в них перечислены важные страницы веб-сайтов, благодаря чему Google (или любой другой сканер поисковых систем) может находить, сканировать и понимать структуру веб-сайта, что играет важную роль в ранжировании обычного поиска. Однако карты сайта XML обычно являются динамическими и извлекаются из стороннего плагина, такого как Yoast SEO. Эти карты сайта также отправляются в Google Search Console для индексации, что позволяет отслеживать технические проблемы веб-сайта.

КАК СОЗДАТЬ КАРТУ САЙТА ДЛЯ ПРОДАЖИ HTML
Первое, что вам нужно сделать, это создать новый шаблон, в который вы добавите несколько пользовательских строк кода. Чтобы создать новый шаблон в Shopify, выполните следующие действия:

В административной панели Shopify перейдите в Интернет-магазин> Темы
В первом разделе (живая тема) нажмите Действия> Изменить код.
В папке «Шаблоны» нажмите «Добавить новый шаблон».
Выберите страницу из раскрывающегося списка и назовите ее карта сайта.
Нажмите кнопку Создать шаблон

Это шаблон, в который вы собираетесь добавить собственный код. Очень важно добавить код непосредственно под строкой с {{page.content}}, чтобы не потерять стиль обычной страницы.

Чтобы перечислить все свои продукты и коллекции, добавьте следующий код на новую страницу шаблона:

<div class = «row»>
<div class = «col-md-6″>
<h2> Коллекции </h2>
<ul>
{% для c в коллекциях%}
<li>
<a href=»{{ c.url }}»> {{c.title}} </a>
</li>
{% endfor%}
</ul>
</div>
<div class = «col-md-6″>
<h2> Продукты </h2>
<ul>
{% для продукта в collections.all.products%}
<li>
<a href=»{{ product.url }}»> {{product.title}} </a>
</li>
{% endfor%}
</ul>
</div>
</div>

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

Теперь, когда шаблон создан, вам нужно добавить новую страницу для размещения карты сайта. Чтобы создать новую страницу в Shopify, выполните следующие действия:

В панели администратора Shopify перейдите в Интернет-магазин> Страницы и нажмите кнопку Добавить страницу в правом верхнем углу.
Добавьте заголовок страницы Sitemap, но оставьте раздел содержимого пустым
В разделе «Шаблон» в правой части страницы выберите page.sitemap.

Наконец! Ваша страница карты сайта создана, поэтому первое, что вам нужно сделать, это проверить ее. Вы можете сделать это, щелкнув Просмотр страницы.

Похожие посты