Что такое ссылки, их разновидности, как сделать ссылку в html

Ссылка в HTML — ссылки на электронную почту

Также можно создать гиперссылку на адрес электронной почты. Для этого используйте атрибут mailto в теге ссылки:

<a href="mailto:king_kong@example.com">Email King Kong</a>

Посмотреть пример

Нажатие на эту ссылку приведет к открытию вашего почтового клиента по умолчанию с уже заполненным адресом электронной почты получателя.

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

<a href="mailto:king_kong@example.com?subject=Question&body=Hey there">Email King Kong</a>

Посмотреть пример

Пример из практики

Я технически поддерживаю один из обучающих проектов.

Имела место следующая ситуация.

  • Есть лендинг тренинга, в котором можно участвовать как платно (с расширенными возможностями), так и бесплатно (базовый вариант).
  • На этот лендинг «льется трафик» с различных рекламных систем (яндекс.директ, вконтакте, фэйсбук, партнеры…).
  • Все рекламные ссылки на этот лендинг размечены utm-метками.
  • В свою очередь CRM-система, используемая на проекте, поддерживает работу с UTM-метками и таким образом можно считать выгоду от того или иного канала рекламы, соотнося расходы и продажи по каждому каналу.
  • На лендинге имеются 2 ссылки для платного и бесплатного участия. Ссылка для бесплатного участия ведет на отдельную страницу, где находится форма, заполнив которую, человек попадает в группу в CRM для бесплатного участия в тренинге.

Формулируем задачу для решения этой проблемы:нужно взять UTM-метки из строки запроса лендинга и подставить их в ссылку на страницу с формой.

Сделать это нужно было максимально быстро, т.е. «вчера» поскольку на страницу уже шел трафик.

Как правильно оформить человекопонятный урл

Поисковики рекомендуют к использованию ЧПУ. Это такие адресные данные, которые дают возможность юзерам понять, какая информация находится по месту расположения ресурса. В англоязычной версии термин принято называть SEF.

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

  • Для веб-страниц на русском языке обязательно применяйте транслитерацию.
  • Вместо пробелов и знаков препинания ставьте дефисы. Нижнее подчеркивание допускается.
  • В случае, когда в конце строки появляется «-», его нужно убрать.
  • Забудьте о заглавных буквах при формировании адреса. Только строчные.
  • Не делайте ссылку слишком длинной. Все что больше 3-5 слов нещадно обрезается поисковыми системами. В результате существенно снижается значимость ключевиков и возникают неудобства для пользователей.

Краткое руководство по URL-адресам и путям

Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.

URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу .

URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог creating-hyperlinks.)

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

В корне есть ещё два каталога —   и . У каждого из них есть один файл внутри —  и , соответственно

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

  • Тот же каталог: Если вы хотите подключить ссылку внутри  (верхний уровень ), указывающую на , вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — :

  • Перемещение вниз в подкаталоги: Если вы хотите подключить ссылку внутри  (верхний уровень , вам нужно спуститься ниже в директории  перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете — :

  • Перемещение обратно в родительские каталоги: Если вы хотите подключить ссылку внутри , указывающую на , вам нужно будет подняться на уровень каталога, затем спустится в каталог . «Подняться вверх на уровень каталога» обозначается двумя точками — — так, URL-адрес, который вы используете :

Примечание: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: .

Можно ссылаться на определённую часть документа HTML (известную как фрагмент документа), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:

Затем, чтобы связаться с  этим конкретным  , вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:

Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на другую часть того же документа:

Два понятия, с которыми вы столкнётесь в Интернете, — это абсолютный URL и относительный URL

Абсолютный URL
Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая протокол и доменное имя. Например, если страница загружается в каталог, называемый , который находится внутри корня веб-сервера, а домен веб-сайта — , страница будет доступна по адресу (или даже просто ), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как , для загрузки, если он не указан в URL-адресе.).

Абсолютный URL всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.

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

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

