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

Создание Shopify HTML-карты сайта без дополнительных приложений

Вам необходима карта сайта на сервисе Shopify с автоматическим или ручным добавлением разделов, товаров, категорий, постов, страниц? Мы поможем с этим в данной статье.

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

ЧТО ТАКОЕ HTML-КАРТА САЙТА?

Карта сайта HTML позволяет посетителям веб-сайта и поисковым роботам (таким как Google Bot) легко перемещаться по всем страницам веб-сайта на одной странице. По сути, это маркированная текстовая версия навигации по веб-сайту. Текст привязки, отображаемый в карте сайта HTML, ссылается непосредственно на страницу, на которую он ссылается.

ЧТО ТАКОЕ XML-КАРТА САЙТА?

Карты сайта в формате XML очень похожи на карты сайта в формате HTML, поскольку в них перечислены важные страницы веб-сайтов, что позволяет Google (или любому другому сканеру поисковых систем) находить, сканировать и понимать структуру веб-сайта, что играет важную роль в ранжировании обычного поиска. Однако карты сайта XML обычно являются динамическими и извлекаются из стороннего плагина, такого как Yoast SEO WordPress. Эти карты сайта также отправляются в Google Search Console данные для индексации, что позволяет отслеживать технические проблемы веб-сайта. Вы можете найти свою, перейдя на сайт yourstore.com/sitemap.xml.

ЧТО ТАКОЕ КАРТА САЙТА ИЗОБРАЖЕНИЙ?

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

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

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

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

КАК СОЗДАТЬ КАРТУ САЙТА В HTML в Shopify

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

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

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

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

<div class=»row»>
<div class=»col-md-6″>
<div class=»parent-container»>
<h1>Pages</h1>
<div class=»link-container»>
<ul>
{% for link in linklists.sitemap-menu.links %}
<li><a class=»sitemap_link» href=»{{ link.url }}»>{{ link.title }}</a></li>
{% endfor %}
</ul>
</div>
</div></div>

<div class=»col-md-6″>
<div class=»parent-container»>
<h1>Posts</h1>
<div class=»link-container»>
<ul>
{% for article in blogs.news.articles limit:999999 %}
<li><a href=»{{ article.url }}»>{{ article.title }}</a></li>
{%- comment -%}{{ article.excerpt_or_content }}{%- endcomment -%}
{% endfor %}
</ul>
</div>
</div></div>

</div>
{%- comment -%} Start of HTML SiteMap code {%- endcomment -%}
<div class=»row»>
<div class=»col-md-6″>
<h2>Collections</h2>
<ul>
{% for c in collections %}
<li>
<a href=»{{ c.url }}»>{{ c.title }}</a>
</li>
{% endfor %}
</ul>
</div>
<div class=»col-md-6″>
<h2>Products</h2>
<ul>
{% paginate collections.all.products by 1000 %}
{% for product in collections.all.products %}
<li>
<a href=»{{ product.url }}»>{{ product.title }}</a>
</li>
{% endfor %}
{% endpaginate %}

</ul>
</div>
</div>
{%- comment -%}End of HTML SiteMap code{%- endcomment -%}

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

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

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

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

Если вы всё ещё находитесь в поисках платформы для создания онлайн магазина, то Golden Media agency рекомендует вам создать сайт на международной платформе Shopify.

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

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

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

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

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

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

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

Изображение Sitemap
Также существует так называемая карта сайта с изображениями. 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> 
{% 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, выполните следующие действия:

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

<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>

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