КАРТА САИТА SITEMAP ДЛЯ GOOGLE И ЯНДЕКС

Готовый HTML, CSS и JS код требуется перенести на какую-нибудь админку, чтобы для добавления нового контента и расширения функционала не приходилось лезть в директории проекта, создавать там новые файлы, копаться в коде. Это наилучшее решение не только для обычных пользователей, но и разработчика, так как сильно экономит время при расширении готового сайта. Самой популярной админкой является WordPress. Весь готовый код проекта можно перенести на нее и использовать в качестве собственной темы.

Варианты переноса HTML-сайта на WordPress

Перенос HTML-сайта с готовой структурой на WordPress не такая сложная процедура, как может показаться. Есть три варианта действий:

1. Переносить вручную.
   На это придется потратить много времени, плюс, для этого требуются определенные навыки веб-разработки и программирования. Однако так можно лучше разобраться в работе как своего сайта, так и CMS. Доступ к корневой папки с HTML, CSS, JS файлами придется получить через FTP-клиент. В его структуру потребуется добавить несколько PHP-файлов для инициализации темы в WordPress.
2. Приобрести готовую тему.
   Данный вариант можно рассматривать в том случае, если у вас нет разработанной темы. На WordPress можно найти много уже готовых бесплатных тем, а установить их не составит труда даже для пользователя, слабо знакомого с веб-разработкой. Есть также платные темы с премиальным функционалом.
3. Заказать перенос.
   Суть заключается в том, что вы ищите разработчика, который перенесет готовый сайт на WordPress и адаптирует его в качестве темы. Иногда подобные услуги предлагает сам хостинг, на котором размещается сайт.

Пример редактора тем в WordPress

Подробно будет рассмотрен только первый вариант.

Установка WordPress

Вне зависимости от выбранного варианта вам придется изначально выполнить установку WordPress. Если он уже установлен, то пропускайте этот этап. Рассмотрим процесс установки вкратце:

1. Скачайте архив с дистрибутивом WordPress с официального сайта.
2. Распакуйте архив. Пока файлы из него можно вынести куда-нибудь на компьютер.
3. Создайте базу данных MySQL на вашем сервере или запросите к ней доступ, если используете сторонний хостинг. Обратите внимание, что у некоторых тарифов хостинга может не быть поддержки MySQL и PHP. Выбирайте тариф только с их поддержкой.
4. Откройте перечень файлов, которые ранее разархивировали. Переименуйте файл wp-config-sample.php в wp-config.php.
5. Переместите папку с файлами WordPress к себе на сервер в корневую папку сайта.
6. Перейдите в любом браузере по ссылке wp-admin/install.php для доступа к админки вашего сайта. Там вам придется указать имя пользователя и пароль.

Добавление информации для доступа к админ-панели

Перенос готового HTML-шаблона на WordPress

Если вам нужно перенести не только контент сайта, но и его дизайн, то придется создавать тему. Для этого потребуется не только доступ ко всем файлам сайта, но и удобный редактор кода, например VisualStudio Code или другой похожий.

Далее разделим для удобства весь процесс на несколько этапов.

Этап 1: Создание файлов темы

Создайте на компьютере отдельную папку, где будет хранится информация о вашей теме. Эту папку нужно открыть в выбранном для работы редакторе кода. Создавать в ней новые файлы рекомендуется как раз через редактор кода. В Visual Studio Code это можно сделать. Создайте файлы со следующими наименованиями:

• style.css;
• index.php;
• header.php;
• sidebar.php;
• footer.php.

Базовая файловая структура для темы

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

Этап 2: Прописывание стилей

Для начала вам придется отредактировать файл style.css. В него, в самом начале пропишите этот код:

После этого кода вставьте основные стили вашего сайта.
Они должны быть записаны в файлу style.css или main.css, который находится в директории сайта. Просто откройте данный файл и скопируйте все его содержимое. Затем переключитесь на файл style.css, который расположен в корневой папке темы и вставьте туда CSS-код после вводных данных, которые были прописаны ранее.

Этап 3: Перенос HTML-кода

На этом этапе нужно перенести данные из файла index.html в index.php. Ничего страшного, что верстка будет в PHP-файле.
Он умеет корректно обрабатывать HTML. Это необходимо из-за особенностей WordPress, так как HTML-файлы он воспринимает не очень хорошо, поэтому все ключевые элементы сайта желательно прописывать в PHP-файлах, пускай PHP-кода там почти и нет.

Откройте header.php. В него из главного HTML-файла сайта скопируйте отрывок, который отвечает за функционирование меню и всей верхней части сайта. Аналогичную операцию нужно провести для файла sidebar.php, но только скопировать и вставить код боковой панели или панелей. В случае с файлом footer.php нужно скопировать и вставить часть отвечающую за подвал сайта.

Все, что осталось в index.html копируйте в index.php. Не нужно копировать данные о шапке, боковых меню и футере, так как они уже добавлены в отдельный файл.

Этап 4: Инициализация index.php

В качестве завершающего этапа настройки темы нужно провести инициализацию файла index.php. Перед началом основного HTML-кода вставьте строку:

Она необходима для подключения файла header.php. В скобках пропишите путь до объекта. По аналогии пропишите в самом конце HTML-разметки строки для вызова бокового меню и подвала:

В качестве завершающего этапа нужно настроить вывод новых статей и других важных новостей ресурса на главной странице сайта. Код нужно добавить в блок с контентом на главной странице. Сам PHP-код выглядит так:

Теперь осталось только доделать мелкие детали, например, переподключить сторонние файлы, что-то подправить, если верстка в итоге съехала и можно сохранять файл. На этом создание темы для WordPress завершено.

Этап 5: Добавление темы в WordPress

Созданную тему осталось только загрузить в админку сайта и применить. Папку с новой темой нужно переместить по пути: /wp-content/themes/. Начальная часть адреса может отличаться в зависимости от хостинга, сервера и самой структуры сайта.

Теперь останется только выбрать загруженную тему в панели управления:

2. Переключитесь во вкладку “Внешний вид” в левом меню.

3. В новом окне воспользуйтесь кнопкой “Добавить новую” и выберите свою тему среди доступных. Если вы ее загрузили на хостинг, то она должна там быть.

Переход к разделу с темами

4. Или загрузите тему, воспользовавшись кнопкой “Загрузить тему”.

Загрузка готовой темы через WordPress

Все, что вам остается делать дальше — заполнять сайт контентом и расширять его функционал с помощью сторонних плагинов.

Заключение

Преобразовать готовую верстку в полноценный HTML-шаблон несложно
, но важно потом проверить код и саму тему на корректность работы. Наиболее “уязвимыми” местами являются адреса для привязки файлов, так как они могут быть изменены при преобразовании верстки в полноценную тему, следовательно, разработчику придется менять адреса на корректные. Также из-за добавления постороннего кода в index-файл некоторые элементы на сайте могут съехать или отображаться некорректно. Это тоже придется исправить после создания темы, правда, процесс исправления не должен занять много времени.

