Как добавить полезную ссылку в блог

В предыдущих публикациях «Эффектное оформление ссылок» и « красивые радужные ссылки» я уделила внимание оформлению и дизайну ссылок. Сегодня опишу как сделать кликабельную, активную ссылку в Blogger (Blogspot).

Содержание статьи:

Как сделать ссылку словом
Как вставить ссылку в комментарий
Как сделать картинку ссылкой
Cсылки внутри страницы

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

Но часто новички забывают об оптимизации сайта, индексации, правильной перелинковке и особо не обращают внимание на ошибки разметки и ошибки html кода шаблона.

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

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

Разберем на реальном примере:
У меня статья «Как добавить Ping вручную в Yandex и Google » с подробными инструкциями и внешними ссылками.

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

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

Как сделать ссылку словом

Ссылки или же гиперссылка
Ссылки бывают двух видов: анкорные и безанкорные.

В редакторе сообщений Blogger на вкладке Создать выделяем слово или фразу, которое будет ссылкой и нажимаем вверху редактора на иконку Ссылка.

Копируем в адресной строке браузера адрес веб-ресурса и вставляем в поле » На какой URL должна указывать эта ссылка?»

Как сделать кликабельную, активную ссылку в Blogger (Blogspot) Как сделать ссылку в Blogger (Blogspot)

Отмечаем как на скриншоте. Вторая галочка только для внешних ссылок. Добавить атрибут rel=nofollow (подробнее…) этот атрибут дает запрет поисковым системам на индексацию ссылки. Внутренние ссылки закрывать от индексации не надо.

Вот так дорогие мои, теперь мы знаем как вставить ссылку словом в сообщение блога и как открыть внешнюю ссылку в новом окне браузера в Blogger (Blogspot).

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

Конечно же и сейчас я зашла к ним в гости, что бы посмотреть как открываются у них внутренние ссылки. На сайте https://shpargalkablog.ru/ открываются в том же окне, а на https://ktonanovenkogo.ru/ внутренние ссылки открываются в новом окне браузера.

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

Будь вместе с Я Блоггер

Как добавить полезную ссылку в блог

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не
персональных данных согласно действующей на сайте — политике конфиденциальности.

Нажимая на кнопку «Отправить«, «Подпишись» или «Комментировать» Вы соглашаетесь с пользовательским соглашением.

Источник

Сегодня речь пойдет о ссылке

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

Зачем нужна ссылка и какие функции она выполняет.

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

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

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

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

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

Разные скрипты по разному взаимодействуют с контентом. Как это может повлиять на SEO.
Есть скрипты (зависит от шаблона), которые убирают часть текста таким образом, что его не видят ни пользователи, ни поисковые боты. А есть скрипты, которые скрывают текст для читателей, тогда как поисковые боты могут и дальше его обрабатывать. Одним из главных правил продвижения в поисковых системах особенно в Гугл является то, что и ботам и читателям контент должен преподноситься в одинаковом виде, не рекомендуется скрывать, что-то от читателя и оставить это доступным для бота и наоборот. Такая тенденция может негативно повлиять на позиции сайта в поисковой выдаче.

Как добавлять ссылку Читать Дальше в блоге на Blogger.

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

Как добавить автоматическую ссылку читать дальше

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

1) В панели управления откройте раздел Тема здесь открываем редактор Изменить HTML перед закрывающим тегом </head> добавьте код:

JS<script type=’text/javascript’>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf(«<«)!=-1)
{
var s = strx.split(«<«);
for(var i=0;i<s.length;i++){
if(s[i].indexOf(«>»)!=-1){
s[i] = s[i].substring(s[i].indexOf(«>»)+1,s[i].length);
}
}
strx = s.join(«»);
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=’ ‘ && strx.indexOf(‘ ‘,chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+’…’;
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = «»;
var img = div.getElementsByTagName(«img»);
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = ‘<span class=»posts-thumb» style=»float:left; margin-right: 5px;»><img src=»‘+img[0].src+'» width=»‘+img_thumb_width+’px» height=»‘+img_thumb_height+’px»/></span>’;
summ = posts_thumb_sum;
}
var summary = imgtag + ‘<div>’ + removeHtmlTag(div.innerHTML,summ) + ‘</div>’;
div.innerHTML = summary;
}
//]]>
</script>

2) Дальше найдите в шаблоне строку <data:post.body/> замените ее следующим кодом:

HTML<b:if cond=’data:blog.pageType != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<div expr:id=’"summary" + data:post.id’><data:post.body/></div>
<script type=’text/javascript’>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class=’readmore’ style=’float:right’><a expr:href=’data:post.url’>Читать Дальше »</a></span></b:if></b:if>
<b:if cond=’data:blog.pageType == "item"’><data:post.body/></b:if>
<b:if cond=’data:blog.pageType == "static_page"’><data:post.body/></b:if>