Советуем вам основательно разобраться в этой теме!

Что такое ссылка?

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

Ссылка (гиперссылка, URL) – уникальный путь перехода от одной страницы к другой. В их структуре содержится путь к сайту:

  • протокол доступа;
  • имя домена;
  • место размещения файла;
  • имя страницы.

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

Зачем сокращать ссылку?

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

Сжатие: как сделать короткую ссылку

Стоит отметить, что не всегда для трансформации требуется сторонний ресурс. Например, владельцы информационных ресурсов, могут скрывать замысловатые символы под тегом <а>. Также есть сайты, где поддерживается функция форматирования сообщений пользователей при помощи  html-тегов.

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

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

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

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

Что такое URL

URL (или URL адрес) – это форма уникального адреса конкретного веб-ресурса в сети Интернет. Он может ссылаться на веб-сайт, какой-то индивидуальный документ или изображение. Пользователю Интернета нужно вставить этот код в поле поиска, чтобы найти нужный сайт, документ, папку или изображение. На простом языке это означает следующее: благодаря URL адресу пользователь узнает информацию о том, где находятся нужные ему данные.

URL адрес – это аббревиатура, обозначающая термин Universal Resource Locator (всеобщий указатель ресурса). Он содержит ссылку на сервер, который является хранилищем искомого ресурса. В общем, URL это путь с сервера к последнему устройству (которое является платформой работы пользователя). Верхний элемент – это сервер хранения ресурсов, самый низкий – пользовательское устройство. Все точки между этими двумя являются дополнительными серверами.

Найдите проблемные URL

Проведите аудит вашего сайт и получите полный список страниц, где URL больше 100 символов

Как изменить URL-адреса для сайта на Joomla?

Чтобы поменять длинные и громоздкие URL на более короткие, необходимо открыть админку вашего Joomla-сайта. Далее переходите в System -> «Глобальная конфигурация»:

Откроется экран «Глобальная конфигурация». Нас интересуют «Настройки SEO».

Здесь мы видим параметр «Дружественные адреса». Выбрав «Да», вы согласитесь с тем, чтобы ваши URL были оптимизированы для поисковиков.

У нас есть два предупреждения перед тем, как вы начнете:

Эти настройки следует менять очень осторожно, поскольку их изменение может привести к печальным последствиям. К счастью, исправить ситуацию легко – если поменяете какой-либо из параметров на «Да», а ресурс станет создавать нерабочие ссылки, просто снова поменяйте настройки на «Нет»

Немного ниже мы расскажем о настройке этих параметров, если их изменение привело к проблемам на вашем сайте.

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

По умолчанию установлено значение «Да», что очень хорошо.

Мы также видим параметр «Использовать перезапись URL». Здесь все чуточку сложнее. Вам необходимо произвести настройки под Apache-сервер. В случае с Windows IIS настройки будут сложнее. Первым делом перед тем, как вы обратитесь к пункту «Использовать перезапись URL», чтобы избавиться от index.php в URL-адресах, необходимо поменять название одного из ваших файлов.

Вы должны будете войти в вашу файловую систему Joomla. Искомый файл носит название htaccess.txt.

Вы должны найти его. Файл располагается в главном каталоге Joomla-ресурса, рядом с файлами configuration.php, readme.txt, index.php и так далее. Вам понадобится удалить расширение файла – .txt. Вы должны будете поставить точку в самом начале файла. Таким образом, имя файла поменяется с htaccess.txt на .htaccess. Этого достаточно для нормальной работы файла.

Теперь необходимо вернуться к меню «Настройки SEO». Вы должны перейти к пункту «Использовать кнопку перезаписи URL». Здесь можно удалить index.php из URL-адресов. Теперь благодаря настройке этих двух параметров вы получили более понятный и простой для запоминания URL-адрес

Наверняка вы обратили внимание и на другие пункты в настройках. В частности, у вас есть возможность добавления суффикса к URL (пункт «Добавить суффикс к URL»):