Инструкция по созданию карты сайта для разных движков.

О карте сайта писали много, и мы тоже
. В блоге компании Serpstat недавно появился хороший материал о том, как ее создать на разных движках. Приводим текст полностью.

Карта сайта в формате XML — путеводитель по веб-ресурсу для поисковых роботов и иногда для пользователей. Для пользователей рекомендуется делать карту сайта в формате HTML, но я не знаю ни одного человека, который хоть раз воспользовался бы ею за последние 5 лет.

Google и Яндекс рекомендуют для хорошей индексации иметь на сайте оба варианта сайтмапа. Но если вы не ортодоксальный перфекционист, созданием HTML-карты можно пожертвовать в угоду хорошо продуманной навигации по сайту. А вот жертвовать созданием и настройкой Sitemap XML не стоит, даже если ваш сайт пока что состоит из 10-20 страниц.

Почему карта сайта в формате XML так важна?

При отсутствии карты поисковикам приходится самостоятельно:

• искать недавно появившиеся страницы на вашем сайте;
• находить изменения на старых страницах вашего web-ресурса;
• определять, какие страницы проиндексировать приоритетно, а какие — нет;
• назначать периодичность индексации страниц.

Все это для поисковых краулеров достаточно «напряжно» (думаю, «напряга» им хватает с количеством сайтов в интернете, которое сегодня уже исчисляется миллиардами). Поэтому без четких инструкций они делают это «спустя рукава».

Что происходит, когда на сайте нет сайтмапа?

А происходит примерно следующее:

«Сайтмапа нет, но вы держитесь,» — видят поисковые боты и благополучно уходят, проиндексировав наобум пару-тройку страниц сайта и забив на все остальное.

Чтобы этого не происходило, есть несколько удобных способов создать карту сайта.

Сервисы для создания Sitemap XML

Существует много онлайн-сервисов и программ для создания файла Sitemap. Однако у таких сервисов есть недостатки, которые могут свести все старания к нулю:

• У большинства таких сервисов есть ограничение по добавлению URL-ов — например, MySitemapGenerator позволяет бесплатно сгенерировать файл всего на 500 страниц, за последующие страницы придется доплачивать в долларах, и так при каждом использовании.
• Cозданная карта не будет динамической — то есть каждый раз при добавлении новых материалов/товаров/статей на сайт придется ее переделывать.

Собственно, второй пункт смущает больше первого — какой смысл делать карту для ежедневно обновляемого блога или активно растущего интернет-магазина, если придется регулярно ее переделывать и перезакачивать на сервер?

Мы уже давно не задаемся таким вопросом, потому что работаем преимущественно с тремя CMS: WordPress (для сайтов услуг, информационных порталов, сайтов компаний), OpenCart и 1С-Битрикс (для интернет-магазинов и масштабных корпоративных сайтов). А у этих систем, к счастью программистов (которым не нужно ничего делать) и восторгу оптимизаторов, есть встроенные средства для того, чтобы сделать карту сайта своими руками.

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

Общие правила составления XML-карты сайта

1. Должна быть доступна по адресу site.com/sitemap.xml, где site.com — ваш домен. Если у вас карта сайта генерируется с другим URL-ом, ничего военного здесь нет — просто поставьте 301 редирект с site.com/sitemap.xml на тот адрес Sitemap, по которому она открывается корректно.

2. Должна выглядеть перечнем ссылок сайта

3. Не должна конфликтовать с файлом robots.txt. И под словом «конфликтовать» я подразумеваю «не запутывайте поискового робота»: если вы какие-то страницы закрываете от индексации в robots.txt, то и в карте сайта их быть не должно.

4. В файле Sitemap XML должно содержаться не более 50 тысяч ссылок. Если ссылок больше, есть три варианта решения вопроса:

разбить карту на несколько частей (например, по типам страниц или таксономиям);

сжать карту сайта архиватором, чтобы у нее появилось расширение .gz;

проанализировать, какие типы страниц вам не нужны в сайтмапе и удалить их (на случай, если в вашу карту попадают служебные страницы или URL-ы, автоматически генерируемые фильтрами и сортировкой).

5. По объему карта должна «весить» не более 10 МБайт. В противном случае прибегаем к тем методам, что и в предыдущем пункте.

6. В сайтмапе не должно быть 404 ошибок и тестовых страниц. Если удаляли что-то с сайта или проводили эксперименты — следите за тем, чтобы этот мусор не попадал в файл.

Как сделать карту сайта средствами CMS?

Для каждой CMS можно подобрать свои сервисы.

Инструкция для WordPress

К Вордпрессу я отношусь с особенной любовью, потому что в этой CMS можно сделать 90% сеошной работы, не прибегая к услугам программиста. В том числе и настроить карту сайта.

1. Устанавливаем плагин Yoast SEO

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

2. Переходим в раздел «XML-карта сайта» и настраиваем генерацию сайтмапа

В админке в появившихся после активации плагина SEO-настройках выбираем XML-карту сайта:

1) Выставляем максимальное количество URL-ов, добавленных в одну карту (по умолчанию их 1000, но можно поставить больше, до 50 000):

2) Иключаем из карты ненужные типы страниц и таксономии (к примеру, если вы не хотите, чтоб индексировались страницы тегов или медиафайлов):

3. Нажимаем кнопку «Включено»:

Вуаля! Карта сайта на WordPress готова.

• плагин по умолчанию распределяет URL-ы в три разные папки по типам страниц — Yoast смотрит в будущее уверенным взглядом и верит, что ваш сайт разрастается до неприличных размеров, и одного сайтмапа вам будет мало:
• карта сайта генерируется в человекопонятном виде — выглядит вот так

То есть если оптимизатору или контент-менеджеру нужно по каким-то причинам выгрузить все публикации сайта, он легко может это сделать с помощью Sitemap XML, сгенерированную в Yoast. При этом поисковому боту такой формат тоже вполне понятен.

В плагине нет возможности настроить периодичность и приоритет индексации. Если вам нужны эти детали (например, когда количество страниц сайта исчисляется в десятках тысяч и они очень объемные), стоит обратиться к программисту за помощью. Но по опыту могу сказать, что роботы Google- и Яндекс-боты с аппетитом «кушают» и такой сайтмап тоже. Главное здесь — его наличие.

Инструкция для OpenCart

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

Sitemap XML в OpenCart тоже сделать довольно просто. В этом нам помогает модуль Google Sitemap.

1. Проверяем наличие модуля Google Sitemap в админке сайта

2. Активируем и настраиваем Google Sitemap

Напротив названия модуля жмем «Активировать» (если он неактивен), и далее — «Редактировать»:

В открывшемся окне выбираем «Включено» и сохраняем изменения:

Что удобно: почти ничего не нужно делать, сайтмап настраивается в 3-4 клика.

