Добавить ссылку

Вставляем ссылки на сайтУ многих начинающих блоггеров часто возникают вопросы по созданию ссылок на внутренние страницы своих блогов и на документы чужих сайтов. В принципе ничего сложного нет — берешь адрес своего поста или страницы внешнего веб-ресурса, прописываешь их в тег <a> и все вопросы решены. Но как показывает практика, правильно пользоваться элементом гипертекста не у всех получается, особенно с точки зрения поискового продвижения. В этом посте я расскажу о том, как вставить ссылку в текст любой страницы блога или сайта, познакомлю с различными составляющими тега <а>, а также дам ряд рекомендаций по использованию ссылок в seo-тексте. Прочитав этот пост, Вы сможете самостоятельно выполнить правильную взаимосвязь страниц.

Содержание

  • Как создать ссылку на сайт
  • Атрибуты для ссылок
    • Открытие ссылки в новом окне (target=»значение»)
    • Описание ссылки (title=»описание»)
    • Определение отношений между документами (rel=»значение»)

  • Как создать ссылку на сайт в WordPress
  • Рекомендации и советы по созданию ссылок
  • Бонус — моя схема работы с внутренними ссылками

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

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

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

где,

<a></a> — тег (элемент), обозначающий в коде ссылку;

адрес — это url документа сайта, который должен открыться при нажатии мышью перехода;

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

Код для линка на внутреннюю закладку страницы немного другой:

<a name=»идентификатор«>анкор</a>


где,

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

Итак, для создания ссылки блоггеру и веб-мастеру необходимо сообщить браузеру, что выделенный специальный кусочек текста (анкор) является ссылкой (за это отвечает тег <a>), а также указать url страницы для перехода (атрибут href). Адрес ссылки может быть относительным и абсолютным. Первый работает только относительно текущей страницы или корня веб-ресурса. Второй используется для перехода на страницы других сайтов и работает всегда.

Виды ссылок

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

к меню ↑

Атрибуты для ссылок


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

Атрибут для элемента <a> выглядит следующим образом:

<a имя атрибута=»значение» ></a>

Атрибут со значением всегда пишется одинаково: сначала идет имя атрибута, затем знак равенства и затем значение атрибута в кавычках (кавычки — важный момент в правильном написании атрибута!). Атрибутов для тега <a> может быть от одного и больше. Все они пишутся через пробел, а их последовательность не имеет значения.

к меню ↑

Открытие ссылки в новом окне (target=»значение»)

Когда посетитель приходит на Ваш блог или сайт, он перед собой видит только одну страницу.
ли он захочет перейти на другой документ веб-ресурса (кликнув по ссылке), то вторая страница может появиться как в том же окне браузера, так и в новом. Для чего надо новое окно? Во-первых, чтобы пользователю было удобно и просто искать информацию по Вашему блогу. Согласитесь, имея стартовую страницу всегда открытой, посетитель всегда может перейти в ней на интересующий его документ по ссылке. Ему не надо все время искать ссылку на первую страницу, чтобы опять возобновлять свой поиск. Во-вторых, когда посетитель видит выбранный им новый документ Вашего блога в новом окне, он полностью на него переключается — читает информацию, смотрит картинки. Его мозг занят новым материалом, поступают новые данные. И обычно, когда открытый документ заинтересовывает его, посетитель блога может очень быстро забыть про первоначальную страницу. И если этот новый документ не открыт в новом окне, то есть вероятность, что он не вернется на прошлую страницу и не возобновит свой поиск. А значит он будет меньше находится на Вашем сайте, а с точки зрения поисковых систем это ухудшает поведенческие факторы.

В языке HTML для атрибута target есть ряд значений. Для эффективного и удобного изучения материалов блога, я рекомендую пользоваться значением _blank. Именно оно позволяет новый документ сайта открыть в новом окне:

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

к меню ↑

Описание ссылки (title=»описание»)