Сохраните тему.

Переходим к просмотру видео инструкции:

На этом наш очередной урок по блогеру завершен. До скорой встречи.

Источник

Литнет
Литературные блоги
Оформляем блог (ссылки, картинки — без кода)

Оглавлениие:

Как вставить ссылку в блог.
Как вставить картинку в блог.
Как сделать «Рамочку вокруг текста»
Как сделать оглавление в блоге (якорь) (на этом сайте пока не работает)

I. Как вставить ссылку в блог?

1. Скопируйте нужную ссылку.

2. В панели инструментов выберите команду «Вставить/редактировать ссылку»

3. В появившемся окне «Ссылка» вставьте нужную ссылку и введите текст.

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

Внимание! При вставке ссылки следите за тем, чтобы вначале ее пропадал «https://» или другой протокол. Если у вас в окне вставки ссылка будет начинаться с протокола — значит, перед первой буквой присутствует пробел. Его надо убрать, чтобы избежать неверной работы ссылки.

Текст с ссылкой будет выделен синим цветом.

Убрать ссылку можно с помощью команды «Убрать ссылку», находящейся рядом с «Вставить/редактировать ссылку».

II. Как вставить картинку в блог?

1. Прежде всего, необходима ссылка на картинку. Например, из ВК (работает даже из скрытого альбома закрытого аккаунта).

— щелкните по фото в альбоме, чтобы оно появилось в отдельном окне

— нажмите правую клавишу мыши

— выберите строчку «Копировать адрес изображения»

* Вы также можете использовать специальные сайты, позволяющие заливать картинки. Например, https://ru.imgbb.com.

После того, как вы загрузите изображение, щелкните по появившейся маленькой картинке предпросмотра — откроется полное изображение — нажмите ПКМ, выберите «Копировать адрес изображения».

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

2. В панели инструментов выберите команду «Изображение»

Появится окно «Свойства изображения».

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

Альтернативный текст НЕ БУДЕТ высвечиваться при глюке блогов, когда не видны картинки. Он высветится, если, например, вы копировали ссылку на вашу обложку, а потом эту обложку поменяли.

Граница — обведет ваш рисунок рамкой.

Отступы — расстояние между вашей картинкой и ближайшим текстом/краем листа

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

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

«Замочек», если его не трогать (не открывать) позволяет сохранить пропорции изображения при изменении его ширины/высоты.

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

3. Используйте вторую вкладку окна с названием «Ссылка», чтобы определить адрес, по которому можно перейти, щелкнув на картинку. Например, если вы пишете о книге и выкладываете ее обложку, вставьте в этом окне ссылку на само произведение.

III. Как сделать «рамочку» вокруг текста?

1. Выделите текст, который хотите заключить в рамочку.

2. Выберите в стилях «Special Container».

3. Чтобы печатать дальше в обычном режиме, перейдите на следующую строку и повторите п.2 заново. Или просто щелкните курсором по строке ниже.

Пока все, якорь ремонтируют.

IV. Работа с якорем. (не работает пока работа с якорем)

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

Вставка якоря похожа на вставку ссылки.

1. Напечатайте текст полность. Выберите то, НА ЧТО должен ссылаться якорь. В данном случае — четвертый пункт в тексте.

2. Выделите этот текст, нажмите команду «Вставить/редактировать якорь»

3. В появившемся окне присвойте якорю имя. Любое, какое вам удобно — оно нигде не отображается.

После нажатия ОК и закрытия окна рядом с выделенным текстом появится значок якоря. Виден он только при редактировании страницы!

4. Теперь надо выделить текст, ОТКУДА будет производится переход к якорю и нажать «Вставить/редактировать ссылку».

В появившемся знакомом окне меняем Тип ссылки на «ссылка на якорь в тексте»

5. После этого окно изменит вид на следующий:

Так как якорю было присвоено имя «4», в выпадающем списке «По имени» выбираем 4 и нажимаем ОК.

Теперь при выборе в оглавлении п.4 читающий будет перенаправлен к разделу 4. Работа с якорем.

Источник

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

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

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

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

Ссылка выглядит так: <a href=»адрес страницы» >слово или часть предложения</a>. Теперь о каждой составляющей ссылки:

<a> </a> — тег, в котором помещается ссылка и текст к ней;
адрес – url, на который ведет ссылка;
слово или часть предложения, называемые анкором – текст, который и отображается на странице, в статье.