Честно говоря, мы не считаем этот суффикс полезным. При включении этого параметра к концу URL-адреса будет добавлен суффикс .html. Таким образом, адрес становится более сложным. При этом сайты уже давно не создаются на чистом HTML. Сомневаемся в полезности этого пункта.

Если вы создаете контент сайта на языке, использующем разные символы (не только A-Z), вам может понадобиться установить параметр «Псевдонимы Юникод» в «Да». Если же вы планируете использовать только буквы латинского (или большинства европейских языков), можно установить «Нет».

Итак, мы разобрались с тем, как сделать понятными URL-адреса для Joomla-ресурса. Если вы поменяете имя файла htaccess.txt на .htaccess и произведете настройки параметров, как было рассказано выше, получите красивые и простые URL-адреса для своего сайта, работающего на движке Joomla. Далее мы рассмотрим, как сделать дружественными URL ресурса, созданного на базе CRM (системы управления сайтом) WordPress.

HTML ссылки по видам

Ссылки на подключаемые ресурсы уже рассматривались ранее в материале «Основы HTML«. Эти ссылки создаются с помощью тегов <link> и <style>. Их задача — подключение внешних файлов.

Абсолютные

Абсолютные ссылки это такие ссылки в которых прописывается полный путь на ссылаемый документ. Например, сошлемся на Яндекс.

<a href="https://yandex.ru/" target="_blank">Яндекс</a>

Результат.

Не забываем, что атрибут говорит нам о том. что ссылка откроется в новом окне.

Относительные

Относительные ссылки это ссылки в которых прописывается относительный адрес на ссылаемый документ (относительно текущего домена). Например, в моем случае внутренней будет считаться ссылка вида:

<a href="/html-tekst/">Текст в HTML</a>

То есть, все что после относиться к текущему домену abuzov.com. Если перевести эту ссылку в абсолютную, то она примет следующий вид.

<a href="https://abuzov.com/html-tekst/">Текст в HTML</a>

При этом результат на моем сайте будет одинаков — вы попадете на страницу «Текст в HTML».

Атрибут target

Атрибут target используется для того, чтобы указать браузеру, где необходимо открыть веб страницу.
Следующий пример открывает документ в новом окне браузера:

<a href="http://yandex.ru" target="_blank">Поиск </a> 

Ниже представлены все значения этого атрибута:

Атрибут Значение

_blank
Загружает страницу в новое окно браузера.
_self
Загружает страницу в текущее окно. Это значение по умолчанию.

_parent
Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.

_top
Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

framename
Открывает ссылку в указанном фрейме.

Работа с фреймами будет рассмотрена позднее в статье учебника «HTML фреймы».

Когда изменять URL не стоит

Если ресурс имеет неплохие позиции, менять адреса на другие не стоит. Особенно, когда страниц, находящихся в индексе ПС (поисковых систем) много. Тем более не делайте этого сразу на всем сайте. Начните с нескольких статей, проследите тенденцию в вебмастере Гугла и Яндекса: улучшились позиции или нет. При положительном результате, постепенно, в несколько приемов, проделайте тоже самое с остальными url-ами.

Чтобы робот нашел страницы с обновленным адресом быстрее, отправьте их на переиндексацию в обоих системах (Seach Consol Google и Вебмастер Yandex). Для перенаправления старых урлов, которые со временем удаляют, на новые применяют 301 редирект. В этих целях новичкам удобнее использовать плагин. Ниже описано, как это сделать.

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

Сокращалка от Гугл – как использовать

Одним из наиболее известных сервисов, дающим возможность без труда из ссылки любой длины получить короткую и несложную, является goo.gl, предоставляемый Гуглом. Чтобы получить доступ к статистическим данным сокращенных адресов (сколько было совершено переходов по ним, из каких стран, где и когда упоминались и пр.), предварительно нужно войти в аккаунт Google. Там же и хранятся все созданные с помощью этого сервиса.