Если посетитель видит линк в тексте, он делает свой выбор — кликнуть по ней или читать текст дальше. Так как Вы ставите ссылки на своем блоге для разных целей (повышение популярности сайта, усиление продвигаемых страниц, улучшение метрик посещаемости и т.д.), то Вам важно, чтобы читатель обратил на них свое внимание. Благодаря анкору ссылки посетитель видит ее тему, но не более того. Потому что крайне сложно впихнуть в анкор описание той страницы, по которой будет осуществлен переход, не искажая текст предложения. Для усиления привлекательности ссылки существует атрибут title. Он описывает содержимое тега <a> в виде всплывающей подсказки, которая появляется при наведении курсора мышки на ссылку:

<a href=»адрес» title=»текст с описанием ссылки«>анкор</a>

А вот так выглядит этот атрибут в действии:

Атрибут title в действии

к меню ↑

Определение отношений между документами (rel=»значение»)

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


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

<a href=»адрес» rel=»nofollow«>анкор</a>

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

<a href=»адрес» rel=»sidebar«>анкор</a>

На деле вид ссылки со значением sidebar получается следующий (при нажатии на переход):

Значение sidebar атрибута rel

к меню ↑

Как создать ссылку на сайт в WordPress


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

1. Зайдите в редактор с уже открытым постом или статьей Вашего блога. Выделите текст будущей ссылки (анкор) в нужном предложении текста и нажмите кнопку на панели (для примера я взял старый пост своего блога):

Добавить ссылку

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

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

4. Если Вы желаете, чтобы после нажатия мышкой по созданной ссылке читатель увидел новый документ в новом окне, отметьте соответствующее поле. Далее жмете кнопку «добавить ссылку»:


Как вставить ссылку на сайт в WordPress

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

Готовая ссылка после вставки

Если Вы хотите добавить в новую ссылку еще несколько атрибутов, то Вам необходимо зайти в том же редакторе во вкладку «HTML» и вручную написать недостающие описания элементов. Например, для моего примера в созданный линк я хочу добавить атрибут rel=»nofollow». Открываю редактор, нахожу новую ссылку и вставляю заданный атрибут тега <a>:

Вставляем новый атрибут rel

к меню ↑

Рекомендации и советы по созданию ссылок


Используйте изображение как ссылку. Кроме обычного текста на странице в качестве линка можно использовать любую картинку. Для этого нужно вместо анкора вставить тег картинки <img>:

<a href=»адрес«><img src=»адрес картинки«></a>

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

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


Цените терпение посетителей своих блогов. Если документ, на который ссылается Ваш текст, большой по объему (длинная статья, большая картинка, тяжелый файл для скачивания), обязательно предупредите посетителя. И ему будет приятна забота, и Вы не потеряете читателя.

Проверяйте ссылки на внешние документы. Перед тем, как ссылаться на страницу чужого сайта, убедитесь в его благонадежности. Проверьте его на вирусы, просмотрите наличие платных переходов, убедитесь в отсутствии на нем спама и наличия фильтров. Если Вы проморгаете ГВС (говносайт по простому) и дадите ссылку на него, то после индексации ссылки поисковым роботом есть шанс получить санкции от поисковых систем. Если Вам все же нужно ссылаться на подозрительный документ, используйте атрибут rel со значением nofollow.

Удаляйте битые ссылки. Со временем, ссылки на различные документы (как на Вашем блоге, так и на чужих сайтах) могут вести в никуда — страницы веб-ресурсов могут быть удалены автором (из-за ненадобности, в связи с изменением структуры, с переездом на новый сайт, потеря актуальности текста этих страниц и т.д.). Ежемесячная проверка всех ссылок Вашего блога сэкономит Вам нервы и время. В качестве инструмента для проверки битых ссылок могу порекомендовать бесплатный сервис Broken link checker, платную программу Page Weight или бесплатную Xenu Link Sleuth.