1. U RL, который вы видите на скрине выше — это и есть адрес, по которому карта сайта будет доступна. Он мало подходит под описание «ЧПУ», чем справедливо смущает многих сеошников. Тут есть два варианта решения вопроса:

• попросить программиста настроить отображение карты по более красивому URL-у site.com/sitemap.xml, попутно вызвав его фирменное закатывание глаз);

• закрыть на это свои глаза и настроить редирект с site.com/sitemap.xml на этот несимпатичный, но в целом вполне приемлемый адрес (в отличие от карты, генерируемой плагином Yoast SEO в WordPress, здесь не добавляется автоматический редирект).

2. Проконтролируйте, чтоб в карту сайта не попадали дубликаты страницы (помните, я писала про «напряг» для краулеров?). Самое лучшее — проследить за тем, чтобы CMS не генерировала дубли страниц, еще на этапе создания сайта. Этот вопрос, в свою очередь, можно решить редиректами либо атрибутом canonical, но это уже совсем другая история.

Инструкция для 1С-Битрикс

Сразу приведу сравнение для понимания: если OpenCart — это качественный минивен эконом-класса, то 1С-Битрикс — это небольшой авианосец. Или большой авианосец. В такой машине для внедрения даже базовых моментов технической оптимизации очень сложно обойтись без программиста.

При этом карту сайта на 1С-Битрикс создать не так уж сложно. Труднее настроить ее корректную работу.

1. В админке заходим в раздел Маркетинг и нажимаем «Настройка sitemap.xml».

2. настраиваем карту сайта для 1С-Битрикс.

Если карты нет — нажимаем зеленую кнопку «Добавить», если есть — правой кнопкой мыши напротив названия карты кликаем на три полоски и выбираем «Редактировать»:

1) В «Настройках» указываем защищенный протокол, если он есть, вписываем корректный адрес карты и ставим галочку для добавления ссылки на карту сайта в файл robots.txt.

2) Во вкладках «Файлы», «Инфоблоки» и «Форумы» ставим галочки напротив тех типов страниц, которые должны быть в сайтмапе, и убираем напротив тех, которые не должны там присутствовать;

3. Жмем кнопку «Сохранить и запустить».

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

Даже когда все настройки внесены корректно:

• дочерние карты сайта могут дублироваться между собой, заставляя ботов индексировать одно и то же несколько раз подряд;

• в сайтмап часто попадают дефолтные страницы сайта, даже если сам сайт был создан за царя Гороха;

• некоторые страницы просто не добавляются автоматически в карту по неизвестным причинам (даже прогеры в таких случаях начинают говорить об ауре и флюидах).

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

После успешного создания карты сайта

Когда все круги этапы настройки и генерации Sitemap XML пройдены, важно не забыть сделать две вещи.

1. Добавьте ссылку на файл сайтмапа в файл robots.txt. Выглядит это так:

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

2. Добавьте карту сайта в панели Google Search Console и Яндекс Вебмастер:

На этапе добавления предлагается протестировать карту сайта — я рекомендую это сделать. Это самый быстрый способ понять, правильно ли составлен файл. Еще один способ это сделать — проверить ее валидатором, например, XML Sitemaps.

Вместо заключения

Не думайте, что если сделали карту сайта один раз, она будет служить вам веки вечные. Регулярно проверяйте доступность URL-а в адресной строке и заглядывайте в панели вебмастеров.

Быстрой вам индексации и высоких позиций!

Источник —
блог компании Serpstat

Установка шаблона на Вордпресс – это один из самых первых шагов во время создания собственного ресурса. Новичкам этот этап может показаться сложным. Порой люди уже купившие шаблон и заказавшие хотсинг, не знают куда добавлять тему, и отказываются от затеи создать личный сайт. Но стоит во всем разобраться, как становится понятно – настроить тему не так сложно.

Гораздо труднее предварительно выбрать ее. Ведь от шаблона, который будет украшать ваши страницы, многое зависит.

Первое впечатление от ресурса может либо превратить посетителя в «постоянника», либо отпугнуть его навсегда. И чтобы не играть в лотерею с судьбой вашей площадки, не спешите с выбором первой темы оформления.

Заранее подготовьтесь: подумайте о чем будет сайт, какой план написания статей, и какой стиль подойдет для этой тематики. Только после этого отправляйтесь в каталог с готовыми темами, и выбирайте подходящую для ваших потребностей.

2 способа как добавить шаблон в Вордпресс

Первый способ. Для начала вам необходимо загрузить выбранный вами шаблон страницы. Учтите, что он должен быть в формате zip. Иногда на сайтах размещают темы в формате rar. Не переживайте, если вы скачали такой файл – разархивируйте его, и заново запакуйте, только уже в zip-архив. Следующий шаг – авторизация в административной панели Вордпресс. Чтобы настроить тему, найдите вкладку «Дизайн» (или «Внешний вид») в левой части «админки». В этом разделе вы обнаружите несколько пунктов, среди которых будет фраза со словом «Установить». Выбираем ее, и переходим на страницу установки шаблона.

Жмем на загрузку темы. Вордпресс потребует от вас файл формата zip. А поскольку вы уже его подготовили, то нажимайте «Установить тему формата zip». Далее через «Обзор» находите расположение файла на компьютере, и нажимаете «Загрузить» (или «Открыть»). Далее жмем «Установить». После того, как произошла установка шаблона WordPress, вы можете посмотреть, как преобразился ваш сайт.

Второй способ. Установка темы WordPress этим методом куда сложнее и неудобнее, чем предыдущий способ, так как еще нужно будет зайти на хостинг. Если вы не любите копаться в папках, и вообще лишний раз открывать хостинг, тогда постарайтесь обойтись первым вариантом установки шаблона страницы. Единственное преимущество этого способа – тему не нужно переводить в формат zip-архива.

Суть второго варианта настройки шаблона страницы в том, что вам необходимо предварительно загрузить тему на хостинг. Для этого заходите на свой сервер, и авторизуетесь. Далее разархивируете шаблон (навряд ли, вы скачали уже разархивированную тему). Потом нужно влезть в хостинг в раздел с директориями сайта. Найдите папку «wp-content». В ней должна быть директория с темами, обычно называется «themes». Загрузите папку с файлами шаблона страницы в эту директорию. А потом возвращайтесь в «админку» Вордпресс, и активируйте загруженный шаблон через соответственный раздел.

У каждого свой метод активации темы страницы. Кому-то проще зайти на хостинг, другие не любят работать с директориями на сервере, и предпочитают сразу добавить тему в движок Вордпресс. Со временем и вы поймете, как установить шаблон WordPress быстрее всего. А теперь разберем следующий не менее важный момент – настройка html темы под Вордпресс.

Как натянуть html тему на Вордпресс