Обратите внимание! Ссылка обычно выделяется синим цветом и подчеркиванием текста. Но могут быть и другие варианты настройки.

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

Кстати! О том, как работать в административной панели и редакторе сайта, я подробно рассказываю на своем авторском полностью бесплатном тренинге, как сделать сайт своими руками. Тренинг длится всего 4 дня в режиме онлайн. По завершении обучения у каждого участника остается собственный проект – готовый к работе. Если возникают трудности с его созданием, команда поддержки отвечает на все вопросы и решает проблемы.

Все ссылки бывают двух типов. Внешние перенаправляют на страницы того же сайта. Внутренние – на сторонний ресурс.

Какие атрибуты для ссылок бывают

Читайте также: Как проверить сайт на ошибки: 5 важных правил

HTML открывает широкие возможности и позволяет создавать дополнительные условия для перехода по ссылке. Атрибутов огромное количество. Рассказывать обо всех не буду. В этом нет никакого смысла. Остановлюсь только на самых важных. Отображается он следующим образом — <a имя атрибута=»значение» ></a>.

Что интересно – атрибутов для тега бывает несколько. Они публикуются обязательно через пробел. Очередность размещения атрибутов абсолютно не важна.

Ссылка открывается в новом окне

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

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

Чтобы страница по ссылке открывалась в новом окне, нужно «эксплуатировать» значения target и _blank. Вот код, вставляемый в текст в редакторе статьи: <a href=»url» target=»_blank»>текст</a>.

Как сделать ссылку на сайт: информация про содержание ссылки

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

Как быть? Есть простое решение – при наведении пользователем курсора всплывает подробное описание. Для достижения такой цели необходимо использовать атрибут title.

Как сделать ссылку на страницу сайта, у которой будет описание? Вот ее код: <a href=»url» title=»текст с описанием ссылки»>выделенный в статье текст ссылки</a>.

Отношения между документами

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

Nofollow;
Sidebar.

Остальные вам не нужны. Итак, начнем с nofollow. Он очень важен для SEO-продвижения сайта. Суть его состоит в том, чтобы не передавать вес страницы, на которой расположена ссылка, странице, на которую она ведет.

Как сделать ссылку на страницу сайта со значением nofollow? Вот ее код — <a href=»url» rel=»nofollow»>текст</a>.

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

Как сделать ссылку на сайт такого типа? Очень просто! Вот ее код: <a href=»url» rel=»sidebar»>текст</a>.

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

Читайте также: Редактор Gutenberg WordPress 5.0: Полный обзор + видео

Каждая из Систем управления контентом (движок) имеет собственные особенности формирования внутренних ссылок. Я остановлюсь на работе в редакторе WordPress. Это передовая платформа. На ней разрабатывается множество удобных и функциональных сайтов. Уже сегодня на движке работает более 30% всех ресурсов в мире – только осознайте эту цифру!

1. Шаг первый

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

2. Шаг второй

Откроется небольшое окно. В нем нужно ввести адрес url – той страницы, которая должна открываться по ссылке.

3. Шаг третий

В строке «Заголовок» внесите описание ссылки. Это будет атрибут title. Если не хотите его делать, то оставьте строку пустой. Рекомендую в строку вносить название страницы или статьи, на которую ведет ссылка.

4. Как сделать ссылку на сайт: шаг четвертый

Если хотите, чтобы ссылка открывалась в новом окне, нужно поставить отметку в соответствующей строке. После чего – кликнуть на кнопку «Добавить ссылку» или другую с подобным названием (в зависимости от версии редактора и особенностей перевода).

Дополнительные атрибуты

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

редакторе статье перейдите в раздел HTML и там вручную пропишите все необходимые вам атрибуты в тексте уже созданной ссылки.

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

Как сделать ссылку на сайт: картинка, как ссылка

Теперь поговорю о том, как сделать активную ссылку на сайте из картинки. То есть, чтобы пользователь переходил на новую страницу после клика по изображению. Тут тоже все предельно просто. Код ссылки будет выглядеть следующим образом: <a href=»url»><img src=»адрес изображения»></a>. Вот и всё!

Несколько советов, как правильно делать ссылки на страницах собственного сайта

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

1. Не делайте ссылок чрезмерно много

Если на вашем сайте, блоге не так много страниц и еще мало текста, делайте меньше ссылок в теле статьи.

2. Как сделать ссылку на сайт: понятный анкор

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

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

3. Учитывайте объем документа/файла

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

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

4. Как сделать ссылку на сайт: удаляйте «битые» ссылки

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

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

Как оформлять текст ссылки: несколько советов

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

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

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

Как сделать ссылку на страницу сайта: личный совет

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

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

Источник