Чтобы сократить длинную ссылку goo.gl, следует выполнить следующие действия:

  1. Зайдите на сайт Гугл (можно просто ввести в поисковой строке браузера goo.gl, перейти на сайт и зайти в свой аккаунт).
  2. Перед пользователем появится поле. Ему нужно вставить в него свой оригинальный адрес и нажать «Shorten URL».
  3. Откроется окно, в котором буде готовая укороченная ссылка. Её можно сразу скопировать, а само окно закрыть

Пара простых действий – и всё готово. Как видно, сократить Гугл ссылку очень легко и удобно.

Практика написания хороших ссылок

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

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

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

Взгляните на этот пример:

Хороший текст ссылки: Скачать Firefox

Плохой текст ссылки: Нажми сюда, чтобы скачать Firefox

Советы:

  • Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
  • Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
  • Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
  • Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.

Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах одного сайта  (при ссылке на другие сайты необходимо использовать абсолютную ссылку):

  • Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
  • Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System (DNS; также прочтите Как работает web), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.

Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:

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

Посмотрите на примеры, чтобы увидеть, как добавить описание:

Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут , чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:

Что это такое и для чего нужен

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

Пример того, как выглядит url (урл) адрес

Наглядным примером может послужить вот такая строчка:

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

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

Структура

Для того, чтобы понять, как устроены URL адреса, нужно рассмотреть подробно их структуру. Для этого давайте еще раз обратимся к нашему сайту, который уже использовали в роли примера Выше. http://www.company.com/blog/page-name. Итак, если смотреть на эту строку, то можно разделить ее на несколько частей, которые выполняют свою функцию, итак:

  1. http – протокол сайта
  2. www.company.com – в нашем случае играет роль полного доменного имени, оно пишется в зависимости от названия сайта
  3. /Blog/ – Путь, который нужно проделать, чтобы найти этот файл. Иными словами – путь к файлу.
  4. Page.name – Имеющаяся информация о файле

Где находится

Существует достаточно много разных способов посмотреть URL адрес страницы. Если Вы обычный пользователь, который не особо разбирается в компьютерах, то просто не заморачивайте голову. Нажмите на поле адресной строки, у Вас выделится ссылка. Нажмите сочетание клавиш CTRL + C и скопируйте текст, либо проведите стандартную процедуру по копированию текста. Нажмите по выделенному тексту правой кнопкой мыши и нажмите на параметр «Копировать».

Если Вы более опытный юзер и Вам нужно скопировать URL адрес картинки, то кликните по ней правой кнопкой мыши и выберите пункт «Копировать URL картинки». Но, нужно помнить, что URL адрес имеют не только картинки или сайты, но и файлы. Для того, чтобы узнать и при надобности скопировать URL файла, нужно перейти в загрузки, кликнуть правой кнопкой мыши по интересующему Вас файлу и выбрать параметр «Копировать ссылку на загрузку». Таким образом становится понятно, что процесс стандартного копирования адреса – достаточно легкая процедура, с которой справится даже самые неопытный пользователь интернета.

Работа с параметрами запроса на сервере (PHP)

Задача была решена парой строчек кода на PHP.

Ниже код двух страничек, первая это эмуляция лендинга со ссылкой на эмуляцию страницы с формой, вторая это эмуляция страницы с формой.

Лендинг (index.php):

<?php
$queryStr = filter_input(INPUT_SERVER, ‘QUERY_STRING’);
$url = $queryStr ? ‘form.html?’ . $queryStr : ‘form.html’;
?>
<!DOCTYPE html>
<html lang=»ru»>

<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Лендинг</title>
</head>

<body style=»background-color: #f5f5f5″>
<div style=»width: 100%; max-width: 600px; margin: 100px auto; background-color: #ffffff; padding: 60px 40px; text-align: center;»>
<h1>Это лендинг</h1>
<p><a href=»<?= $url ?>» target=»_blank»>Это ссылка на страницу с формой</a></p>
</div>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php

$queryStr=filter_input(INPUT_SERVER,’QUERY_STRING’);

