Как сделать для сайта чпу
Что такое красивые ЧПУ, или 9 правил, как сделать человекопонятные URL на сайте
Каждая страница любого сайта в интернете имеет свой адрес — URL или урл. Например, liderpoiska.ru/seo — урл страницы про SEO на нашем сайте, то есть адрес, по которому можно на эту страницу попасть.
Что такое ЧПУ
Выглядеть URL страницы может по-разному — это вопрос технической реализации и предварительной подготовки сайта к SEO. Часто адреса страниц в интернете выглядят некрасиво и непонятно: содержат в себе разные символы, цифры, буквы, могут быть длинными или даже супердлинными. Хорошим тоном делать на сайте ЧПУ (Человеко-Понятный Урл).
ЧПУ — это короткий и ёмкий адрес страницы, который сразу дает понимание как человеку, так и поисковому роботу о том, про что эта страница.
Значение ЧПУ для СЕО
В случае, если ЧПУ есть и сделаны корректно, то они дают ряд преимуществ сайту:
Примеры адресов страниц
Видно, что во втором случае, даже не зная адрес сайта, можно догадаться, что находится на странице, чего нельзя сказать про первый пример — это и есть разница между просто урлом и ЧПУ.
Примеры ЧПУ в выдаче
Виды ЧПУ
Сегодня существуют три основных вида ЧПУ:
Адрес, прописанный транслитом, будет понятен как посетителям сайта, так и поисковым системам. Поисковики в рунете предпочитают именно такой вариант. Поэтому мы рекомендуем использовать именно транслитерированную кириллицу.
Если ваша страница называется на русском языке «Холодильные камеры», то при транслите чпу будет выглядеть как «/holodilnie-kameri/» или «/xolodilnie-kamery/» — в зависимости от того, как в системе настроен транслит.
Тоже хороший вариант для написания адресов, так как многим интернет-пользователям понятны часто используемые английские слова. Употребление латиницы особенно актуально для сайтов, продвигаемых за границей (в англоговорящих странах).
Если ваша страница называется на русском языке «Современные кухни», то при латинице чпу будет выглядеть «/modern-kitchen/».
Сегодня многие сайты, например, Википедия, используют кириллические урлы. Насколько это удобно – вопрос спорный. С одной стороны, адрес становится максимально информативным и понятным для русского человека. С другой – при копировании и вставке такой URL автоматически перекодируется в Punycode, превращаясь в непонятный набор символов.
Если ваша страница называется на русском языке «Банкетные залы», то при кириллице чпу так и будет выглядеть «/Банкетные-залы/».
Пример ЧПУ с кириллицей
Правила составления ЧПУ
Основное правило для ЧПУ урла: адрес должно быть коротким и приближенным к самому значению страницы (фактически url = название страницы).
Вот свод правил, которые можно использовать при составлении ЧПУ на сайте (применить их можно как на этапе создания нового сайта, так и на уже давно существующих сайтах, если урлы на них не совсем «хорошие»):
В заключении
Придерживайтесь этих правил, и у вас будут красивые адреса страниц, понятные людям и привлекательные для поисковых систем. Правильно составленные адреса лучше, удобнее и эстетичнее, чем старые, громоздкие и непонятные URL-адреса. Обязательно используйте ЧПУ и удачи в продвижении!
ЧПУ для сайта: правила создания, примеры и «работа над ошибками»
Понятие привлекательных для посетителей адресов веб-страниц появилось достаточно давно. Тем не менее, до сих пор не все сеошники или владельцы сайтов уделяют этому аспекту продвижения достаточное внимание. В статье мы постараемся выделить принципы грамотной структуры ЧПУ и рассмотреть возможные трудности при составлении дружественных URL.
Что такое ЧПУ?
Сочетание букв «ЧПУ» – не что иное, как «человекопонятные урлы», то есть адреса страниц, понятные и привлекательные для пользователей. В английском SEO ЧПУ можно трактовать как Search Engine Friendly URLs. Как вы уже заметили, за рубежом гораздо важнее – сделать адрес предпочтительным для поисковых систем, в то время как на русскоязычных ресурсах большее внимание уделяется юзабилити. Тем не менее, ЧПУ-адреса всегда выгодно выделяются на фоне остальных. Использовать их можно и даже нужно, но делать это – грамотно и с умом.
Рассмотрим ЧПУ на простых примерах. Вот так выглядели первоначальные версии URL:
А вот так будут выглядеть их новые ЧПУ-адреса:
Очевидно, что окончательные варианты – гораздо удобнее. Но существуют ли какие-либо дополнительные преимущества ЧПУ, помимо эстетичности?
Зачем еще нужны ЧПУ?
Правильная структура ЧПУ и другие профессиональные хитрости
Структура ЧПУ-адресов зависит от типа вашего ресурса. Для примера рассмотрим пару шаблонов.
Шаблон №1: /pagename/
Возможный ЧПУ: /contact/
Тип ресурса: любой
Как вы могли догадаться, такой шаблон ЧПУ подойдет для любой статической страницы – например, для раздела «Условия оплаты и доставки». Также можно использовать шаблон для наименования разделов виртуального магазина.
Шаблон №2: category/subcategory/title
Пример: computer/dell/dell-venue-7
Тип ресурса: интернет-магазин, блог, новостной сайт
Во втором шаблоне можно проследить навигационную цепь – от общих категорий к частным объектам. Подобно «хлебным крошкам» такая структура ЧПУ оптимизирует навигацию по интернет-магазину или блогу и помогает мастеру закреплять URL за конкретными товарными позициями.
Как сделать ЧПУ на сайте?
Придумывая ЧПУ для собственного ресурса, обратите внимание на следующие факторы:
Создание ЧПУ предполагает использование и кириллицы, и латиницы – зависит от ваших вкусов. Главное, не применять в одном URL и то, и другое: пользователю придется переключаться из одного языка на другой.
Чем короче адреса, тем лучше. Они и запоминаются легче, и обрезать их не придется (если вы вдруг захотите вставить их в ссылку в социальных сетях). Идеальная длина ЧПУ – 40-90 символов.
Здесь все просто: пробелы лучше не включать в URL в принципе. Особой разницы между тире и подчеркиваниями нет, однако тире считается более удачным вариантом. Его пользователь может набрать быстрее, ведь для подчеркивания придется еще и нажать Shift.
И последний совет: постарайтесь перейти на новые версии CMS. Только в этом случае вы сможете разместить на своем сайте красивые и удобные для запоминания ЧПУ!
ЧПУ-адреса страниц: как привести URL сайта к виду SEO Friendly
Термин «ЧПУ» используется как русскоязычный аналог понятия Search Engines Friendly URL или SEF URL. В нашем языке есть и более точный перевод этой фразы: «Человекопонятные урлы» или «Семантические урлы». Разбираемся, что такое ЧПУ для сайта, для чего они нужны, какими они бывают и как их делают.
Что это такое?
ЧПУ-адреса — это адреса веб-страниц, которые легко воспринимаются и запоминаются человеком. Поисковые системы тоже «любят» их, поскольку, как показывают наблюдения, по таким адресам всегда больше переходов.
Пользователь уже по ссылке видит, о чем идет речь на конкретной странице. Он может оперативно принять решение, нужно ему открывать конкретный адрес или нет.
ЧПУ-адреса
Для чего нужны ЧПУ-адреса
Семантические урлы выполняют срезу несколько функций:
Как мы уже отметили ранее, из такого адреса сразу понятно, о чем идет речь по ссылке и стоит ли переходить по ней для решения задач, стоящих перед пользователем.
SEF-ссылки приветствуются поисковыми системам. Такие адреса всегда имеют значительный перевес над конкурентами, которые не позаботились о создании человекопонятных урлов.
В ЧПУ-адресах нет технических данных, передаваемых методом GET. Именно их чаще всего используют злоумышленники для взлома сайтов.
Читабельные ссылки можно редактировать прямо в строке ввода URL в браузере. Это удобно, например, если пользователь хочет вернуться в общий раздел сайта без дополнительных переходов по ссылкам.
Например, вы нашли в интернет-магазине нужную книгу и теперь хотите посмотреть все произведения ее автора. Для этого достаточно стереть в адресе страницы текст, отвечающий за название книги. В адресной строке браузера останется ссылка на все произведения выбранного автора.
Отображение URL в браузере
Как сделать ЧПУ: структура и шаблоны
Структура семантических урлов зависит от целого ряда факторов. Это и тематика сайта, и его контент, и особенности функционирования движка. То, что подойдет, например, для интернет-магазина, вряд ли можно будет применять для новостного портала, и наоборот.
Тем не менее, существует ряд общих шаблонов для создания ЧПУ URL:
Чтобы переместить веб-страницы с ЧПУ-ссылкой, используйте 301 редирект. В противном случае исходная страница окажется недоступной, а страница, созданная по новому URL, будет считаться дубликатом исходника. Поисковые системы негативно относятся к подобным маневрам и часто полностью исключают такие страницы из поисковой выдачи.
ЧПУ изображений, видео, аудио и документов
Все изображения, видеоролики, документы и прочие объекты, представленные на сайте, подвергаются тщательному анализу со стороны поисковых систем. В частности, роботы Яндекса и Гугла анализируют названия всех этих объектов. Чем понятнее назван файл, тем более лояльно относится к нему поисковик.
Так, картинка с названием 79803foDtwnl.jpg не передает никакой информации о своем содержимом. Подобные объекты воспринимаются поисковыми системами как некачественные, неудобные для пользователя. Это отношение в той или иной степени распространяется и на сайт, на котором выложена картинка.
Изображение с названием devochka-v-sarafane.jpg кажется поисковикам куда более качественным, ведь по его названию четко понятно, что пользователь увидит на картинке.
Пример неоптимизированного URL изображения
ЧПУ для изображения
Поисковые роботы определяют содержимое объекта на сайте, опираясь на следующие факторы:
Чтобы поисковой системе «понравилось» ваше изображение и сайт в целом, важно предоставить ей как можно больше информации. Тогда роботы лучше проиндексируют страницы, придадут им больше ценности и будут чаще показывать их в поисковой выдаче по соответствующим запросам.
Таким образом, ЧПУ-адреса изображений, аудио-, видео- и других объектов на сайте являются важной составляющей его SEO продвижения. Не стоит пренебрегать подобными мелочами.
Типы ЧПУ
Как вы запишете адрес интернет-магазина книг и журналов: словом «books» или «knigi»? А может быть, выберете русскоязычный вариант «книги»? В интернете можно встретить все три варианта человекопонятных урлов, и каждый из них имеет свои особенности.
ЧПУ транслитом
Поисковики понимают транслитерацию, символы латиницы понятны и для людей. Русскоязычные тексты, переведенные в транслит, легко читаются, четко передают содержание страницы и хорошо запоминаются. Важным достоинством ЧПУ-ссылок на транслите является то, что они придают сайтам больше веса, чем аналогичные адреса, записанные на латинице.
ЧПУ транслитом
Единственный недостаток таких адресов — в том, что некоторым людям сложно читать длинные тексты, записанные латинскими буквами.
Не каждый сходу поймет, например, вот это: nekotorym_lyudyam_slozhno_chitat’_dlinnye_teksty_zapisannye
ЧПУ на английском
Добрая половина наших соотечественников неплохо знают английский язык. Поэтому адреса сайтов, написанные английскими словами, совершенно их не пугает. Мы ежедневно сталкиваемся с такими терминами, как shop, contacts, sale, discount или delivery. Вполне нормально, если и в адресной строке браузера тоже будут встречаться английские слова.
Поисковые роботы положительно относятся к адресам на английском языке. Хотя, как мы уже отметили ранее, ЧПУ транслитом кажутся им более качественными для русских сайтов.
ЧПУ на английском
Главный «минус» таких веб-адресов — в том, что они кажутся простыми и понятными только при использовании ограниченного числа общеупотребимых слов.
Стоит вам написать в URL сайта что-нибудь вроде: development_of_accessible_websites_for_real_estate_agencies — и «понятность» вашего веб-адреса моментально снизится. Хотя, по-английски он читается вполне неплохо.
ЧПУ кириллицей
Этот вариант выбирают многие сайты. Википедия, например, радует пользователей очень понятными, приятными для глаз и запоминающимися ссылками в духе https://ru.wikipedia.org/wiki/Поисковая_оптимизация.
Пример ЧПУ кириллицей
Однако стоит скопировать подобную ссылку — и ЧПУ превращается в нечто совершенно нечитабельное. Вот скопированная ссылка на все ту же страницу в Википедии, как только мы ее вставляем она приобретает следующий вид:
Если вас не смущают подобные метаморфозы — смело используйте человекопонятные адреса на кириллице. И Яндекс, и Google одобряют подобные решения.
Какой тип ЧПУ выбрать
Прежде чем браться за настройку ссылок на сайте, определитесь, какой вид URL вы планируете использовать. В этом вам помогут следующие рекомендации:
Таким образом, оптимальное решение — прописывать русскоязычные слова транслитом. Этот подход позволит вам полностью реализовать потенциал человекопонятных урлов и избежать наиболее распространенных проблем.
Как настроить SEF URL
Этот процесс не отнимет у вас много времени:
Чтобы привести русскоязычные заголовки к виду SEF URL, воспользуйтесь специальными онлайн-сервисами, такими как, например, Генератор URL онлайн от Advego, iTRANSLIT или translit-online от Яндекса.
Генератор URL от Advego
Ошибки при составлении ЧПУ
Вот основные промахи, которые допускают веб-мастера:
ЧПУ-адреса улучшают релевантность страницы, повышают кликабельность ссылок и положительно влияют на SEO-продвижение сайта. Применяйте их правильно, с учетом требований поисковых систем и вашей потенциальной аудитории.
За последнюю неделю заметил на форуме несколько тем, в которых шло бурное обсуждение ЧПУ (человека-понятные ссылки на товары, страницы и т.п.) на отдельных компонентах каталога. Тема всегда оставалась сложной и каждый пытался в ней разобраться, как мог. Отвечать по этой теме сложно, а если подробно, то и неудобно в формате форума, поэтому родилась идея выпустить эту статью.
В 1С-Битрикс есть комплексный компонент управления каталогом bitrix.catalog в котором все достаточно просто, ставится он по умолчанию предварительно настроенный.
При всех его достоинствах в нем есть один недостаток, он поставляется как есть и может подойти не для всех.
А если нужна большая гибкость? Например, требуется сделать разделы, оформив их в своем дизайне или своей структурой представления информации. То начинаются танцы с отдельными компонентами каталога, на которых все это и собирается.
В начале я бы хотел разобрать более старую схему настройки, которая работала до последнего релиза 15.5 (первая часть статьи). А потом показать, что сделано в продукте в последнем 15.5 релизе, чтобы облегчить достаточно сложную настройку ЧПУ (вторая часть статьи).
Создание раздела файл index.php
Страницы созданы, компоненты размещены, приступаем к настройке. Нам понадобится инфоблок, в котором лежит наш прекрасный раздел со своими подразделами, который мы и будем выводить. Поехали.
Настройка главной страницы раздела
Мы помним, что папка для раздела каталога называется у нас: shop-for-confectioner
А путь ЧПУ я хочу, что бы был вида: /shop-for-confectioner/название-подраздела/название-элемента/
Отлично, смотрим результат настройки:
Отобразились подразделы, в разделе над которым мы работаем.
Естественно я не прописываю символьные коды вручную, пусть этим занимаемся платформа 1С-Битрикс. Для этого, при создание инфоблока, я включил соответствующую настройку:
Не буду подробно останавливаться на галочках данной настройки, тут интересна только одна « Использовать внешний сервис перевода », в ней я настраиваю перевод через Яндекс, указав ключ в настройках « Главного модуля ».
Отобразился список товаров из раздела.
Первая страница готова. Не пугайтесь, если она у вас не заработает, так как у меня сразу были настроены другие шаги, которые я пока не упоминал, но обязательно ниже опишу. |
Автоматически формируемый вывод подразделов
Страница раздела достаточно простая, она дает возможность вывести туда дополнительную информацию, баннеры с акциями для этого раздела, SEO тексты и т.п. они будут уникальные для этого раздела, но нам придется делать для каждого раздела свой набор файлов, что не всегда оправданно.
Вот пример уникального раздела, даже со своим дизайном: http://tortik39.ru/shop-for-confectioner/
А можно сделать автоматически формируемые данные для подраздела, гибкости будет меньше, но нужно будет создать набор файлов только один раз. Давайте разберем, как это делается для подразделов.
Настройка страницы отображения подразделов в разделе
Прежде чем выводить заголовок и текст ниже, нам необходимо создать инфоблок, который будет это все хранить и показать как мы это свяжем.
Инфоблок создан. Теперь в нем нужно создать столько записей, сколько у нас будет разделов, для которых мы выведем название и SEO текст внизу страницы подраздела или раздела.
Это все просто и работа скорей для копирайтера, а в нашу задачу войдет прописать правильные символьные коды, которые мы должны взять у подразделов нашего инфоблока каталога.
Идем в наш торговый каталог, в котором уже есть наши разделы с товарами и смотрим их символьные коды:
И на основание этих символьных кодов создаем записи в нашем новом инфоблоке с названиями и SEO текстом внутри, и с такими же символьными кодами. Ниже показаны созданные статьи и заголовки, которые нам пригодятся.
Давайте посмотрим одну такую запись внутри:
Более « правильную » связь можно сделать, связав инфоблоки через свойство. И тогда не нужно будет контролировать одинаковость символьных кодов, но зато потребуется при создание элемента раздела каталога, выбирать что мы связываем с ним, в виде нашего элемента статьи. Оба вариант имеют свои плюсы и минусы, мне понравилось в данном случае более простое решение.
Самое сложное мы сделали, создали элементы в связном каталоге, проконтролировали, что каждый элемент имеет такой же символьный код, как и у раздела.
Приступаем к настройке bitrix:news.detail
Вся настройка сводится к тому, что бы выбрать наш инфоблок, где хранятся статьи, указать в поле « Код новости » следующий код: =
Этим кодом мы будем выбирать новость с таким же символьным кодом, который будет взят с символьного кода раздела.
Ну и напоследок, отключить все лишнее к выводу, фактически нам нужно вывести только заголовок.
Давайте посмотрим, что у нас получилось и как это работает. Я записал небольшой видеоролик для показа динамики.
Получилось то, что нам требовалось.
Теперь нам нужно вывести список товаров из подраздела, нашего раздела, настроить компонент bitrix:catalog.section
Указываем в пункте « Код раздела » выражение = <$_REQUEST[«SECTION_CODE"]>Тем самым выберем символьный код раздела, для которого будем выводить элементы.
Прописываем шаблоны ссылок, для страницы раздела, и элементов раздела. Не забываем о переменной, в которой передается символьный код раздела. Остается настроить нужные данные в компоненте и можно смотреть что получилось.
Компонент отобразил список, и если перемещаться по подразделам, страничка показывает правильное содержимое.
Настройка страницы детальной карточки
Нам нужно настроить страницу, которая будет отображать детальную карточку товара, файл detail.php
В файле страницы у нас три компонента. Останавливаться на компоненте bitrix:catalog.section.list мы не будем, его настройки полностью аналогичны описанным выше.
Второй компонент bitrix:catalog.element как раз и отвечает за отображение детальной карточки товара, давайте его настроим.
Нам нужно получить символьный код раздела и элемента. Делаем мы это, прописывая две строчки для поля « Код элемента » это будет = <$_REQUEST[«ELEMENT_CODE»]>, а для « Кода раздела » это будет = <$_REQUEST[«SECTION_CODE»]>.
Далее прописываем настройки в разделе « Шаблоны ссылок », в разделе уже нам все знакомо.
Смотрим, что у нас получилось:
Открылась детальная карточка, мы все настроили корректно.
Настройка компонента bitrix:catalog.section на вывод популярных товаров
Традиционно нам нужно передать в « Код раздела » символьный код раздела, для которого и будем отбирать нужные нам элементы, прописываем =
Традиционный блок с настройкой « Шаблона ссылок »
Указываем в компоненте настройку отбора по фильтру, показ самых просматриваемых элементов.
И вот в нашей детальной карточке товара, для нашего раздела, показываются самые популярные товары.
Новая адаптивная постраничная навигация
Обратите внимание на новую постраничную навигацию. Самый важный ее плюс в адаптируемости для мобильных устройств, она проходит валидацию на отображение у Гугла. Советую использовать ее во всех компонентах, которые мы разобрали, которые выводят список.
Давайте посмотрим, где это настраивается:
В блоке настроек « Настройка постраничной навигации » необходимо выбрать шаблон с названием « ROUND »
Мы настроили страницы, но ничего не работает
Все верно! В процессе описания я вам показывал, что у меня открываются страницы, все работает, но это не совсем так. Чтобы вся схема заработала, нужно выполнить еще два шага.
В поле « URL страницы раздела » прописываем, как будет строиться ЧПУ для раздела: #SITE_DIR#/shop-for-confectioner/#SECTION_CODE#/
В поле « URL страницы детального просмотра » прописываем, как будет строиться ЧПУ для детальной карточки товара: #SITE_DIR#/shop-for-confectioner/#SECTION_CODE#/#ELEMENT_CODE#/
Ошибки в формирование адресов в инфоблоке, очень часто не приводят к потере работоспособности страниц, и обычно все не обращают на них внимание. Это опасно!
И так идем в раздел « Правила обработки »
Нам нужно создать два правила: одно будет создано для вывода разделов, а второе будет обрабатывать показ детальной карточки товара.
Правило создания ЧПУ для разделов
В правиле нам потребуется прописать всего три строки.
Правило создания ЧПУ для элементов
Аналогично правило будет содержать три строки, но немного сложнее:
Поле « Условие » расширяется добавлением кусочка отвечающего за элемент: #^/shop-for-confectioner/([\w\d\-]+)/([\w\d\-]+)(\\?(.*))?#
Поле « Файл » содержит путь к файлу, который отвечает за показ карточки товара, это наш файл detail.php : /shop-for-confectioner/detail.php
Поле « Правило » содержит две переменные, в которых передаются символьные кода, раздела и элемента: SECTION_CODE=$1&ELEMENT_CODE=$2
Настройки закончены, и если вы все сделали правильно, у вас все должно заработать!
Но мы не закончили с заданием, нам еще необходимо сделать хлебные крошки.
Настройка хлебных крошек
Компонент хлебных крошек у нас лежит в header.php шаблона нашего сайта. Настройка компонента очень простая:
На скриншот поместились все настройки компонента.
Основные настройки делаются в компонентах расположенных на трех наших страницах, которые мы создали ранее.
Соответственно нам нужно в файлах list.php и detail.php поставить соответствующие галочки.
Для файла list.php идем в компонент bitrix:catalog.section и ставим следующую галочку.
При переходе в разделы, в хлебные крошки попадет название соответствующего раздела.
Для файла detail.php идем в компонент bitrix:catalog.element и ставим следующие галочки.
При переходе к элементу в хлебные крошки попадет как название раздела, так и название элемента.
Давайте посмотрим, что у нас получилось:
Для главной страницы раздела index.php
Для страниц подразделов нашего раздела, файл list.php
Для страницы детальной карточки товара, файл detail.php
Можно было бы на этом считать настройку законченной, но мы не выполнили условие, которое сработало у меня « Не показывать хлебные крошки на странице раздела », файл index.php
Запрет отображения хлебных крошек на главной странице раздела
Данная строчка запрещает выводить хлебные крошки.
На этом первая статья закончена. Мы разобрали, как собрать каталог на отдельных компонентах. В следующей статье мы поговорим о том, как сделать то же самое, но без последнего пункта, а именно написания правил обработки адресов и изучения регулярных выражений.
Пишите свои вопросы в комментариях, я с удовольствием на них отвечу.