Доброго времени суток, уважаемые читатели. Часто сталкиваюсь с тем, что у многих начинающих вебмастеров и блоггеров полная каша в голове по поводу использования noindex и nofollow. Давайте разберемся что это такое, с чем едят и расставим все точки над i.
Стоит начать с того, чтобы в дальнейшем у вас никогда не было путаницы в голове, что и noindex и nofollow используют в двух относительно разных значениях в web-документе.
Первое – это внутри мета-тега ROBOTS (не путайте с файлом robots.txt) в значении атрибута content. Данный мета-тег имеет отношение ко всему документу в целом. Второе, используется только nofollow – внутри тега <a> и имеет отношение к конкретной ссылке. Про тег noindex немного другая история, и о ней мы также сегодня поговорим. Стоит также отметить, что я буду рассматривать использование nofollow и noindex только в двух поисковых системах – Яндекс и Google.
NOINDEX и NOFOLLOW в мета-теге ROBOTS
Мета-тег robots отвечает за всю страницу целиком. Через данный мета-тег можно запрещать или разрешать индексировать контент страницы.
Noindex отвечает за запрет индексации текста на странице.
Nofollow отвечает за запрет индексации ссылок на странице.
Nofollow отвечает за запрет индексации ссылок на странице.
Используются данные значения следующим образом:
<meta name="robots" content="noindex, nofollow" />
что означает – данную страницу нельзя индексировать вообще.
Могут быть и такие значения:
Могут быть и такие значения:
<meta name="robots" content="index, nofollow" />
можно индексировать контент, но игнорировать ссылки на странице, т.е. не индексировать их.
Или так:
Или так:
<meta name="robots" content="noindex, follow" />
не индексировать контент, но учитывать ссылки.
Более подробно про мета-тег robots вы можете прочитать в моей статье Мета тег Robots и файл Robots.txt – как управлять индексацией страниц сайта.
Более подробно про мета-тег robots вы можете прочитать в моей статье Мета тег Robots и файл Robots.txt – как управлять индексацией страниц сайта.
NOFOLLOW в ссылках
Nofollow используется как значение атрибута rel в теге <a>. И отвечает за индексацию каждой конкретной ссылки на странице.
<a href="url" rel="nofollow">ссылка</a>
Атрибут rel показывает отношение данного документа к документу, на который ссылается.
В данном случае, указывая атрибуту rel значение nofollow, мы просим поисковую систему не переходить по внешней ссылке, а также подчеркиваем то, что мы не отвечаем за содержание, на которое ссылаемся.
По ссылкам, оформленным с данным значением, не передается авторитет нашей страницы, другими словами не передается тИЦ и Page Rank. Однако стоит также учитывать и то, что в случае с PR вес все же уходит, но не на сайт, на который мы ссылаемся, а в никуда в прямом смысле этого слова. По поводу тИЦ точной информации о том, уходит вес или остается на сайте - нет.
Остановимся подробнее на распределении и передаче веса в Google.
Итак, абсолютно не важно, сколько ссылок у вас имеют атрибут rel="nofollow", а сколько без него. Если на странице стоит 10 ссылок, то каждая ссылка получит часть авторитета вашей страницы, и каждая из них передаст этот вес, но если в одном случае вес передастся на конкретный сайт, то в другом случае – вес просто уйдет в никуда.
Итак, абсолютно не важно, сколько ссылок у вас имеют атрибут rel="nofollow", а сколько без него. Если на странице стоит 10 ссылок, то каждая ссылка получит часть авторитета вашей страницы, и каждая из них передаст этот вес, но если в одном случае вес передастся на конкретный сайт, то в другом случае – вес просто уйдет в никуда.
Давайте представим немного, как видит всемирную паутину поисковая система. Все сайты связаны между собой ссылками, абсолютно все. Первый ссылается на второй, второй на третий … тысячный на тысяча первый и миллион какой-то в итоге обязательно будет ссылаться на первый.
Таким образом цепочка замыкается, все сайты находятся в цикле, и вес, который передает первый сайт всегда возвращается к нему через сотни и тысячи других сайтов. Также не забываем, и я уже писала об этом в статье про перелинковку, что этот вес передается не единожды, а постоянно, при этом с течением времени вес становится только больше, все сильнее увеличивая свой авторитет. Именно на этом принципе строится перелинковка сайта.
Теперь представим, что первый сайт закрыл свои ссылки атрибутом rel="nofollow". Вес не перейдет на второй сайт, а утечет в никуда, и второй сайт не получит ту часть веса, которую должен был, не сможет передать его дальше по цепочке, и в итоге, пройдя весь цикл, Х-какой-то сайт, который должен был передать вес на первый сайт, передаст его в значительно меньшем количестве, чем мог бы. Итак, каждый раз не получая ту часть веса, которую вы самостоятельно пускаете в никуда, закрывая свои ссылки атрибутом rel="nofollow", сайт не может передать вам ее, из чего следует, что закрывая свои ссылки, вы сами лишаете себя увеличения веса, и такого показателя, как PR.
Чтобы было проще это понять, представим, что каждая ссылка передает вес, равным единице.
Таким образом, если первый сайт не закрыл ссылку атрибутом rel="nofollow", то в конце цикла получит больший вес от входящих ссылок, чем в случае, если исходящие ссылки будут закрыты.
Получается, закрывать ссылки не выгодно?
Это действительно так, но только в том случае, если мы ссылаемся на качественные авторитетные ресурсы.
Закрывать ссылку невыгодно, если вы действительно, по настоящему рекомендуете своим читателям статью, на которую ссылаетесь, свою страничку в социальной сети, на свою ленту RSS. Глупо закрывать ссылки на свои же страницы в социальных сетях, когда рекомендуете своим читателям подписаться на обновления блога через них. Ведь это же ваши собственные страницы, ваша собственная RSS лента, в которой транслируется ваше же содержание. Разве вы сами не отвечаете за него?Но есть ситуации, когда действительно необходимо закрывать ссылки значением nofollow. Обратимся к источникам, Яндекс и Google, что они говорят по этому поводу?
Выдержка из раздела Помощь Яндекса:
Выдержка из раздела Справка Google:
Мы должны закрывать ссылки в тех разделах своего сайта, где любой пользователь может оставить свою ссылку, за которую мы не сможем поручиться, гарантировать, что там качественное содержание.
Дополнительно к этому Google рекомендует обозначать продажные ссылки атрибутом rel="nofollow". Также Google пишет, что с помощью nofollow мы можем указать роботу на закрытые разделы нашего сайта, но уточняет, что есть и другие способы указывать на это.
Также мне хотелось бы уделить внимание ещё одному моменту. Некоторые ярые борцы за закрытые ссылки ставят rel="nofollow" не только в самих ссылках, т.е. в теге <a>, но и везде, на что только хватает фантазии. И в теге <iframe>, и <script>, и в теге <img>.
Давайте не будем выдумывать свои собственные стандарты, а обратимся к существующим, которые разрабатывает международная организация W3C.
Значение rel="nofollow" можно использовать только в теге <a>, и в других тегах его использовать нельзя!
Итак, мы выяснили, когда стоит пользоваться атрибутом ссылки rel="nofollow", а когда это не целесообразно. Также мы больше не будем вставлять его никуда, кроме одного единственного тега, обозначающего ссылку. Теперь уделим внимание тегу noindex.
NOINDEX – рудимент от Яндекса
Когда-то Яндекс не понимал значение nofollow, и поэтому придумал свой собственные тег
<noindex>что-то внутри</noindex>
для того, чтобы можно было закрывать неугодные ссылки с его помощью. Все, что находилось внутри данного тега игнорировалось роботом Яндекса. Но с тех пор утекло немало воды, Яндекс повзрослел и начал понимать атрибут rel="nofollow". Случилось это ещё весной 2010 года. Именно тогда тег noindex потерял свое значение в качестве инструмента для закрытия ссылок. Но при этом осталось другое значение – скрывать текстовый контент. Выдержка из раздела Помощь Яндекса:
Им рекомендуется скрывать служебные участки текста. О каких служебных участках идет речь – не совсем ясно, но совершенно очевидно, что к ссылкам этот тег теперь не имеет никакого отношения. Т.е. получается, если мы поместим ссылку в данный тег:
<noindex><a href="url">анкор ссылки</a></noindex>
то Яндекс учтет все, кроме анкора ссылки. Т.е. ссылка будет учтена, не будет учтен только текст. Таким образом скрывать ссылки тегом noindex не имеет никакого значения.
Можно смело отказаться от использования данного тега, тем более, учитывая ещё и его невалидность. Ведь по сути такого тега вообще не существует. Как мы знаем, стандарты HTML разрабатывает международная организация W3C, и в спецификации к языку HTML нет такого тега, это полностью выдумка Яндекса.
Остался ещё один вопрос, на который мне хотелось бы обратить ваше внимание. Часто, когда я пытаюсь объяснить то, о чем написала в данной статье, мне возражают:
"Я делаю анализ сайта таким-то инструментом, и он показывает мне, что у меня ссылки не закрыты…
илиинструмент такой-то рекомендует закрыть ссылки тегом noindex.
Вы можете верить всем этим инструментам, это ваше полное право, но не лучше ли верить официальной документации поисковиков, и не лучше ли думать собственной головой?
Удачи в оптимизации сайтов.
Доброго времени суток, уважаемые читатели. Ещё в феврале 2011 года я писала про скрипт для создания эффекта LightBox. А в сентябре компания разработчиков Blogger анонсировали свой LightBox для платформы, который встроен во все шаблоны по умолчанию. А на днях, на просторах всемирного интернета я натолкнулась на очень красивую реализацию эффекта LightBox на CSS, без применения библиотеки jQuery, и вообще без каких либо скриптов.
Конечно, я не раз встречала подобные примеры, в некоторых из них все равно присутствовало несколько строчек кода JavaScript, в некоторых не было, но они не обладали такой красотой. И именно данная реализация понравилась мне больше всего, и я решила не только сделать "закладку" для себя, но и поделиться с вами.
Прежде чем начну, стоит сказать, что данный пример, к сожалению, обладает одним недостатком. Т.к. он создан с применением стандарта CSS3, он работает не во всех браузерах. Как всегда, в первую очередь, отличился браузер Internet Explorer до 8 версии включительно, также этот LightBox не будет работать в браузерах Opera до версии 9.6 и Safari до версии 3.0 включительно. Зато поддерживается в Android и iOS.
Также уточню, что разработчик описанного эффекта LightBox реализовал его в розовых цветах, что не всегда подходит под дизайн сайта, поэтому я решила для себя придать ему более привычный вид, когда фотография открывается на темном фоне, также внесла другие незначительные изменения, и в статье дам именно свой измененный код. А по ссылке вы можете прочитать оригинал статьи на английском, увидеть демо, а также скачать оригинал кода.
Начнем с HTML. Для одного изображения используется следующий код:
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
Обратите внимание, что для закрытия изображения используется ссылка на якорь с ID="#page". Вы можете использовать любой идентификатор, который уже присутствует в вашем коде, а можете список помещать в дополнительный контейнер с данным идентификатором. Т.е. код будет таким:
<div id="#page">
<ul class="lb-album">
<li>
……
</li>
</ul>
</div>
<ul class="lb-album">
<li>
……
</li>
</ul>
</div>
Если вы хотите использовать сразу несколько изображений, то можно добавить дополнительный код навигации:
<a href="#id_предыдущего_изображения" class="lb-prev">Предыдущее</a>
<a href="#id_следующего_изображения" class="lb-next">Следующее</a>
<a href="#id_следующего_изображения" class="lb-next">Следующее</a>
Все вместе будет выглядеть так:
<div id="page">
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-4" class="lb-prev">Предыдущее</a>
<a href="#image-2" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-2">
<img src="адрес_превью_2">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="адрес_изображения_2_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-1" class="lb-prev">Предыдущее</a>
<a href="#image-3" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-3">
<img src="адрес_превью_3">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="адрес_изображения_3_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-2" class="lb-prev">Предыдущее</a>
<a href="#image-4" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
</div>
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="адрес_превью_1">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-1">
<img src="адрес_изображения_1_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-4" class="lb-prev">Предыдущее</a>
<a href="#image-2" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-2">
<img src="адрес_превью_2">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-2">
<img src="адрес_изображения_2_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-1" class="lb-prev">Предыдущее</a>
<a href="#image-3" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
<li>
<a href="#image-3">
<img src="адрес_превью_3">
<span>Название изображения</span>
</a>
<div class="lb-overlay" id="image-3">
<img src="адрес_изображения_3_оригинального_размера">
<div>
<h3>Название изображения</h3>
<p>Описание</p>
<a href="#image-2" class="lb-prev">Предыдущее</a>
<a href="#image-4" class="lb-next">Следующее</a>
</div>
<a href="#page" class="lb-close"></a>
</div>
</li>
</ul>
</div>
Обратите внимание на код ссылок в навигации. В каждом фрагменте, чтобы можно было листать фотографии, необходимо указывать ссылку на якорь предыдущего и следующего изображения. А каждое изображение, в свою очередь, помещено в контейнер с id="image-X", где X – порядковое число изображения
id="image-1"
id="image-2"
id="image-3"
id="image-2"
id="image-3"
С HTML кодом разобрались. Приступим к CSS.
Я намеренно разделила оформление на 2 части. На код, который отвечает непосредственно за эффект LightBox и код, отвечающий за самую красоту. Я это сделала для того, чтобы каждый желающий смог внести свои изменения, если захочет.
Итак, основной код, сразу с навигацией:
/*делаем из элемента списка, в котором находится превью, блочный элемент*/
.lb-album li > a,
.lb-album li > a img{
display: block;
}
/*скрываем большое изображение*/
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
/*позиционирование контейнера с названием, описанием изображения и навигацией*/
.lb-overlay > div{
position: relative;
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
}
/*код закрытия LightBox*/
.lb-overlay a.lb-close{
background: url(lightbox-btn-close.png) no-repeat;
z-index: 1001;
position: absolute;
top: 43px;
left: 50%;
line-height: 26px;
text-align: center;
width: 16px;
height: 16px;
overflow: hidden;
margin-left: -8px;
opacity: 0;
}
/*навигация*/
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
.lb-album li > a,
.lb-album li > a img{
display: block;
}
/*скрываем большое изображение*/
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
/*позиционирование контейнера с названием, описанием изображения и навигацией*/
.lb-overlay > div{
position: relative;
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
}
/*код закрытия LightBox*/
.lb-overlay a.lb-close{
background: url(lightbox-btn-close.png) no-repeat;
z-index: 1001;
position: absolute;
top: 43px;
left: 50%;
line-height: 26px;
text-align: center;
width: 16px;
height: 16px;
overflow: hidden;
margin-left: -8px;
opacity: 0;
}
/*навигация*/
.lb-prev, .lb-next{
text-indent: -9000px;
position: absolute;
top: -32px;
width: 24px;
height: 25px;
left: 50%;
opacity: 0.8;
filter: alpha(opacity=80); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev{
margin-left: -30px;
background: transparent url(arrows.png) no-repeat top left;
}
.lb-next{
margin-left: 6px;
background: transparent url(arrows.png) no-repeat top right;
}
.lb-overlay:target {
width: auto;
height: auto;
bottom: 0px;
right: 0px;
padding: 80px 100px 120px 100px;
}
Это тот минимум кода, без которого вообще ничего не получилось бы. Но если мы сейчас посмотрим на наш LightBox, то ничего красивого в нем нет. Можно только изображения открывать и закрывать и все. Вот как это выглядит у меня:
И сейчас мы добавим самую красоту.
Убираем маркеры списка:
ol, ul {
list-style: none outside none;
}
list-style: none outside none;
}
Как правило, при верстке сайта намеренно обнуляют все стили, и если у вас нет маркера у каждого элемента списка, то вам этот код не нужен.
Выстраиваем фотографии по горизонтали:
.lb-album li{
float: left;
margin: 5px;
position: relative;
}
float: left;
margin: 5px;
position: relative;
}
Оформляем каждое изображение в контейнер, создается эффект рамки:
.lb-album li > a{
width: 125px;
height: 94px;
position: relative;
padding: 10px;
background: #ebebeb;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
}
width: 125px;
height: 94px;
position: relative;
padding: 10px;
background: #ebebeb;
-webkit-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
-moz-box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
box-shadow: 1px 1px 2px #fff, 1px 1px 2px rgba(158,111,86,0.3) inset;
}
Обратите внимание, что в значения ширины и высоты заданы размеры моих уменьшенных изображений, 125*94px. Если вы делаете превью другого размера, то не забудьте поменять эти значения. У меня получилось так:
Следующим этапом мы скроем название изображения под превью, и придадим эффект, чтобы оно появлялось, при наведении курсора мыши на картинку.
.lb-album li > a span{
position: absolute;
width: 125px;
height: 94px;
top: 10px;
left: 10px;
text-align: center;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 22px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(235,235,235,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
position: absolute;
width: 125px;
height: 94px;
top: 10px;
left: 10px;
text-align: center;
color: rgba(27,54,81,0.8);
text-shadow: 0px 1px 1px rgba(255,255,255,0.6);
font-size: 22px;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
background: rgb(241,210,194);
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%, rgba(235,235,235,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.56)), color-stop(100%,rgba(235,235,235,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(255,255,255,0.56) 0%,rgba(235,235,235,1) 100%);
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-ms-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
}
.lb-album li > a:hover span{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
}
Получилось так:
На этом этапе мы полностью закончили с оформлением превью, и переходим к оформлению непосредственно LightBox.
Добавим в последний код с классом .lb-overlay дополнительные значения фона. Получится следующее:
.lb-overlay{
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(26,26,26);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%, rgba(26,26,26,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(73,73,73,0.56)), color-stop(100%,rgba(26,26,26,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
}
width: 0px;
height: 0px;
position: fixed;
overflow: hidden;
left: 0px;
top: 0px;
padding: 0px;
z-index: 99;
text-align: center;
background: rgb(26,26,26);
background: -moz-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%, rgba(26,26,26,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(73,73,73,0.56)), color-stop(100%,rgba(26,26,26,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(73,73,73,0.56) 0%,rgba(26,26,26,1) 100%);
}
И вот у нас уже вырисовывается привычный нам эффект LightBox, когда изображение большого размера открывается на темном фоне.
Но пока есть проблема с ссылкой на закрытие большого изображения. Добавим нужный код:
.lb-overlay:target img,
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-overlay:target a.lb-close{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
.lb-prev:hover, .lb-next:hover{
opacity: 1;
filter: alpha(opacity=99); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)"; /*IE8*/
}
Попутно мы добавили немного прозрачности элементам стрелок навигации и крестику, закрывающему LightBox.
На этом можно и остановиться. LightBox готов. Разработчик же данного эффекта предлагает ещё поработать и с текстом.
Добавим следующий код:
.lb-overlay div h3,
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 24px;
float: left;
text-align: right;
border-right: 1px solid rgba(235,235,235,0.4);
margin-top:10px;
}
.lb-overlay div p{
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
.lb-overlay div p{
padding: 0px 20px;
width: 200px;
height: 60px;
}
.lb-overlay div h3{
font-size: 24px;
float: left;
text-align: right;
border-right: 1px solid rgba(235,235,235,0.4);
margin-top:10px;
}
.lb-overlay div p{
font-size: 16px;
font-family: Georgia, serif;
font-style: italic;
}
.lb-overlay div h3 span{
display: block;
line-height: 6px;
}
.lb-overlay div p{
font-size: 14px;
text-align: left;
float: left;
width: 260px;
}
И в уже описанный мною блок:
.lb-overlay > div{
position: relative;
color: rgba(235,235,235,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(26,26,26,0.6);
}
position: relative;
color: rgba(235,235,235,0.8);
width: 550px;
height: 80px;
margin: 40px auto 0px auto;
text-shadow: 0px 1px 1px rgba(26,26,26,0.6);
}
добавим значение color – цвет текста и text-shadow – тень текста.
И ещё немного лоска непосредственно на изображение:
.lb-overlay img{
height: 100%;
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
height: 100%;
max-height: 100%;
position: relative;
opacity: 0;
filter: alpha(opacity=0); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
-moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
box-shadow: 0px 2px 7px rgba(0,0,0,0.2);
-webkit-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-ms-transition: opacity 0.5s linear;
transition: opacity 0.5s linear;
}
Мы добавили немного теней, эффекта плавного перехода.
И ещё хочу обратить ваше внимание, в последнем коде мы указали значение высоты height: 100%;. Эта строка регулирует размер изображения в зависимости от разрешения монитора. Если разрешение монитора меньше, чем оригинал изображения, то изображение будет уменьшено до такого значения, чтобы оно полностью помещалось в окне без прокрутки. Если вы оставляете данную настройку, то для браузера Opera необходимо добавить другой код:
x:-o-prefocus, .lb-overlay img {
height: 100%;
}
height: 100%;
}
Что у меня получилось, вы можете посмотреть по этой ссылке. Если понравилось, полную версию кода с картинками навигации и закрывающего крестика качаем здесь.
Если вы имеете блог на Wordpress, и вам не интересно заморачиваться кодами, то вам подойдет плагин красивой галереи SimpleViewer для WordPress, про установку которой вы можете прочитать в энциклопедии начинающего блоггера.
Поздравляю все своих читательниц с прекрасным весенним праздником 8 марта. Хороших выходных.
Доброго времени суток, уважаемые читатели. На сегодняшний день продвижение в социальных сетях дает не только хорошее преимущество при продвижении в поисковых системах, ведь частое упоминание сайта в социальных ресурсах говорит о популярности сайта, но также активно используется для рекламы своей продукции и услуг.
Сегодня я решила поделиться с вами информацией о том, какой должна быть рекламная кампания в социальных сетях, об ее особенностях и об особенностях учета конверсии и анализа эффективности. Материал будет теоретический, но от этого не менее полезный.
Под рекламной кампанией я подразумеваю любые работы по популяризации вашего сайта в интернете. С данной точки зрения не важно, проводите вы работы по продвижению в поисковых системах или вашим инструментом является контекстная реклама, а в социальных сетях неважно, используете вы оплаченную рекламу или занимаетесь раскруткой собственной страницы или группы. Т.е. в данной статье я хочу показать принципиальную разницу между поисковым и социальным продвижениям, разницу в целях, а соответственно и в результатах.
Начнем с того, что четко определим, что делает пользователь в поисковой системе и в социальной сети. Если человек обращается к поиску, то с большей долей вероятности он знает, что ему нужно, он ищет что-то конкретное, т.е. он определенно готов к покупке или заказу какой-то услуги.
Что делает пользователь в социальной сети? Общается с друзьями, коллегами, играет в игры, слушает музыку или смотрит видео, одним словом он расслабляется. Он не готов к покупке, он вообще в этот момент не думает о чем-то близком. И в этом кроется принципиальная разница в подходе, как к проведению рекламной кампании, так и к анализу ее эффективности.
Я бы сказала так:
для поискового продвижения самым важным будет убедить пользователя стать именно вашим клиентом, а для социального продвижения вам сначала нужно убедить пользователя, что то, что вы ему предлагаете, ему действительно нужно, а после этого уже убедить, что он должен приобрести это обязательно у вас.
Вы чувствуете разницу? Это очень важно. Получается, если пользователь перешел с поисковой системы, то при прочих равных условиях он должен совершить покупку или заказать услугу, а мы в этот же день сможем зафиксировать конверсию и проанализировать эффективность. Хотя, конечно, быстрая конверсия во многом зависит от вида товара или услуги. Если мы говорим о дорогой продукции, то, как правило, для принятия решения требуется значительное время. Я же сейчас немного упрощаю, чтобы ярче показать разницу между пользователем, заходящем на ваш сайт из поиска и из социальной сети.
Если же пользователь увидел вашу рекламу в социальной сети, то сначала он должен осознать потребность в данном товаре или услуге, после этого только принять решение о покупке или заказе. И совсем не факт, что спустя какое-то время он вспомнит, чью рекламу он видел, а если и вспомнит, то ваша рекламная кампания может к тому времени закончиться, пользователю ничего не останется, как вернуться в поиск и искать ваш товар или услугу через поисковик. И не факт, что он приобретет товар именно у вас. Ведь в поиске много подобных предложений.
Из-за такого положения вещей, для проведения рекламной кампании в социальных медиа стоит придерживаться нескольких принципов.
Рекламная кампания должна быть направлена не на рекламу товара, а на рекламу бренда.
Хорошо, если у вас яркий запоминающийся логотип, слоган, запоминающееся название. Для рекламы бренда это более важно, чтобы даже по прошествии года пользователь быстро вспомнил название и ввел в поиск запрос с именем бренда. Или перейдя на ваш сайт из поиска понял, что сайт принадлежит именно вам.Предложение должно быть уникальным, а само рекламное объявление запоминающимся.
Опять же по той причине, чтобы по прошествии большого промежутка времени, вспомнили именно о вас.Реклама в социальных сетях может привести к росту посещаемости из этих сетей, но не принести конверсию.
Т.е. конверсию с социальных ресурсов необходимо отслеживать постоянно, не только во время проведении кампании, но и спустя недели и месяцы. Как уже писала, для рекламы в социальных сетях характерно то, что в данный момент пользователю может быть не нужен ваш товар или услуга, поэтому конверсия может быть и через неделю, и через месяц, и через полгода. Это называется отложенная конверсия. Отслеживать отложенную конверсию позволяют как Google Analytics, так и Яндекс Метрика.Реклама в социальных сетях может не привести к росту посещаемости, но принести конверсию.
Пользователь просто увидел ваше объявление с названием бренда и запомнил его, а непосредственно по ссылке не перешел. А спустя время ввел запрос в поисковой системе, содержащий название вашего бренда или сайта. Именно поэтому для рекламной кампании в социальных сетях важно, чтобы ваш сайт или название компании имело запоминающееся имя.Стоит учитывать, что, не смотря на проведение рекламной кампании, решение об обращении именно к вам, может быть принято пользователем и благодаря другим источникам информации. Частично помочь разобраться с учетом конверсии в такой ситуации может именно Google Analytics. Данная система статистики поможет определить, вследствие чего возникло решение пользователя, вследствие ваших действий в социальной сети или из независимых источников.
Конечно, в подобных отчетах всегда присутствует доля погрешности. Во-первых, положительный отзыв о вашей компании, повлиявший на решение, может дойти до пользователя из источников, не связанных с интернетом. Во-вторых, если в ходе принятия решения, пользователь посетил несколько разных сайтов, где упоминается ваша компания, то невозможно точно определить, в какой момент все же пришло решение. Но в любом случае Google Analytics значительно облегчает анализ отдачи от рекламной кампании.
Как написала выше, данная статья носит теоретическую информацию, поэтому я решила не останавливаться на подробном описании отчетов Яндекс Метрики и Google Analytics, а посвятить этому отдельный материал.
Желаю удачных рекламных кампаний.
Доброго времени суток, уважаемые мои постоянные читатели. Сегодняшняя статья полностью адресована вам и только вам. Всем тем, кто в течении пяти месяцев ждал новых статей, верил и надеялся, что вот скоро в ридере появится новое сообщение с моего блога или придет письмо на почту с новой статьей. Да, прошло пять месяцев с тех пор, как я написала последнее сообщение в блог. Конечно, я не буду утруждать вас чтением того, что происходило все это время, почему я так долго не радовала вас своими статьями. Скажу только, что это больше вопрос личного характера, и никак не связан с он-лайн деятельностью. Но я, как всегда, хочу поделиться с вами своим опытом, размышлениями, и некоторыми планами на будущее.
Как видно из заголовка статьи, сегодня у меня две новости, два праздника.
Первый – это день рождения блога. Ему исполнилось два годика. Много это или мало – каждый определяет для себя сам. А поздравления я принимаю в комментариях.
Вторая новость и в некоторой степени тоже праздник заключается в том, что мой блог не умер, как это довольно часто случается в блогосфере. Просто был непростой период в моей, а соответственно и в его, жизни, но мы его преодолели, а значит стали сильнее и готовы дальше развиваться. По большей части ведь из этого и состоит наша жизнь - мы сталкиваемся с трудностями, преодолеваем их и становимся сильнее.
А вам интересно узнать, что происходило с блогом все эти пять месяцев, пока он не обновлялся? Ведь здесь мы с вами познаем азы продвижения, а одно из правил – ресурс должен постоянно обновляться и развиваться. Так что происходит с блогом, если его не вести в течении, например, полугода? Хоть я и не писала в блог, но постоянно присутствовала в интернете. Лично мне было интересно следить, что происходит с моим блогом. Ведь это моё детище, очень близкое и родное. На самом деле, ничего страшного не произошло. И сейчас мы с вами в этом убедимся.
Синяя кривая - посещаемость с сентября по февраль, т.е. то время, когда я не писала. Оранжевая кривая – такой же временной промежуток, но с апреля по сентябрь.
За это время было естественное падение во время предновогодних дней и новогодних праздников, как впрочем и на любом другом ресурсе. В остальном на протяжении большего времени посещаемость была чуть выше, чем за предыдущий промежуток времени. Конечно, если бы я писала новые статьи, то моя посещаемость только увеличивалась бы. А так она осталась на прежнем ровне, хотя есть и небольшой прирост.
Т.к. нас в первую очередь интересует поисковый трафик, я посмотрела и его.
Вот такой прирост посещаемости с поисковых систем. С Яндекса на 12,72%, с Google на 63,06%. Признаюсь, я сильно удивилась, увидев такой прирост с Google. Ведь этот поисковик очень динамичный, и побольше Яндекса любит частое обновление, самую актуальную информацию. Я склонна сделать вывод, что Google дорожит уже проверенными сайтами, к которым, я надеюсь, а график это показывает, и относится мой блог.
Конечно, за это время сильно упало количество переходов с ридеров по фиду, прямых заходов с других сайтов, с социальных сетей. И это естественно. На время я выпала из социальной жизни. Но это мы наверстаем.
Также мне было интересно следить и за другими показателями блога.
По счетчику Feedburner, естественно, сократилось до минимума обращение к фиду. Ведь к фиду обращаются службы различных ресурсов, чтобы обновить информацию, сами читатели непосредственно после выхода новой статьи. Но количество самих подписчиков, людей, желающих получать обновления блога, увеличилось. И это, конечно, радует.
Подводя итог можно с уверенностью сказать, что долгое отсутствие обновлений никак не отразилось на блоге, а даже есть рост, где-то более существенный, где-то менее. Конечно, рост мог бы быть и больше, если бы блог обновлялся.
Также, хотелось бы сказать, чтобы вы не проводили подобных экспериментов, особенно на молодых блогах, ещё не заработавших авторитет поисковых систем. Ведь в противном случае результаты могут стать плачевными.
Но мне также хотелось бы сегодня рассказать вам не только о том, как жил мой блог, но и том, что было с форумом. Ведь лично я считаю свой форум неотъемлемой частью блога по той причине, что в блоге очень много статей по платформе Blogger, среди читателей и посетителей очень большое количество владельцев блогов именно на Blogger. Именно поэтому я хочу вкратце рассказать вам о форуме.
К большому моему сожалению, форумом я так же не занималась, как и блогом. Хотя присутствовала на нем, практически, каждый день. Поддерживала общение, отвечала на вопросы. В общем, делала все то, что и раньше. Но не занималась никаким продвижением, ни социальным, на поисковым. При этом он тоже радует меня ростом посещаемости.
Общая посещаемость увеличилась на 60%, а уникальные посетители на 42%. Приток поискового трафика с Яндекса увеличился на 188%, а с Google – 142%.
В данный момент на форуме
На мой взгляд, вполне прилично для небольшого узкотематического форума.
Наверно, кому-то будет интересно, что было с монетизацией блога, с заработком. Учитывая, что я не писала новых статей, я, естественно, не зарабатывала с постовых. Поэтому, с этой стороны, конечно, заработок упал до нуля. Это самый нестабильный заработок с блога. Но существуют и другие способы монетизации. Реклама Яндекс Директ, которую я размещаю в блоге через ProfitPartner, ежемесячно приносит стабильный доход. Роста практически нет по той причине, что и посещаемость за это время, практически, не увеличилась. Но зато стабильно.
Рекламный блок Google Adsense также радует своей стабильностью и даже небольшим приростом. За последние месяцы я вышла на стабильный заработок в этой системе. Хотя, как и писала раньше, Директ мне дает в несколько раз больше, чем Адсенс.
За время моего "молчания" только один раз был продан один баннер. Учитывая, что их вообще нечасто покупают, то этот вид заработка я не рассматриваю как серьезный.
Но больше всего радует заработок по партнерским ссылкам. Ежемесячно я получаю неплохой доход с рефералов в таких биржах, как Rotapost и MegaIndex. Меньше, но стабильно и постоянно растет мой доход в бирже статей ContentMonster, в баннерной бирже Ротабан, а также в ProfitPartner.
Кто-то из вас, конечно, хочет видеть цифры, более точные данные. Извините, я об этом никогда не пишу, не считаю нужным. Но могу сказать, что, с учетом проживания в одном из самых дорогих городов мира, заработка с блога может хватить только что на два-три похода в недорогой ресторан, или оплату коммунальных услуг. Основной свой заработок я получаю с клиентов, которым оказываю услуги по поисковому продвижению или созданию сайта, также я оказываю консультации на эту же тему по скайпу.
Мои планы
Конечно, самое главное то, что блог мой не умер, он будет дальше развиваться, обновляться, радовать вас новыми полезными статьями. Все будет как и раньше. Я пока не могу пообещать, что блог будет обновляться часто. На это есть две причины.
Первая – не самая хорошая. На личном опыте убедилась, что очень сложно начать писать после такого перерыва, поэтому в рабочий ритм буду входить постепенно.
Вторая причина – планы. Пока не хочу их раскрывать, но намекну, что планирую создать ещё один сайт. Это будет не блог, и не форум, а информационный сайт, очень полезный. Связанный с интернетом. Он будет полезен как большинству моих читателей, но также позволит охватить и новую для меня аудиторию. Также хочу сказать, что подобных ресурсов в рунете нет. Идея пришла внезапно, но благодаря тому, что я постоянно развиваюсь, осваиваю новые знания и навыки. И в один прекрасный момент я поняла, что в моем ридере на определенную тему (её я пока не раскрываю) несколько десятков англоязычных ресурсов, тогда как русскоязычных можно пересчитать по пальцам на одной руке – их просто нет. Проект планируется крупный, как получится по времени – сказать сложно, поэтому пока и не хочу раскрывать подробностей.
В целом, тематика моего блога не изменится. Я буду писать как о поисковом продвижение, но так же хочу немного расширить тему веб-разработки, создания сайта. Больше будет статей про WordPress, возможно, про другие CMS. К слову, в статье про выбор CMS для сайта в комментариях мне посоветовали обратить внимание на движок MODx. Я обратила и осталась очень довольна. Возможно, у меня появится серия статей о данном движке. В общем, время покажет. Но то, что будет интересно, это я вам обещаю.
А чтобы не разочаровать вас, мне очень хотелось бы поближе узнать вас, своих читателей. Пожалуйста, примите участие в опросе. Это поможет мне лучше понять ваши желания и потребности, улучшить мой блог и предоставить самую актуальную информацию именно для вас.
Как вы могли заметить, в опросе я интересуюсь вашим отношением к вебинарам. Да, у меня есть планы попробовать себя в этом направлении.
На это можно и закругляться. Спасибо, что были со мной все это время. До скорых встреч.