Уделите особое внимание анкорам. Текст ссылки — это самый важный элемент с точки зрения внутренней перелинковки любого сайта. Перечислю самые важные моменты:

  • создавайте информативные анкоры — не стоит злоупотреблять в текстах ссылок фразами «тут», «здесь», «статья» и т.д. Для любой ссылки важна полезность и естественность. Если анкор сделать не интересный и пустой, никто из читателей не будет кликать по переходу.
  • пишите краткий, но точный анкор. Масло масленное хорошо тогда, когда от времени зависит результат — чем больше минут — тем больше результат. Но не для ссылок. Никто не будет читать анкоры длинной в абзац — у читателя или терпение лопнет, или он начало текста перехода забудет и не примет решение на переход;
  • придерживайтесь стандартов при оформлении анкоров. Почти всегда люди идут по наименьшему сопротивлению — так устроен наш мозг, который любой ценой бережет нашу энергию. Поэтому привычка в этом случае играет положительную роль, а значит оформление ссылок должно быть стандартным. Не надо придумывать новые варианты отображения анкоров, не теряйте линию подчеркивания под ссылками, не делайте цвет их текста таким же, как и буквы постов;
  • каждый анкор должен быть уникальным. Не ленитесь придумывать каждый раз новый текст ссылок. Не идите по стопам горе-сеошников, которые не заморачиваются и везде не продвигаемые страницы ставят одни и те же анкоры. Они склеиваются — поисковые системы все видят. 🙂

к меню ↑

Бонус — моя схема работы с внутренними ссылками

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

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

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

С уважением, Ваш Максим Довженко

www.workformation.ru

Где можно разместить ссылку на сайт бесплатно?

В начале хочу отметить один интересный момент: даже если ссылка закрыта в nofollow или идет через редирект, то это еще не означает, что такая ссылка нам не нужна.

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

Как узнать, полезна будет та или иная ссылка для сайта или нет? Тут все просто: если ссылку фиксирует Яндекс Вебмастер, то значит ссылка хоть немного, да полезна. И мы берем этот ресурс на карандаш, чтобы потом еще не раз там оставлять ссылки на свой сайт.

бесплатные ссылки

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

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

1. Бесплатные ссылки с блог-хостингов

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

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

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

польза перелинковки

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

Теперь список сайтов, где можно завести блог, сразу буду писать, открыта ссылка или нет. Все эти блоги Яндекс кушает с удовольствием!

subscribe.ru— можно создать свою группу, люди там активны. Но можно и делать анонсы в чужие, уже раскрученные группы. Ссылки тут ОТКРЫТЫ.

ucoz.ru — бесплатный и очень известный хостинг блогов, который в свое время даже купил проект narod.ru у Яндекса. Ссылки ОТКРЫТЫ.

www.liveinternet.ru — тоже очень известный ресурс, на котором можно создать блог. Пользуется большой популярностью у русскоговорящих женщин. Ссылка открыта, хотя в моем журнале идет через редирект — пока не разобрался почему… Можно добавлять других в друзья, это даст дополнительный трафик. Статьи лучше писать под аудиторию.

blogspot.com— блоги от Google, очень популярны во всем мире. Ссылка ОТКРЫТА, плюс еще в том, что если будет нормальный трафик, то можно подрабатывать и на размещении google adsense.

pikabu.ru — очень популярный ресурс с посещаемостью 500.000 в день, и хотя ссылка ЗАКРЫТА, Яндекс ее учитывает, да и трафик можно получить очень хороший.

fotokto.ru — социальная сеть для фотографов. Можно создать свой блог и размещать там статьи ПО ТЕМЕ. Ссылка там ОТКРЫТА.

www.diary.ru — очень старый сервис дневников, Яндекс его очень любит. Можно сделать трансляцию RSS ленты в свой дневник, ссылки ОТКРЫТЫ. Но лучше писать нормальные тексты, а лучше создать группу и набирать туда подписчиков.

maxpark.com— позиционирует себя как социальная сеть для взрослых, раньше я там часто проводил время. Можно создать свой блог и сообщество, ссылки ОТКРЫТЫ.

tumblr.com — популярный во всем мире сервис личных блогов. И хотя русскоязычных там не очень много, но ссылки там ОТКРЫТЫ и можно под одним аккаунтом создать несколько блогов. (теперь ссылки через редирект)

www.megaindex.org — социальная сеть для вебмастеров, можно вести свой блог, ссылка закрыта.

[urlspan]blogs.sysadminz.ru[/urlspan] — тут можно писать статьи на компьютерную тематику, ссылка ОТКРЫТА.

grabr.ru — еще одна площадка для вебмастеров, где можно оставить анонс на свою статью. Ресурс очень заспамлен, так как ссылки ОТКРЫТЫ.

www.youtube.com — всем известный видео хостинг, в подписи к видео можно ставить ссылку, Яндекс ее видит, хотя ссылка закрыта.