$url=$queryStr?’form.html?’.$queryStr’form.html’;

?>

<!DOCTYPE html>

<html lang=»ru»>

<head>

<meta charset=»UTF-8″>

<meta name=»viewport»content=»width=device-width, initial-scale=1.0″>

<title>Лендинг<title>

<head>

<body style=»background-color: #f5f5f5″>

<div style=»width: 100%; max-width: 600px; margin: 100px auto; background-color: #ffffff; padding: 60px 40px; text-align: center;»>

<h1>Этолендинг<h1>

<p><ahref=»<?=$url?>»target=»_blank»>Этоссылканастраницусформой<a><p>

<div>

<body>

<html>

Страница с формой (form.html):

<!DOCTYPE html>
<html lang=»ru»>

<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Страница с формой</title>
</head>

<body style=»background-color: #f5f5f5″>
<div
style=»width: 100%; max-width: 600px; margin: 100px auto; background-color: #ffffff; padding: 60px 40px; text-align: center;»>
<h1>Это страница с формой</h1>
</div>
</body>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!DOCTYPE html>

<html lang=»ru»>

 
<head>

<meta charset=»UTF-8″>

<meta name=»viewport»content=»width=device-width, initial-scale=1.0″>

<title>Страница с формой</title>

</head>
 

<body style=»background-color: #f5f5f5″>

<div

style=»width: 100%; max-width: 600px; margin: 100px auto; background-color: #ffffff; padding: 60px 40px; text-align: center;»>

<h1>Это страница с формой</h1>

</div>

</body>
 
</html>

Собственно решение в первом PHP-блоке:

<?php
$queryStr = filter_input(INPUT_SERVER, ‘QUERY_STRING’);
$url = $queryStr ? ‘form.html?’ . $queryStr : ‘form.html’;
?>

1
2
3
4

<?php

$queryStr=filter_input(INPUT_SERVER,’QUERY_STRING’);

$url=$queryStr?’form.html?’.$queryStr’form.html’;

?>

В первой строке, при помощи функции filter_input, получаем строку запроса из суперглобального массива $_SERVER.

Во второй строке, если строка запроса имеется, прикрепляем её к URL страницы с формой.

Получившуюся переменную $url выводим в атрибуте href ссылки.

Таким образом на страницу form.html стали передаваться UTM-метки, и CRM-система начала получать информацию о канале рекламы, с которого пришел тот или иной посетитель.

Решение, приведенное выше, далеко не универсально. Поскольку берутся все параметры запроса, а кроме UTM-меток, среди них, могут быть и другие параметры.

Стоит немного усовершенствовать код, чтобы брать только те параметры, которые нам нужны.

<?php
$validParams = [ // Допустимые имена параметров
‘utm_source’,
‘utm_medium’,
‘utm_campaign’,
‘utm_content’,
‘utm_term’
];
$queryStr = »;
$inputArray = filter_input_array(INPUT_GET); // Получаем параметры из массива $_GET
if ($inputArray)
{
foreach ($inputArray as $key => $value)
{
$key = strtolower($key);
if(in_array($key, $validParams)) // Проверка имени параметра на допустимость
{
$queryStr .= «$key=$value&»; // В цикле формируем строку с параметрами
}
}
$queryStr = rtrim($queryStr, ‘&’); //удаляем последний символ &
}
$url = $queryStr ? ‘form.html?’ . $queryStr : ‘form.html’;
?>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php

$validParams=// Допустимые имена параметров

‘utm_source’,

‘utm_medium’,

‘utm_campaign’,

‘utm_content’,

‘utm_term’

;

$queryStr=»;

$inputArray=filter_input_array(INPUT_GET);// Получаем параметры из массива $_GET

if($inputArray)

{

foreach($inputArrayas$key=>$value)

{

$key=strtolower($key);

if(in_array($key,$validParams))// Проверка имени параметра на допустимость

{

$queryStr.=»$key=$value&»;// В цикле формируем строку с параметрами

}

}

$queryStr=rtrim($queryStr,’&’);//удаляем последний символ &

}