Такое тоже случается. Порой у вебмастера есть готовый макет сайта, который он уже хочет загружать на хостинг. Но дело в том, что «голый» html не будет работать с движком Worpdress. Необходимо ввести некоторые корректировки в html макет, прежде чем пытаться его интегрировать. И в первую очередь – это создание php-разделов, которые необходимы, чтобы объединить html шаблон с административной панелью движка. Для этого вам предстоит постепенно редактировать каждый важный файл макета, добавляя коды операций Вордпресса.

Начать можете с изменения файла «style.css». Именно с этого файла движок начнет идентификацию вашей темы html. Вам необходимо добавить информацию о шаблоне в начале кода, а именно:

1. Theme Name.
2. Theme URL.
3. Description.
4. Author.
5. Author URL.

Далее вам необходимо создать файл «header.php». Он будет состоять из фрагментов кода страницы «index», которая является основой html шаблона страницы. « Header» отвечает за вывод шапки на главной. Вам предстоит скопировать весь кусок кода, который в html был предназначен для определения стиля верхней части сайта – это параметры Title, информация о примененном стиле (раздел кода «link»), и все, что между тегами

По аналогии с «header» создается и файл «index.php». Он будет ответственен за контент, который отображается на главной странице сайта. Чтобы его создать, необходимо скопировать часть html файла «index» и слегка подкорректировать ее. Необходимо будет добавить разметку php, чтобы Вордпресс воспринимал этот код как команды. То же самое касается касается и других функций движка – вам предстоит настроить сайдбар (sidebar.php), отображение архивных записей на главной странице (archive.php), поиск по сайту через главную (Search.php), параметры вывода одиночного поста (Single.php) и одиночной страницы (Page.php), вывод комментариев (Comments.php) и другие функции.

Как управлять установленным шаблоном

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

1. Через административную панель можно вручную настроить тему при помощи изменения кода. Движок предоставит вам для этого редактор с кодом, уже поделенным на функциональные части.
2. Настройка при помощи файлового менеджера через хостинг.
3. Редактирование через ftp-клиент.
4. Любительская настройка через «админку» в разделе «Внешний вид» — «Настроить». Этот способ идеально подойдет для новичка.

Чтобы сделать свой сайт на WordPress, вам обязательно нужно будет добавить тему. Их еще называют шаблонами. Это основа любого веб-ресурса.

В данной статье будут рассмотрены этапы создания шаблона, описана верстка файлов psd.

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

Учтите, что данное руководство не включает описания добавления уже готовой темы — это мануал по генерации собственного шаблона. Если вы скачали тему и не знаете как ее установить, тогда зайдите в админку WordPress, в раздел «Внешний вид» и добавьте там одно из доступных оформлений. А теперь разберем подробнее что такое тема, для чего она нужна и как ее создать самостоятельно.

Для каких целей создается тема вручную

Когда вы покупаете оформление или скачиваете его из каталога бесплатных шаблонов WordPress, вы обычно жертвуете качеством. Как правило, у таких шаблонов не все подходит для вас. Но вы смиряетесь, думаю, что один-два нюанса — это еще не целая картина, и что позже вы отредактируете тему. Но на деле оказывается, что сайт так и остается с недоделанной темой, которая вам не нравится. Потому лучше сразу делать свое. И хоть верстка сначала может показаться сложной, зато потом, когда научитесь, сможете даже создавать шаблоны под заказ.

Кроме того, после создания шаблона вы ощутите себя «медиком» WordPress — будете знать, что у сайта находится внутри. Поймете, какие элементы за что отвечают. Тогда сайт и вы будете разговаривать на Ты. Ознакомитесь с тегами, структурой и циклами WordPress. А быть может, вам захочется заняться этим профессионально, и вы начнете зарабатывать на жизнь созданием шаблонов.

Итак, вот основные причины, почему вам стоит самостоятельно сделать шаблон для сайта:

• узнаете все о HTML, CSS и кое-что о PHP;
• сможете творить, ведь веб-дизайн — это тоже искусство;
• можно будет зарабатывать на продаже тем;
• откроете для себя новый навык;
• создадите оформление, которое 100 % будет подходить под ваш будущий сайт.

Каким стандартам отвечает тема

При написании шаблона очень важно следовать официальным правилам. Нарушение кода, вставка тега в неположенном месте и пропуск его — это может навредить оформлению и полностью испортить его вид. Вам следует хорошо ознакомиться с правилами написания PHP-код, а также HTML, если вы еще не знакомы с этими языками. Кроме того, вам предстоит иметь дело с каскадными таблицами стилей CSS, так что вспомните и их основы — в Интернете много информации по этому поводу. Ну, и самое последнее наименее важное требование — создавайте сайт, как дизайнер, а не как школьник, чтобы у вас получился серьезный проект. Иначе нет смысла браться за это дело.

Все темы WordPress содержатся на хостинге в папке wp-content/themes/. Внутри этой папки есть другие папки с отдельными темами, файл с дополнительными функциями (functions.php), стилевые файлы и изображения. Чтобы найти данные по отдельной теме, вам необходимо зайти в соответственную директорию. Так тема «Vestern» будет размещена в папке wp-content/themes/vestern/.

Прежде чем начать, вам следует хотя бы несколько раз взглянуть на структуру уже готовых тем. Сайт WordPress по умолчанию содержит два стандартных шаблона, которые вы можете просмотреть. Это шаблон Default и Classic. Откройте их файлы в нужной директории на сервере и сравняйте их отличия.

Вы заметите, что шаблон, как правило, состоит из файлов трех форматов:

1. Style.css — стилевой файл, ответственный за внешнее оформление сайта.
2. Functions.php — функциональный файл, добавляющий на страницы различные возможности.
3. Другие php-файлы, которые отвечают за особенности вывода шаблона на сайте, интеграцию темы с WordPress. Именно эти файлы позволяют перевести psd макет в полноценный шаблон.

Разберем каждый их этих файлов детальнее, чтобы понять как проходит верстка темы WordPress.

Правила создания файла style. css

Во-первых, он должен отвечать всем особенностям разметки CSS. От этого файла зависит то, как будет выглядеть ваш сайт. Но он не заработает, если вы не добавите в него описание созданного шаблона. Эта первая особенность WordPress, которую необходимо учитывать при переносе макета psd на движок Вордпресс. Вам предстоит указать следующие параметры:

1. Имя шаблона.
2. URL, который ведет к теме.
3. Описание с указанием основных особенностей шаблона. Кратко.
4. Имя автора. В данном случае укажите свое имя.
5. Ссылка на автора, то есть на вас. Можете указать ссылку на профиль в социальных сетях.
6. Название родительской темы — это указывать необязательно.
7. Версия темы. Если только создали, тогда v. 1.0.
8. Полное описание шаблона. Можно писать развернуто.