spooo.ru — что-то вроде социальной сети для интернет бизнесменов, можно создавать свои блоги, ссылки ОТКРЫТЫ.

www.pinterest.com— хотя это больше похоже на социальную сеть, все же я отнес этот ресурс к блогам, так как ссылки НА ФОТО тут ОТКРЫТЫ!

wordpress.com — да, это он, родимый, и тут тоже можно создать любое количество блогов, и ссылки с них ОТКРЫТЫ.

livejournal.com — очень популярный в России хостинг блогов, на бесплатном аккаунте ссылка закрыта, на платном ОТКРЫТА. Но даже закрытая ссылка учитывается, так что иметь там дневник очень полезно.

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

2. Бесплатные ссылки с форумов

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

И хотя ссылки на форумах часто закрыты, но поисковые системы их учитывают. Очень интересный способ оставить ссылку на свой сайт НЕЗАМЕТНО для модераторов — это сделать свой небольшой фотохостинг и загружать фотографии на форум из него — получаете открытую ссылку на свой сайт.

К тому же, если вы будете писать умные вещи, то получите новых читателей на свой блог, а такие целевые посетители САМЫЕ ЦЕННЫЕ. Не буду писать список, так как тематика у всех разная, но приведу в пример лишь один форум:

rutracker.org — самый популярный торрент трекер, и ссылка с него ОТКРЫТА.

3. Бесплатные ссылки с социальных сетей

Хотя в большинстве сетей ссылки закрыты, с хороших прокачанных аккаунтов ссылки очень ценятся. Вот социальные сети, ссылки с которых учитывает Яндекс:

twitter.com — ссылки с твиттера не всегда учитываются, лучше писать уникальные твиты, а еще лучше, когда вам делают ретвит. Прокачивайте свой аккаунт и польза будет точно.

plus.google.com (скоро закрывается сеть) — ссылки с этой сети тоже кушает Яндекс, хотя и тут лучше писать хорошие уникальные анонсы, тогда толк будет.

vkrugudruzei.ru — не такая популярная сеть, как другие, но ссылки с него моментально влетают в индекс.

otvet.mail.ru — сервис mail.ru,  с самих блогов ссылки Яндекс не видит, но вот их ответов видит прекрасно. Можно самого себя спрашивать, и самому отвечать. Но ссылки порой модераторы удаляют.

my.mail.ru/community — а вот из сообществ mail.ru хоть ссылка и через редирект, а Яндекс ее видит.

www.facebook.com — ссылки видит, но нужно иметь или хороший аккаунт, или писать уникальные тексты, копипаст не видит.

А вот ВКОНТАКТЕ я так и не нашел в Яндекс вебмастере, хотя имею несколько пабликов, видимо Яндекс оттуда ссылки не кушает. Но зато это одна из самых больших социальных сетей в СНГ.

Кстати! Ссылки в прокаченных аккаунтах в Facebook, Twitter и Вконтакте можно быстро разместить при помощи SeoPult. Бюджет никто не навязывает: убираете дорогие размещения, оставляете только доступные по цене.

Регистрируетесь, указываете адрес сайта, в настройках источников ссылок ставите галочку «социальные сети» и запускаете проект. Далее смотрите, где разместились посты, какой эффект дают. Все удобно, прозрачно.

zmoe.ru

В последней версии WordPress ссылки можно вставлять еще проще — копируете адрес с ссылкой, набираете на странице или записи текст, который должен стать ссылкой, выделяете его мышкой и нажимаете сочетание клавиш «Ctrl»+»V», к выделенному тексту автоматически привяжется ссылка.

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

Ниже описаны стандартные действия и дополнительные возможности при размещении ссылок.

  • Как вставить ссылку в тексте страницы или записи
  • Якоря

Как вставить ссылку в тексте страницы или записи

1. Поставим курсор в ту часть текста, куда нужно вставить ссылку

Добавить ссылку

2. Набираем название ссылки и выделяем его курсором мышки

3. На панели инструментов нажимаем кнопку  Вставить/изменить ссылку

Добавить ссылку

4. В появившемся диалоге в поле URL набираем или вставляем адрес ссылки

5. Нажимаем кнопку Добавить ссылку
Добавить ссылку