$url=$queryStr?’form.html?’.$queryStr’form.html’;

?>

Зачем нужна нормализация URL-ов

Нормализация — это процесс модификации и стандартизации URL-адресов. Она помогает устранить дубликаты и предотвратить индексацию дублированных страниц поисковиками. Идея в том, чтобы все URL-ы были оформлены универсально. Например:

  • Ссылку на «/contacts.html» можно подвести под формат http://www.website.com/contacts.html
  • Ссылку HTTP://WWW.WEBSITE.COM/contacts.html следует нормализовать до http://www.website.com/contacts.html
  • Ссылку с косой чертой (/) https://www.example.com/trip/ можно переформатировать под URL без завершающей косой черты: https://www.example.com/trip
  • URL с двойной косой чертой http://www.example.com//path можно привести в порядок, используя одну косую черту: http://www.example.compath

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

  • ссылки с www и без префикса
  • HTTP и HTTPS

Бесплатный сервис 9tl.ru

Сервис 9tl.ru предоставляет бесплатное сокращение ссылок, удобным и доступным каждому находящемуся за компьютером. Он предоставляет самые разные возможности своим пользователям: гео таргетинг, девайс таргет, защита url паролем, изменение названия укороченной ссылки на какое-либо своё, предусматривающие срок годности ссылки и пр. Все возможности предоставляются после регистрации.

Чтобы получить сокращённый URL, необходимо выполнить такие же действия, как и на большинстве других подобных сайтов: зайти на сервис – вставить в поле длинный URL – нажать кнопку «Укоротить ссылку» – моментально получить короткий URL.

Как сделать ссылку на сайт

Для того, чтобы направить читателя на определенную страницу, нужно создать ссылку. Покажу на примере этой заметки. Для начала нужно выделить фразу или слово зажав левую кнопку мыши, после того, как текст выделится находим значок «вставить/ редактировать ссылку» в редакторе (Alt+Shift+A) и перед вами появится следующее диалоговое окно:

вам нужно будет заполнить следующие поля:

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

Теперь, если вы перейдете во вкладку «Текст» или  «html», то сможете увидеть, как созданная вами ссылка выглядит в формате html:

Все не так сложно, как кажется

Любая ссылка имеет вид:

<a href="адрес">анкор</a>

В данном html-коде «адрес» — это url страницы, на которую ведет данная ссылка (в моем случае на рисунке выше это , а анкор это фраза или слово, которое обозначает данную ссылку в статье (в моем примере выше, это заголовок «дубли страниц»). Вот как будет выглядеть ссылка в html:

<a href="https://rabotaiuspeh.com/dubli-stranic.html">дубли страниц</a>

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

Для этого случая используют атрибут:

target="_blank"

Он позволит открывать ссылку в новом окне, при этом предыдущая заметка также будет открыта в браузере. Вот как будет теперь выглядеть ссылка в html-формате:

<a href="адрес" target="_blank">анкор</a>

Но внешне в виде ссылки ничего не изменится абсолютно. Вот пример такой ссылки:

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

rel=”nofollow”

для того, чтобы они были скрыты от индексирования поисковиками.

Вот такой вид они имеют в html-формате:

<a href="адрес" rel=”nofollow” target="_blank"> анкор </a>

В данном случае ссылка не будет передавать вес вашей страницы (ТИЦ, PR)

Но ссылку такого вида нужно вставлять только вручную, перейдя в редакторе WordPress во вкладку «html» или «Текст» и в нужном месте добавить форму ссылки и вместо «адрес» и «анкор» вставить соответствующие значения. Вот как я вставил ссылку с анкором «Хостинг бесплатно для читателей блога»:

Эта ссылка находится между , остальные теги до и после ссылки добавляют элементы оформления ссылки — цвет, подчеркивание, расположение по центру и так далее, не обращайте на них внимание