Чтобы создать самую простую тему WordPress, достаточно добавить редактированную версию с одним файлом style.css. В этом файле возле строки «template» укажите имя родительской темы. К примеру, Classic, если вы редактируете стандартный шаблон. Теперь созданная тема будет полностью соответствовать шаблону Classic. Потому файлы вам нужно будет загружать именно в директорию wp-content/themes/classic.

Таким образом, вы сможете создать свою первую, самую простую тему, которая будет являться «потомком» уже готового шаблона. Но это не будет полноценным оформлением сайта, а лишь попыткой сверстать его, потому вам стоит продолжить исследования.

Особенности файла дополнительного функционала functions. php

Шаблоны не всегда используют файл functions.php, но в большинстве случае он необходим. Его необходимо размещать в директории с соответственной темой. Учтите, что если этот файл имеется в папке с шаблоном, то он будет учитываться при инициализации темы. Он работает как плагин. И будет выполнять такие функции, какими вы его наделите.

Особенности php файлов шаблона

Файлы формата php будут отвечать за отдельные части сайта. Они определяют как составляющие страницы, так и рубрики, категории и другие разделы, которые будут выводиться перед пользователем.

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

Если хотите добавить на сайт минимальную тему, или испытать свой psd макет, тогда вам понадобится только два файла в директории шаблона:

1. Style.css.
2. Index.php.

Опытные вебмастера умудряются так изменять файл index.php, что только его достаточно для того, чтобы внести настройки футера, сайдбара, поиска, архива, рубрик, страниц и т. д. Но вам лучше попробовать сделать такой шаблон WordPress, в котором каждый файл будет выполнять соответственную функцию.

• header.php — отвечает за шапку сайта;
• sidebar.php — боковые колонки;
• footer.php — подвал ресурса (его нижняя часть);
• comments.php и comments-popup.php — комментарии.

После генерации каждого из этих файлов, чтобы сайт начал их отображать, вам необходимо внести данные по ним в главный файл шаблона index.php. Для этого укажите в index.php теги, которые ведут к названным файлам. Например:

• чтобы добавить файл шапки сайта (header.php) пропишите тегget_header () tamplate tag;
• для футера аналогично, только вместо header укажите footer и т. д.

Пример включения одного из файлов шаблона в index.php будет выглядеть следующим образом: . Вам придется искать по каждому из указанных ключевых файлов шаблона отдельную информацию. Найдите мануалы по каждому из файлов, а также образцы, чтобы вы понимали все функции, прописанные в шаблонах.

Выбор функционала шаблона

Со временем вы столкнетесь с дилеммой — какой тип шаблона выбрать. Движок предоставляет выбор. Либо вы сможете выбрать шаблон с подключенной иерархией Template Hierarchy, либо макет с тегами Conditional Tags.

Первый вариант уже был рассмотрен. Все файлы php шаблона — это и есть иерархия Template Hierarchy. То есть следуя правилам этой иерархии, вы постепенно генерируете отдельные файлы макета. Таким образом, у вас создастся полноценный шаблон из ряда функциональных php-составляющих. Иерархия в этом случае работает по принципу загрузки по запросу. К примеру, если у вас есть файл категорий (category.php) и пользователь запросил его, то в браузере загрузится именно эта составляющая сайта. Если же его нет, тогда будет загружен ключевой файл шаблона index.php.

Таким образом, вы сможете изменять внешний вид для отдельных частей сайта при помощи принципа Template Hierarchy. У каждой страницы есть свой определенный ID. Добавьте в директорию с темой файл category-6.php и при запросе рубрики с ID, равным 6, откроется именно это оформление. Если же его не будет, то настройки останутся стандартными — развернется index.php.

Порой принципа Template Hierarchy оказывается недостаточно, чтобы обеспечить максимально комфортное отображение шаблона. В таком случае программисты прибегают к использованию второго принципа — они вводят условные теги Conditional Tags. Эти теги проверяют сайта на соблюдение определенных условий, и если таковые не соблюдаются, они изменяют его внешний вид. То есть эти теги работают по принципу if/else (если/тогда). Так вам не придется добавлять море файлов php с номером каждой категории, а сможете единожды прописать условия для каждого ID.

Как происходит верстка psd макета в Вордпрессе

Некоторые любят прежде создать макет будущего дизайна при помощи различных программ, и только потом его переносить на определенный движок. Это и правда удобно, ведь некоторые приложения позволяют без каких-либо умений сгенерировать отличный дизайн. Если у вас уже есть файл формата psd, и вы хотите его сверстать под движок Вордпресс без использования кода, тогда можете воспользоваться помощью одного из популярных сервисов.

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

PSD — это файл из приложения Photoshop. Это как бы графическое изображение вашего дизайна. Чтобы его сверстать, необходимо в текстовом редакторе добавить html-разметку. Постепенно вы будете изменять каждый из пунктов этой разметки, добиваясь конечного результата, который изображен на макете. Сразу укажите центрирование вашего шаблона, а также размеры разных его частей.

Следующий шаг — это добавление фоновых изображений. Вы также их можете сделать самостоятельно при помощи того самого приложения Photoshop. Самый простой вариант — это создание градиентных фоновых изображений. Далее займитесь создание логотипа. Постепенно решайте все возникшие запросы — регулируйте шапку сайта, подвал, сайдбар и все его части, согласно сделанному макету. Не забудьте добавить важные файлы шаблона в его директорию, чтобы сайт загружался согласно вашим требованиям.

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

10 июня 2018, 11:08

Alex

Как бы сильно не казалось, что адаптация HTML под WP это что-то страшное и сложное, мы будем создавать тему на WordPress за 10 минут
.
На самом деле всё очень даже легко и никаких магических способностей в этом деле не потребуется.

Заходим в админ. панель WordPress

Заходим в раздел «Плагины» ➜ «Добавить новый» ➜ Находим плагин «Unyson»
➜ Жмем кнопку «Установить» ➜ Активируем плагин.
Он нам пригодится в первую очередь для создания страницы настроек нашего шаблона, чтобы админ сайта мог выбрать логотип, название сайта и т.д.

Дальше временно перенесемся на локалку, просто потому, что так быстрее. Заходим в папку wp-content
➜ themes
и создаем папку с названием нашей новой темы «truestory»

Копируем в новоиспеченную директорию файлы своего шаблона и создаем дополнительно файлы header.php
и footer.php
. Теперь пора вдохнуть жизнь, ну или динамику в нашу тему.

Открываем файл header.php
в стандартной теме WordPress ➜ «twentyfifteen»
и смотрим, как там всё устроено. Правим по аналогии файл header.php
из нашей темы,
копируем в неё стандартные php вставки
, вплоть до вставок wp_head
и body_class
. Пути к стилям тоже не забываем подправить.
Что касается картинки логотипа, то её путь мы сейчас не можем вывести динамично, так как у нас ещё нет таких настроек в админке WP. Давайте исправим эту ситуацию прямо сейчас.