Примечание: Если вы хотите, чтобы ссылка открывалась в новой вкладке браузера, то поставьте галочку в поле «Открывать в новом окне/вкладке».

В результате в тексте раздела получаем ссылку:

Добавить ссылку

Также можно размещать ссылку с помощью специального тега <a href=""></a>.

Стандартный код ссылки выглядит так:

<a href="http://site.ru">Текст ссылки</a>

Этот код можно разместить в режиме редактирования страницы/записи на вкладке «Текст».

Также этот код можно использовать для размещения ссылки в сайдбаре с помощью виджета «Текст».

Параметры:

http://site.ru — вместо этого адреса вставляйте нужную ссылку, протокол http:// в ссылке обязательно должен присутствовать.

Текст ссылки — вместо этого текста напишите свой, он будет отображаться на вашем сайте.

target="_blank" — с помощью этого параметра ссылка будет открываться в новом окне браузера. Код ссылки будет выглядеть примерно так:
<a href="http://site.ru" target="_blank">Текст ссылки</a>

Якоря

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

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

<a href="#tekst">Текст ссылки</a> — ссылка на якорь

<a name="tekst"></a> — якорь, нужно вставлять в то место на странице, куда будет совершен переход по ссылке.

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

Пример кода якорей:

<a href="#tekst1">Текст ссылки1</a>  <a href="#tekst2">Текст ссылки2</a>  <a href="#tekst3">Текст ссылки3</a>  <a href="#tekst4">Текст ссылки4</a>    <a name="tekst1"></a>  много текста    <a name="tekst2"></a>  много текста    <a name="tekst3"></a>  много текста    <a name="tekst4"></a>  много текста

Если нужно поставить ссылку на якорь с другой страницы сайта или добавить якорь в пункт меню нужно прописать полную ссылку на страницу и после слэша добавить якорь. К примеру: http://support.prihod.ru/docs/napisanie-i-redaktirovanie/kak-vstavit-ssylku-v-tekste-stranicy-ili-zapisi/#link2

 

Просмотрено (92867) раз

support.prihod.ru

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

Ссылки добавляются как при создании новых страниц, так и при редактировании уже существующих.

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

Затем нажмите на кнопку «Вставить/ Редактировать ссылку» (она напоминает перевернутую восьмерку со знаком плюс).
Добавить ссылку

У вас открылось окно, в которое нужно будет вставить ссылку.
Добавить ссылку

Скопируйте адрес той страницы, на которую должна вести ссылка.

Если вы ссылаетесь на какую-либо страницу чужого сайта, то скопируйте ее адрес полностью.
Добавить ссылку

Если это другая страница вашего же сайта, то скопируйте не весь адрес целиком, а только ту часть, которая идет после доменного имени. Например, если у вас сайт nubex.ru, и вы хотите сослаться на страницу http://nubex.ru/ru/support/faq/library/picture/, скопируйте то, что идет после .ru — /ru/support/faq/library/picture/
Добавить ссылку

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

Если ваша ссылка ведет на чужой сайт, можно сделать так, чтобы она открывалась у пользователя в новой вкладке; при этом он посмотрит ссылку, но не уйдет с вашего сайта. Чтобы это сделать при добавлении ссылки откройте вкладку «Цель» и выберите там пункт «Новое окно».
Добавить ссылку

Если же ссылка ведет с одной страницы вашего сайта на другую, то открывать ее в новой вкладке НЕ нужно (то есть, при добавлении ссылки вкладку «Цель» не открываем и ничего там не указываем).

Когда вы добавили ссылку, нажмите кнопку «ОК».
Добавить ссылку

Ссылка добавлена к тексту. Осталось сохранить страницу, чтобы изменения отобразились на сайте.
Добавить ссылку

nubex.ru

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

Гиперссылка (англ. hyperlink) — часть веб-документа, которая ссылается на другой элемент на этой же странице, либо на любой другой. Объектами и элементами, куда ссылается гиперссылка могут быть: приложение, файл, каталог, заголовок, примечание, текст, изображение и др. Располагаться объекты могут как на локальном диске или компьютерной сети, так и в интернете.

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

Давайте перейдем непосредственно к действиям (коду).

Как вставить ссылку в HTML

Для того чтобы разместить ссылку на главную страницу сайта, используйте следующий HTML-код:

Результат:
Blogwork — Главная страница
Ссылка на внутреннюю страницу сайта в виде html-кода выглядит так:

Результат:
Blogwork — Внутренняя страница
Для того чтобы вставить ссылку на pdf-документ, html-код выглядит так:

Результат:
Blogwork — PDF
Для того чтобы вставить ссылку на картинку, html-код выглядит так:

Результат:
Blogwork — PNG
Обратите внимание на параметр href. В каждой из ссылок он включает в себя адрес — местонахождение той страницы (ее части, или файла), куда попадет пользователь, нажав на эту ссылку.

Анкор, видимая часть ссылки — параметр, который заключен внутри тегов <a>АНКОР</a>. Это может быть текст, а может быть и картинка (кнопка). Текст в качестве анкора в примерах выше вы уже видели, давайте перейдем к кнопкам-картинкам.

Читайте также другие инструкции:

  • Что такое HTML. Пояснение для новичков
  • Как вставить картинку, фотографию, изображение в HTML — вставка картинки это просто!
  • Как установить счетчик посещений на сайт? Устанавливаем счётчик LiveInternet, Яндекс.Метрика и Google Analytics: https://blogwork.ru/kak-ustanovit-schetchik-poseshhenij-na-sajt/

Как вставить картинку с ссылкой или ссылку на картинку

Чтобы вставить ссылку на сайт в виде изображения или кнопки, вам потребуются знание того как вставить картинку в html. Порядок действий такой: вставляем картинку в HTML и затем оборачиваем ее ссылкой, то есть помещаем тег img (который запрашивает картинку) внутри тега <a href=»ССЫЛКА»><img src=»ПУТЬ К КАРТИНКЕ»></a>

Да, вставить ссылку в картинку очень просто:

Как вставить в html ссылку

Ну а если вы хотите вставить ссылку не на картинку, а на другую статью на сайте, значит замените содержание параметра href на нужное — поместите туда ссылку на статью.

Более того, в тег a можно одновременно поместить и картинку, и текст:

Как вставить в html ссылкуТекст для картинки

БОНУС №1 — ссылаемся на элемент страницы (подзаголовок)

Для осуществления навигации внутри одной страницы сайта, вы можете разметить ее якорями и ссылать на них. Для разметки используйте тег name или id (обратите внимание, id также может относиться к css-стилям и вам нужно использовать уникальные id, чтобы к заголовкам не присваивались стили; или наоборот — если есть такая потребность). Я разметил три первых подзаголовка H2 тегом name, присвоил им значения «1», «2», «3» соответственно.

Теперь нужно сослаться на них. Для примера сделаем это следующим образом:

Результат:

Что такое ссылка
Как вставить ссылку в HTML
Как вставить картинку с ссылкой или ссылку на картинку

Вы можете попробовать нажать любую из трех верхних ссылок и браузер переместит вас к соответствующему заголовку, а адрес страницы в браузере изменится на https://blogwork.ru/kak-vstavit-v-html-ssylku/#1. Не бойтесь, это не страшно. Есть анкоры которые используются в браузерах по умолчанию, например нажатие по ссылке #top автоматически прокрутит страницу в самый вверх — в начало сайта.

БОНУС №2 — добавление в HTML ссылки на электронную почту

Код:

Результат:

Почта Центробанка РФ

Бонус №3 — задаем параметр для открытия ссылки в новой вкладке

Для этого используйте атрибут _blank в ссылке a, например:

Что получится:

Ссылка на главную страницу откроется в новой вкладке

В визуальном редакторе Вордпресса для этого можно просто отметить галочкой соответствующий пункт после нажатия кнопки «Вставить ссылку».

Бонус №4 — как задать заголовок для ссылки

Для того чтобы помимо названия у ссылки был свой заголовок (отображается при наведении мышью) — используйте атрибут title, например:

Результат:

Главная страница

И снова в редакторе Вордпресса есть специальное поле, куда можно вписать заголовок ссылки.

На этом все — удачного размещения ссылок! Если что-то не получается, спрашивайте в комментариях.

blogwork.ru

Как сделать ссылку в HTML, примеры

Чтобы создать ссылку используется тег <a>. Данный тег имеет определенные атрибуты:

