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

Создание Shopify HTML-карты сайта

Создание 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.

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