В корне нашей темы создаем папку framework-customizations
в ней подпапку theme
, а в ней ещё одну подпапку options
.
Уже в папке options создаем файлик settings.php
. Вписываем в этот файл вот такой php код:

  if( !defined('FM') ) die('Silence is golden');

$options = array(
 'logo_image' => array(
 'type' => 'upload',
 'label' => __('Logo','truestory'),
 'images_only' => true
 )
);

  /*
Theme Name: True Story
*/

Переходим в админку WP и активируем нашу новую тему. Выбираем пункт «Внешний вид» ➜ «Темы» ➜ Активировать».
После этого в разделе «Внешний вид» появится пункт «Настройки темы»
. Теперь туда можно загружать логотип.

В файле header.php
можно вывести логотип вот таким образом:

  echo fw_get_db_settings_option('logo-image')['url'];

Создаем в корневой директории темы файлик functions.php
и регистрируем наше меню. Заодно пропишем поддержку картинок у статей.
Пропишем ширину и высоту постов, которые должны сохраняться при добавлении новой темы.

  register_nav_menus(array(
	'primary' => __('Primary Menu', 'truestory')
));

add_theme_support('post-thumbnails');
set_post_thumbnail_size(360, 500, true);

Открываем файл sidebar.php
из темы «twentyfifteen»
и копируем вывод меню для нашей шапки. На этом с ней будет покончено.

  wp_nav_menu( array(
	'theme_location' => 'social',
	'depth'			 => 1,
	'link_before'	 => '    ',
	'link_after' 	 => '    
',
) );

Смотрим, как реализован index.php
у шаблона «twentyfifteen» и повторяем аналогичную реализацию index.php для нашего шаблона.

Выносим структуру статей в файл content.php
и адаптируем его точно таким же образом, как в это сделано в теме «twentyfifteen».
Некоторых моментов, например, категории или даты публикации статьи «twentyfifteen» не имеет
, поэтому копируйте код ниже.

Вывод списка категорий на WordPress:

  echo '';

Вывод даты публикации на WordPress:

  the_date();

Сохраняем работу и идём в админку. Добавляем парочку пунктов меню и 2-3 статейки, чтобы посмотреть, что у нас получилось уже на реальных данных.
При этом всём мы уже почти закончили со всей темой. Она уже выводит статьи, уже позволяет ставить плагины и может похвастаться настройкой логотипа в шапке из админки, а также своим меню.
Осталось совсем немного, а именно подрубить footer
и сделать страницу просмотра всей статьи
.

В файл footer.php
переносим закрывающий тег body
из index.php. Адаптируем footer само собой по аналогии с «twentyfifteen». Не забудем прописать в конце файла index.php функцию:

  get_footer();

Создаем файл single.php
для страницы самой статьи и адаптируем его, таким образом, как и все прошлые.

На этом всё! У нас получилась готовая тема. Точно таким же образом делают огромные и многофункциональные темы для WordPress, которые потом продают.

---

Для наглядности посмотрите видео версию урока от «Хауди Хо»

 

Заказать натяжку сайта на WordPress

 

---

Поделиться с друзьями

---

Разберемся, как составить Карту сайта, из чего она состоит, какие требования к Sitemap у поисковиков. Обновленный материал.

Sitemap или Карта сайта – специально созданный файл с перечнем страниц ресурса, которые необходимо проиндексировать.

Зачем нужен файл Sitemap

Существует два вида Карты сайта, которые различаются форматами и назначением:

HTML-карта

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

XML-карта

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

В этом материале разберем создание XML-карты
.

Для чего нужна Карта сайта:

1. Ускорить процесс полной индексации
   .
   Поисковые роботы Google могут пропустить недавно созданные или измененные страницы, а Карта поможет в них ориентироваться.
2. Ускорить переклейку.

   Сам Google при редиректе страниц  советует
   сгенерировать XML-карту сайта со старыми URL и отправить ее в консоль Google. Например, так стоит сделать при переезде на https. Это поможет быстро переклеить URL на новые.

3. Повысить вероятность признания страницы канонической.

   Наличие адреса страницы в XML-карте увеличивает шанс, что среди дублей бот признает именно эту страницу каноничной, то есть первоисточником.

4. Дать дополнительную информацию.

   В Карте указывают дополнительные рекомендации для робота: делают пометки о важности страницы, частоте и дате обновления.

5. Отобразить количество проиндексированных URL

   Сигналы из Sitemap нужны в том числе для отображения проиндексированных ссылок в Search Console.

6. Ускорить процесс пакетной деиндексации.

   Для этого создают временный файл Sitemap, в который включают страницы для удаления. Об этом рассказал Джон Мюллер
   , он рекомендует обязательно указать дату последнего изменения страниц, когда им был присвоен код ошибки 404 или атрибут noindex. Так Google будет знать, что необходимо заново просканировать содержимое сайта. Через несколько месяцев эту временную карту сайта можно будет убрать.

При этом даже если Google найдет ссылку в Sitemap, но ее не будет в навигации, он не придаст ей веса и не проиндексирует. Ссылки в Карте сайта — это рекомендации, важнее всего составить грамотную структуру сайта, в которой поисковый робот найдет все нужные страницы.

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

Как проверить, в индексе ли страница сайта

Карта обязательно нужна сайтам с такими признаками:

• Проект создан недавно, у него мало внешних ссылок. В этом случае поисковому боту сложнее найти сайт.
• В структуре сайта много архивов веб-документов, не связанных между собой.
• У проекта большое количество страниц, разделов и подразделов;
• В структуре преобладают динамические страницы.
• На сайте есть мультимедийный контент. Бот сможет получить дополнительную информацию из Sitemap для показа в результатах поиска.

Поисковые системы могут не проиндексировать все нужные страницы таких сайтов, если не предложить краулерам файл Sitemap. Разберем, как его создать.

Базовые критерии создания файла Sitemap

У поисковиков есть свои требования к составлению Карты сайта, о которых нужно помнить веб-мастеру.

Общие требования к Sitemap:

1. Количество URL-адресов в файле Sitemap не должно превышать 50 тысяч. Если их больше, необходимо создать несколько отдельных Карт сайта, которые прописывают в файле индекса Sitemap. По словам официального представителя Google
   , для этого достаточно создать несколько отдельных файлов Sitemap, не больше 50 тысяч ссылок каждая, а в сумме ссылок может быть больше лимита. После этого для нескольких Карт создают общий материнский файл Sitemap.
2. Максимальный размер файла – 50 Мб. Файл можно уменьшить при помощи сжатия gzip
   
   , но в несжатом виде он все равно должен быть меньше 50 Мб.
3. Файл Sitemap должен находиться на том же домене, что и веб-сайт, для которого он создан.
4. Можно использовать кодировку UTF-8, а также латинские буквы и цифры.
5. Ответом сервера
   на обращение к файлу Sitemap должен быть HTTP-статус с кодом 200 OK.