1. HREF — отвечает за то, куда должна вести ссылка. Стандартная ссылка задается следующим образом: <a href=»адрес ссылки»>Текст ссылки</a>.

2. TARGET — отвечает за то, в каком окне будет открываться документ. По умолчанию новый документ открывается в текущем окне браузера. Атрибут «target» позволяет открывать ссылку в новом окне браузера. Данный атрибут имеет следующие параметры:

  • _blank — загружает страницу в новом окне;
  • _self — загружает страницу в текущем окне;
  • _parent — загружает страницу во фрейм-родитель;
  • _top — отменяет все фреймы и загружает страницу в новом окне.

3. NAME — используется для перехода к конкретной области внутри страницы. После символа «решетка» указывается в кавычках ключевое слово (закладка или метка). Для перехода к этой метке используется ссылка, в которой данная метка прописывается.

Рассмотрим, как сделать ссылку в HTML на примерах:

Пример 1. Внешняя ссылка.

<html> <head> <title>Пример внешней ссылки</title> </head> <body> <p><a href="//siteblogger.ru">Перейти на сайт</a></p> </body> </html>

В данном примере ссылка называется «Перейти на сайт», она ведет на мой сайт.

Пример 2. Внешняя ссылка, открывающаяся в новом окне.

<a href="//siteblogger.ru" target="_blank" title="Текст подсказки для ссылки">Перейти на сайт</a>

В данном примере ссылка будет открываться в новом окне. При наведении на ссылку будет появляться текст подсказки, прописанный в «title».

Пример 3. Внутренняя ссылка.

<a href="/uroki-wordpress/wordpress-lessons.html">Бесплатные уроки по WordPress</a>

Пример 4. Изображения в качестве ссылок.

<html> <head> <title>Пример изображения в качестве ссылки</title> </head> <body> <p><a href="kak-sozdat-sait.html"><img src="Рисунок.jpg" width="200" height="120"></a></p> </body> </html>

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

<html> <head> <title>Пример ссылки на определенное место на странице</title> </head> <body> <p><a href="list">Перейти к тексту</a></p> <p>Текст страницы...</p> <a name="#list"></a> </body> </html>

В данном примере на странице ставится метка «list» с помощью атрибута «name». Ссылка на эту метку обеспечит переход в определенную область страницы.

Пример 6. Ссылка на скачивание файла.

<a href="distr.rar" target="_blank">Скачать файл</a>

Пример 7. Ссылка на электронную почту.

<a href="mailto:test@mail.ru">Написать письмо</a>

Можно задавать цвет ссылок с помощью атрибутов, которые указываются в теге «body» в качестве параметров. Рассмотрим эти атрибуты:

  • link — не посещенная ссылка, по умолчанию она отображается синим цветом;
  • alink — активная ссылка, по умолчанию имеет красный цвет;
  • vlink — посещенная ссылка, имеет по умолчанию фиолетовый цвет.

Пример 8. Задание цвета ссылкам.

<html> <head> <title>Пример задания цвета у ссылок</title> </head> <body link="blue" vlink="black" alink="red"> ... </body> </html>

Таким образом, мы разобрались по какому принципу создаются ссылки в HTML. Ссылкам можно придавать определенные стили оформления. Про стили ссылок в CSS можно посмотреть в уроке, перейдя по ссылке.

siteblogger.ru

Где оставить ссылку на сайт бесплатно

1. Внутренние ссылки

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

2. Ссылки с комментариев

  • ecofriendly.ru
  • www.tu-tu-tu.com
  • seoonly.ru
  • www.inyemysli.ru
  • blog.dimok.ru
  • blog.sjinks.pro
  • dimax.biz
  • helplamer.ru
  • kalachov.com/blog/
  • romanorlovblog.ru

3. Ссылки с форумов

Форумы. Наверняка, вы знаете или наслышаны о том, что в форумах можно размещать бэклинки на сайт в профиле и подписях к сообщению. Чем в большем количестве форумов вы зарегистрированы, тем больше получите внешних ссылок на сайт бесплатно. От вас нужна регистрация на форуме и указание в профиле, в строке «Веб-сайт» ссылки, а в строке «Описание» или «Увлечения» прописать около ссылочный текст с ключевыми словами для вашего ресурса. Например:

