Как сделать динамический заголовок сайта


Подмена заголовков на сайте и лендинге: 3 способа

Внимание, вопрос!

Как рассказать посетителю вашей страницы, что (например) ваш сервис по ремонту чего угодно находится недалеко от него?

Для очевидного ответа про указание своего адреса в шапке сразу есть поправка – речь идет о тех случаях, когда у компании либо нет офиса вовсе, либо есть офис (или мастерская), например, в Москве, а спрос на ремонт особенно высок в условном Серпухове. Если при таких условиях вы хотите чинить что-либо для жителей Серпухова – нужен выезд мастера. Для таких (кстати, сегодня очень распространенных) случаев и нужно дать ответ. И ответ вполне простой – надо указывать город, в котором вы хотите работать, в заголовке на первом экране .

А если вы ремонтируете в 10 городах по всей Московской области? Можно указать в заголовке «ремонт чего-либо в 10 городах по всей МО», но это будет совсем неконкретно. Вряд ли жителя Серпухова или Домодедово заинтересует такое предложение, ведь ему нужен именно «ремонт в Серпухове/Домодедово».

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

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

Рассмотрим 3 основных способа настройки подмены заголовков и несколько реальных примеров использования.

Способ 1. Подмена по UTM-метке

В данном случае, сама метка будет прописываться как ‘cm_city’ (пример подмены города для сервиса по ремонту ванных комнат). Вот как выглядит настройка такой подмены в коде:

Рис.1. UTM-метка в коде страницы

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

Рис.2. UTM-метка в URL страницы и подмена в заголовке

Плюсы и минусы способа подмены по UTM-метке:

+ такой способ подмены заголовка требует минимальных усилий – вы просто меняете любую фразу в метке в адресной строке в правильном падеже;

— такой способ не избавляет вас от разных ссылок для разных объявлений;

— если будет нужно настроить подмену сразу нескольких элементов (например, город и сам вид услуги), специалист по настройке рекламных объявлений (который и будет прописывать метки в URL) элементарно может запутаться. Именно поэтому метод подмены с помощью UTM-меток рекомендуется использовать только для подмены одного элемента заголовка.

Способ 2. Подмена с помощью копий страниц

Отличный вариант для подмены не просто заголовка, но и, например, изображения или вообще всего первого экрана. Принцип простой: нужно просто создать копию страницы с заменой нужного элемента и прописать в поддомене. Рассмотрим способ на примере ремонта техники Apple.

Поскольку люди часто ищут не просто «ремонт айфона», но и «ремонт iphone 6», было принято решение делать подмену заголовков по модели iPhone/iPad.

Рис.3. Подмена заголовков по модели устройства (iPhone 6) с помощью копии страниц

Рис.4. Подмена заголовков по модели устройства (iPad 2) с помощью копии страниц

При этом менялся не только заголовок, но и изображение на первом экране, а также отражающийся по умолчанию прайс-лист на втором экране.

Рис.5. Подмена отображающихся прайс-листов по модели устройства (iPad 2) с помощью копии страниц

Плюсы и минусы способа:

+ в копии страницы вы можете заменять сколько угодно элементов, а не только текст заголовка;

— большое количество ссылок;

— больше работы для вашего верстальщика.

Способ 3. Подмена по IP посетителя

Самый сложный из способов. Нацелен на подмену по географическому признаку (подмена города, района, региона, страны и т.д.). Работает за счет определения вашего IP. Для такой подмены обязательно наличие файла detect.php.

Рис.6. Подмена заголовков с помощью определения IP посетителя в коде страницы

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

Рис.7. Условия подмены городов в заголовке при определенных IP посетителей

На практике же, в отличие от двух предыдущих вариантов, вы обходитесь без кучи ссылок – IP посетителя автоматически подсасывается и отображается в заголовке. Вот как выглядит страница для посетителя с московским IP:

Рис.8. Подмена заголовков с помощью определения IP (URL остается неизменным)

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

Рис.9. Для IP Санкт-Петербурга прописанное условие не соблюдается, поэтому в заголовке не указан город

Плюсы и минусы:

+ нет дополнительных ссылок – подмена происходит на одном и том же url;

— способ предназначен только для подмены заголовка по географическому принципу;

— довольно сложная с технической точки зрения настройка подмены;

— риск нерелевантной выдачи при несоответствии IP с фактическим адресом нахождения посетителя.

Выводы:

Как создать динамический заголовок страницы с помощью PHP

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
  5. Реклама Обратитесь к разработчикам и технологам со всего мира
  6. О компании
.

Как создать сайт


Узнайте, как создать адаптивный веб-сайт, который будет работать на всех устройствах, ПК, ноутбук, планшет и телефон.


Создание веб-сайта с нуля


A «Эскизный план»

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

Панель навигации

Боковое содержание

Какой-то текст какой-то текст ..

Основное содержание

Какой-то текст какой-то текст..

Какой-то текст какой-то текст ..

Какой-то текст какой-то текст ..

Нижний колонтитул


Первый шаг - базовая HTML-страница

HTML - это стандартный язык разметки для создания веб-сайтов, а CSS - это язык, описывающий стиль HTML-документа. Мы объединим HTML и CSS, чтобы создать простую веб-страницу.

Пример




Название страницы



кузов {
семейство шрифтов: Arial, Helvetica, sans-serif;
}

Мой веб-сайт


Веб-сайт, созданный мной.


Попробуй сам "

Объяснение примера