6. URL идентификаторы сессий не должны быть в Карте сайта.
7. Ссылки должны иметь одинаковый синтаксис.
8. В Карте указаны только канонические URL.
9. Карта не конфликтует с информацией в robots.txt — если в robots.txt какие-то страницы закрыты от индексации, то их не должно быть в Карте.

Допустимые форматы Карты сайта

Особое требование предъявляется к формату файла Sitemap. Карту сайта можно создать в виде XML-файла, текстового файла или посредством RSS, mRSS и Atom 1.0. Яндекс указывает, что поиск не поддерживает передачу RSS и Atom-фидов с помощью Sitemap. Если ориентируетесь на разные поисковые системы, используйте формат XML. Правила создания файла описаны в стандарте.

Служебные теги Sitemap

Обязательные теги Карты сайта:

• — контейнер с указанием стандарта протокола;
• — родительский тег для каждой записи URL-адреса;
• — указание URL, начинается с префикса, к примеру, http или https.
• — частота обновления веб-документа с атрибутами never, always, yearly, monthly и так далее;
• — дата последнего обновления на странице;
• — указание разной важности страниц ресурса от 0,1 до 1, определяет очередность обработки URL на этом сайте. Google его не поддерживает. Приоритет можно дать самым важным страницам и нет смысла указывать высокий приоритет всем ссылкам, тогда тег вообще ни на что не повлияет.

Пример Карты сайта в формате XML

Sitemap для PR-CY.ru, если бы он состоял из одной страницы и содержал упомянутые теги, мог бы выглядеть так:

  
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.pr-cy.ru/</loc>
<lastmod>2016-03-21</lastmod>
<changefreq>daily</changefreq>
<priority>0.8</priority>
</url>
</urlset>

Как создать и где разместить файл Sitemap?

При желании составить Карту сайта можно вручную, но это слишком трудозатратно и бессмысленно — Карта сайта должна быть динамической, если вы регулярно обновляете сайт — публикуете новые записи в блоге, развиваете интернет-магазин. Лучше создавать файл Sitemap автоматически, обратившись к услугам бесплатных онлайн-сервисов и плагинов для CMS.

Сервисы для создания Sitemap

CMS-плагины для создания Sitemap

WordPress:
Xml Sitemap Generator, SEO Plugin Rank Math, YOAST SEO, All in One SEO Pack.

Joomla:

1С-Битрикс:
в админпанели в разделе «Маркетинг» есть «Настройка sitemap.xml».

После того, как Карта сайта готова, файл необходимо определить в корневую директорию. В этом случае ссылка, указывающая поисковым системам путь к файлу Sitemap, может выглядеть так: http://www.pr-cy.ru/sitemap.xml

Добавление Карты сайта в поисковые системы

Чтобы о новом файле Sitemap быстрее узнали поисковые роботы, веб-мастеру необходимо внести изменения в файл robots.txt, прописав в нем особую директиву, указывающую точный маршрут к Карте сайта:

  Sitemap: http://www.pr-cy.ru/sitemap.xml

Готовый файл Sitemap нужно проверить на ошибки и добавить в Яндекс или Google при помощи Яндекс. Вебмастера
или Google Search Console.

Как удалить старую Карту сайта

При реорганизации контента и создании новых Sitemap нужно удалить старую Карту сайта. ​ В панели Вебмастера Google нет такой функции, но сотрудник Google Джон Мюллер советует
присвоить ссылке на файл ошибку 404. Если ссылка на Sitemap XML отдает код ошибки 404, то со временем поисковик автоматически перестанет учитывать этот файл.

---

• Наличие у сайта правильно составленной Карты — не гарантия того, что поисковик проиндексирует все страницы. Sitemap — подсказка для поисковых ботов о том, как лучше сканировать ресурс. Тем не менее, если вы управляете не лендингом и не сайтом из нескольких страниц, составьте файл для своего проекта.

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

Для чего нужна карта сайта

Сайтмап нужен, если у сайта есть проблемы с индексацией, которые вызваны:

1) большим количеством страниц;

2) отсутствием ссылок (внутренних или внешних) на страницы;

3) глубокой вложенностью на сайте (запутанной структурой).

HTML vs XML-карта сайта

Карты сайта бывают следующих типов:

• HTML;
• XML.

Самое простое объяснение разницы между этими форматами в том, что XML-карта в первую очередь предназначена для поисковых систем, а HTML – для пользователей.

HTML-карта
– это всего лишь общий обзор сайта, содержит только информацию и страницы, которые нужно видеть пользователям. Если вы находитесь на сайте и ищете определённый раздел, при переходе на Sitemap HTML легко его найдёте. Несмотря на то, что такой тип карт сайта ориентирован на пользователя, он также может помочь вашему ранжированию в поисковых системах. Это одно из свидетельств того, что вы заботитесь об удобстве сайта для пользователя.

При составлении HTML-карты сайта важно учитывать:

1. Структурированное содержание.

Карта сайта должна быть понятна и удобна для восприятия пользователя. Желательно, чтобы она включала в себя разделы, категории, подкатегории и т. д.

2. Анкоры ссылок.

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

3. Ссылка на карту сайта должна быть доступна на всех страницах сайта. Обычно её размещают в футере страницы.

Протокол XML-карты
сайта предназначен для поисковых роботов. X ML-файл содержит в себе информацию о том, когда последний раз обновлялся URL-адрес, насколько это важно и как часто происходят изменения.

Обычно Sitemap состоит из следующих XML-тегов:

Обязательные:

<urlset> – определяет стандарт протокола и инкапсулирует этот файл.

<url> – содержит в себе информацию о URL-адресе (является родительским тегом).

<loc> – содержит абсолютный URL-адрес.

Необязательные:

<lastmod> – указывает дату последнего изменения файла.

<changefreq> – указывает частоту смены файла.

<priority> – указывает на значимость документа на сайте. Диапазон значений: от 0,1 до 1,0 (по умолчанию 0,5).

Не устанавливайте для каждого URL-адреса слишком частую смену файла и максимальный приоритет. Если метки частоты и приоритета не отражают реальность, вероятнее всего, поисковые системы будут более склонны игнорировать всю карту XML.

Другие форматы Sitemap

Помимо вышеперечисленных карт сайта, поисковые системы также поддерживают следующие форматы:

Для Google:

— RSS, mRSS и Atom 1.0;

RSS / Atom фиды должны содержать последние обновления вашего сайта. Обычно они небольшие и часто обновляются (что является плюсом).

— Сайты Google.

Для сайтов, созданных на платформе Google Сайты, Sitemap создаётся автоматически, и внести какие-то изменения невозможно.

Для Google и Яндекс:

— текстовый формат (TXT).

Файл должен быть в кодировке UTF-8 и состоять только из URL-адресов.

Требования Google и Яндекса к файлам Sitemap

Общие рекомендации
поисковых систем:

1. Используйте кодировку UTF-8.

2. Максимальное количество URL – 50 000.

3. Ссылки в сайтмапе должны быть на том же домене, что и файл.

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

4. Если файл слишком большой, разделите его на несколько и укажите их в файле индекса Sitemap.

5. Ответ сервера при обращении к файлу должен быть 200 ОК.

6. Указывайте только канонические адреса страниц (без GET-параметров и идентификаторов сессий).

Рекомендации Яндекса к файлу:

1. Максимальный размер – 10 МБ.

2. Поддерживает кириллические URL.

1. Максимальный размер – 50 МБ.

2. Поддерживает только цифры и латинские буквы.

чтобы уменьшить требования к пропускной способности канала, используют архиватор gzip. Размер сайтмапа должен быть 50 МБ (10 МБ) до сжатия, а не после.

Совет: русские доменные имена можно преобразовать с помощью кодировки Punycode.

Как создать XML Sitemap

1. Чтобы создать карту сайта, в первую очередь нужно определить канонические адреса, которые будут добавлены в файл.

2. Определить, какой формат файла будете использовать.

3. Создать файл можно вручную или, воспользовавшись генератором Sitemap.

Google в своей справке подготовил список онлайн и десктопных, платных и бесплатных генераторов карт сайта. Ознакомиться со всем списком можно, перейдя по ссылке.

Сгенерировать Sitemap проще, чем кажется. Разберём, как сгенерировать сайтмап, на примере деcктопного приложения Majento:

1. Парсим сайт.

2. Переходим в раздел «Сайты» => «Генерировать Sitemap».

3. Сохраняем в нужном нам формате.

4. Карта сайта готова.

Из online-генераторов XML-карты сайта заслуживает внимания XML Sitemap Generator.

Расширенные возможности этого сервера позволяют установить определённые XML-теги, включить/исключить нужные документы.

Исключить ненужные страницы можно и с помощью регулярных выражений.

XML-карта для изображений

Google поддерживает расширенный синтаксис для изображений. Для этого вы можете создать отдельную карту сайта для изображений или добавить синтаксис в существующую. Использование расширенного синтаксиса в Sitemap предоставляет поисковой системе дополнительную информацию об изображениях на сайте. Также это может помочь Google обнаружить и проиндексировать изображения, которые он не может найти при сканировании сайта.

Как и в обычной карте сайта, есть обязательные и необязательные XML-теги.

Обязательные:

<image:image> – аналогично тегу <url> содержит в себе URL изображения и дополнительную информацию.

<image:loc> – URL изображения.

Необязательные:

<image:caption> – подпись к изображению.

<image:geo_location> – место съёмки фотографии.

<image:title> – название изображения.

<image:license> – URL-лицензии изображения.

XML-карта для видео

Ещё один расширенный синтаксис, который поддерживает Google, – XML-карта для видео.

1) даёт понять Google, какой контент на сайте;

2) даёт возможность предоставить детальное описание к файлу;

3) станет доступным для поиска в Google Видео;

4) в поисковой выдаче будет отображаться заставка видео (может повысить количество переходов из поисковой выдачи).

Карта сайта для видеофайлов состоит из следующих обязательных элементов:

<loc> – содержит URL-адрес страницы, на которой размещено видео; если на одной странице размещено более одного видео, не нужно каждый раз создавать тег <loc>, достаточно в одном теге <loc> несколько раз прописать <video:video> для каждого видео на странице.

<video:video> – включает в себя всю информацию о видео.

<video:thumbnail_loc> – URL к миниатюрному изображению (заставке) к видео. Рекомендованные размеры: от 160×90 пикселей до 1920×1080. Форматы изображения: .jpg, .png, or. gif

<video:title> – заголовок, который должен совпадать с названием страницы, на которой отображается видео.

<video:description> – описание видео. Должно соответствовать с метаописаниями страницы. Максимальное количество символов – 2048.

Заголовок и описание видео должны быть экранированы или упакованы в блок CDATA.

Со всеми XML-тегами карты сайта для видео можно ознакомиться в справке Google
.

Где разместить карту сайта

Мы рекомендуем размещать XML-карту в корневом каталоге сайта. Ссылку на сайтмап нужно указать в файле robots.txt.

Более подробно описано, как разместить ссылку на карту сайта в robots.txt
, у нас в статье.

Добавить и проверить Sitemap в Yandex. Webmaster

Чтобы сообщить роботу Яндекса о наличии карты сайта, добавьте её в панель Яндекс. Вебмастера:

1. Перейдите в раздел «Индексирование» – «Файлы Sitemap».

2. Укажите ссылку на сайтмап.

3. Нажмите кнопку «Добавить».

4. Ниже будет отображаться список со всеми добавленными файлами.

Прежде чем добавить файл, рекомендуем проверить его на наличие ошибок:

1. В панели Яндекс. Вебмастера перейдите в раздел «Инструменты» – «Анализ файлов Sitemap».

2. Укажите URL, загрузите файл или просто добавьте текст.

3. Нажмите кнопку «Проверить».

Добавить и проверить файл в Google Search Console

Чтобы сообщить Googlebot о наличии этого файла, нужно добавить его в панель GSC:

1. Перейдите в раздел «Сканирование» – «Файлы Sitemap».

2. Нажмите кнопку «Добавление / проверка файла Sitemap».

3. Укажите URL файла.

4. Нажмите кнопку «Отправить».

Чтобы проверить карту сайта на наличие ошибок, вместо кнопки «Отправить» нажмите «Тест». Если ошибок нет, будет отображаться следующее окно.

При возникновении ошибок или предупреждений, Google сообщит об этом в соответствующей панели.

Полный перечень ошибок и как их исправить описано в справке Google.

Распространённые заблуждения о Sitemap

Так как у многих этот файл вызывает трудности и является «тёмным лесом», возникают определённые мифы в отношении карт сайта. Рассмотрим некоторые из них:

– «Включение URL-адреса в файл Sitemap для XML гарантирует, что он будет проиндексирован».

Нет. Важно отметить, что XML-файлы Sitemap – это только рекомендации. Карта сайта XML не гарантирует индексацию поисковыми системами страниц, указанных в файле.

– «Если я удалю URL из XML-карты, он будет удалён из индекса».

Нет. Карта сайта XML не исключает индексацию страниц, не включённых в карту сайта XML.

– «XML-файлы Sitemap трудно создавать и поддерживать»

Нет. Небольшие сайты могут легко создавать и размещать собственные XML-файлы вручную, используя приведённые выше примеры в качестве руководства по форматированию. Для более крупных сайтов и сайтов, которые изменяются чаще, плагины или модули, доступные для большинства CMS, могут автоматизировать обновление XML-файлов.

Заключение

Файл Sitemap – полезный инструмент для передачи поисковым роботам информации о структуре сайта. Используйте это руководство, чтобы понять, как работает карта сайта, как она устроена, как сгенерировать, разместить и проверить файл.

Еще по теме:

---