Ссылка: DmitriyZhilin.ru

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

Для своего ресурса придумайте подходящее описание и вперед.

После этого, следует добавить адрес профиля в Аддурилку Яндекса и Google, чтобы поисковые системы проиндексировали ресурс. Желательно подбирать форумы близкой тематики, но это не принципиально.

Имейте ввиду, что на многих ресурсах периодически проводят чистку пустых профилей (не оставивших ни одного комментария), поэтому, оставьте 2-3 сообщения в разных темах.

4. Социальные сервисы

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

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

Социальные сети:

  • Plus.google.com;
  • Facebook.com;
  • Twitter.com;
  • Vk.com.

Социальные сервисы (эти ссылки открыты для индексации):

  • Subscribe.ru;
  • Postrp.ru;
  • Grabr.ru.

Социальные закладки:

  • Moemesto.ru;
  • Memori.ru;
  • Bobrdobr.ru.

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

5. Ссылки с каталогов сайтов и статей

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

Каталоги статей:

  • nofollow.ru;
  • pisali.ru;
  • каталог-статей.рф;

Можно так же внести свой ресурс в каталог  Яндекс и Google (DMOZ), но в первом случае, у вас вряд ли получится бесплатно, а во втором, придется ждать больше года.

6. Ссылки с сервисов и рейтингов

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

  • blograte.ru;
  • epochta.ru;
  • xtool.ru
  • ratingblogs.com.

7. Ссылки с RSS каталогов

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

8. Бесплатные доски объявлений

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

9. Ссылки в гостевых постах

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

10. Обмен ссылками

Эффективный способ, только внешний link вы получите взамен на размещения чужого link’а в своем ресурсе. Обменивайтесь только с тематическими ресурсами, так как только такие ссылки будут выглядеть естественными и вы сможете получить по ним живые переходы.

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

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

И, главный совет на сегодня, не используйте одинаковые анкоры, так как они вызовут нехорошие подозрения у поисковых систем.

dmitriyzhilin.ru

Обычная ссылка и гиперссылка

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

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

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

Другим же делом является гиперссылка, которая по клику перенаправляет на другой документ в интернете, как внутренний (в пределах того же сайта), так и внешний (другой сайт). Пример такого линка можете видеть ниже. Попробуйте нажать на ссылку.

>>Кликните сюда

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

Ссылка создается простым тегом <a>, внутри которого имеется сам адрес, куда нужно произвести перенаправление пользователя, а также анкор ссылки (в примере выше анкором служит фраза «кликните сюда»), который указывает текст линка, поясняющий, что вы получите, когда перейдете по данному адресу.

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

«>

Внутри ссылочного тега <a> также имеется атрибут для открытия страницы в новой вкладке.

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

Если же вы используете внешние ссылки, то желательно закрывать их в атрибут nofollow.

К ссылке можно добавить атрибут title, который является заголовочным тегом и даем поисковым системам понять, куда ведет ссылка. Также данный тег отображается (если прописан), когда наводим на ссылку в виде всплывающей подсказки.

«>

Желательно добавлять тег title, чтобы посетители видели эту подсказку при наведении и понимали, куда переходят. Делается это просто, внутри открывающего тега <a>, как на примере ниже.

При использовании движка, например WordPress, добавление ссылки на сайт происходит очень просто без каких либо правок в html режиме. В редакторе записи имеется специальная иконка со значком соединения.

«>

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

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

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

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

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

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

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

Ссылка картинка

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

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

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

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

На практике это будет выглядеть следующим образом.

Как видим, внутри открывающего и закрывающего ссылочных тегов имеется код изображения, который также имеет свои особенности. В нем нужно прописать все тот же тег title, указать путь к изображению на хостинге или на другом ресурсе. Также стоит указать размеры изображения (width — ширина, height — высота). И обязательно стоит прописывать атрибут alt, который служит описанием к изображению. Если все пропишите, то оптимизация изображений будет на уровне.

Вот, как это выглядит все в html режиме. Код я разбил на 3 части, чтобы структура линка была более понятной (изображение кликабельное).

«>

Сложность тут составляет лишь правильно прописывать код картинки, который используется в качестве анкора.

kostyakhmelev.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector