Лайки и как подготовить сайт для лайков?

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

Лайти и как подготовить материал для лайков?

Но для начала давайте разберёмся, что такое лайки? Я бы сказал, что лайки (от англ. like - нравится) – это выражение читателями своего одобрения материалу автора, производимого путём публикации ссылки по средствам кнопки той или иной социальной сети. Другими словами, это всё то же цитирования и всё те же ссылки, которые никогда не бывают лишними.

Особенность лайков кроется в их происхождении из социальных сетей. Для того чтобы появился лайк, пользователь должен указать URL-адрес соответствующей веб-страницы в том же статусе, твите и т.д. Понятно, что это можно сделать напрямую в аккаунте социальной сети, а можно использовать и так называемый шаринг (от англ. share - делиться). Дело в том, что многие социальные сети предоставляют механизм, облегчающий публикацию ссылок на понравившиеся материалы. Для этого есть API и готовые решения в виде тех же социальных кнопок. Главное, что всё это позволяет почти автоматически создавать, записи состоящие из ряда элементов веб-страницы: URL-адреса, заголовка, описания и т.д. Дальше дело техники и решения пользователя.

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

социальные кнопки в Blogger.com

Как вы видите, выбор не велик, но вполне хорошо встраивается в дизайн блога. Можно отправить информацию о материале по почте, написать о посте в своём блоге на Blogger.com, твитнуть в Twitter, создать статус в Facebook и конечно добавить +1, упомянув заметку в ленте на Google+. К слову, последнее можно автоматизировать при редактировании постов - ставим «Да» для Опубликовать в Google+ на странице: Настройки > Сообщения и комментарии. Всё просто и удобно.

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

Возникает закономерный вопрос: как «спровоцировать» пользователя лайкнуть пост? Конечно, можно пойти и путём чёрного SEO, зарегистрировать кучу социальных аккаунтов и лайкать нужные материалы, но это не входит в состав моего поста. Более того, мой совет будет противоположным - создавайте интересный материал, который хочется цитировать и на который хочется ссылаться. Это действительно сложная задача, но результат того стоит. К сожалению, я не могу вам дать каких-то определённых советов в этом направлении, т.к. и сам хотел бы узнать нечто подобное. Всё вроде бы просто, но и сложно одновременно. Так что остановлюсь лишь на чисто технических нюансах.

Как подготовить материал для лайков?

Если с качеством публикуемых постов всё несколько неоднозначно, то вот в техническом плане - ничего сложного здесь нет. Главное один раз сделать и продолжать работу с сайтом. Напомню, что содержание генерируемых заметок основано на ряде элементов веб-страницы. Далее я предлагаю разобраться с каждым из них по отдельности.
  • URL-адрес. По сути, здесь нет никаких проблем. Мой совет сводится лишь к тому, чтобы уделить больше внимание ЧПУ тех же постов на Blogger.com, о чём я уже писал. Хотя, в данном случае, это и не столь принципиально. Некоторые социальные сети используют сокращения ссылок и закрывают их от индексации через rel="nofollow".
  • Favicon. Редко, но может использоваться. В список его я добавил только потому, что этому элементу редко уделяют внимание, а зря. Favicon – маленькая картинка (всего 16х16 пикселей), отображаемая в адресной строке браузера. По умолчанию в блогах на Blogger.com используется оранжевый квадрат с белой буквой «B». Изменить это легко – перейдите на страницу Настройки > Дизайн и кликните ссылку Изменить для гаджета Значок, а потом загрузите соответствующую картинку. К слову favicon используется и поисковыми системами, так что оно уж точно не будет лишним.
  • Заголовок страницы. Речь идёт о теге TITLE, чьё содержание выводится в заголовке окна браузера. Это значение зачастую совпадает с название того же поста и является немаловажным в плане SEO. Заголовок страницы должен как привлекать внимание, так и содержать ключевые слова. Обращаю ваше внимание, что именно заголовок страницы зачастую используется поисковыми системами в качестве текста ссылки (анкора) в выдаче. Этот же текст попадает в твиты, статусы и т.д.
  • Описание страницы. Речь идёт о META-теге description. Иногда его вообще не использую или уделяют description мало внимания – это неправильно. Краткое описание содержания страницы зачастую используется поисковыми системами в качестве описания для ссылок в выдаче, как собственно и некоторыми социальными сетями в тех же статусах со ссылкой. Если он отсутствует, используется фрагмент текста со страницы, который будет плохо отображать суть содержания. Сам же META-тег description, располагается в теге HEAD и выглядит следующим образом:
    <meta content="{здесь краткое описание страницы}" property="og:description" name="description"/>
    Обратите внимание на то, что здесь я привёл не обязательный атрибут property="og:description" протокола Open Graph. В тоже время, он не столь уж и важен, т.к. выступает скорее как альтернатива.
  • Одна из картинок со страницы. Здесь нужно понимать, что содержание лайков бывает разным и зависит от возможностей конкретной социальной сети. Некоторые из них, например: Google+, Facebook, ВКонтакте и др. - поддерживают вставку картинки, а некоторые – нет. Тем не менее, я советую вставлять в свои посты картинки, хотя бы одну. Это оживит сам пост, положительно скажется на трафике с того же поиска по картинкам, ну и лайки будут более привлекательными. К слову в протоколе Open Graph для этого есть соответствующий META-тег og:image.
Как вы видите всё просто, но требует чуть больше внимания к деталям. Надеюсь, мои простые, но от того не менее эффективные, советы будут вам полезны и лайки не обойдут вас стороной. Удачи!

Twitter Facebook ВКонтакте Одноклассники Google+

24 комментария:

Хамавова Асиль
Как поставить кнопку лайка под картинкой??? http://rma540.blogspot.com/ вот на этом сайте
Константин Кирилюк
Асиль, а чем указанный блог отличается от других или просто попиарить решили в комментариях? Но я отвечу на ваш вопрос. В блоггере есть стандартная кнопка шаринга в Facebook, но если вы хотите имнно лайковую, то об этом хорошо рассказала Светлана Ковалева, читайте тут.
Хамавова Асиль
не совсем, ссылка была подлиннее... Хотела показать картинки, чтоб было понятно суть вопроса. Как поставить лайк под каждой картинкой в отдельности, типа как вконтакте- чтоб можно было лайкнуть понравившуюся.
Константин Кирилюк
Асиль, лично я не увидел на указанном вами блоге чего-то подобного, но не суть важно. В принципе, картинка эта та же веб страница, т.е. в виджете кнопки социальной сети можно прописать её адрес вот и будут лайкать соответствующую картинку.
Хамавова Асиль
http://rma540.blogspot.com/2012/09/kartinki-foto-hajab.html вот ссылка с картинками (публиковать не обязательно), а вот и сам лайк http://clip2net.com/s/2iVyJ, есть возможность именно такой вставить?
Константин Кирилюк
По порядку, на указанной странице имеется обычная голосовалка созданная через Google документы. Но я уловил вашу идею. Да во ВКонтакте есть отдельный виджет мне нравится. Как я понял он вам и нужен.
Хамавова Асиль
это не то, если вставить эту кнопку будет отображаться общее количество тех кому понравился сайт или страница, а мне нужно отдельно под каждой картинкой
Константин Кирилюк
Асиль вы почитайте документацию к виджету "мне нравится", там же в опциях можно указать адрес, например адрес картинки, как я и говорил ранее. В общем, вопрос я думаю раскрыт полностью, вам осталось лишь внимательно всё почитать и во всём разобраться. Удачи!
Максим Булавинов
Константин, поясни пожалуйста, как эти знания использовать здесь - на blogspot? В частности, как вставить meta в head, если все генерируется по шаблону? Т.е., как я понимаю, любая статья целиком вставится где-то в body, а head сгенерируется по шаблону. Как же я могу этим управлять?
Константин Кирилюк
2Максим Булавинов: по сути на блоггере это частично реализовано... тот же image_src, но в принципе всё выше сказанное можно прописать в шаблоне, есть специальные переменные. Как вариант, вот нашёл такое решение:

<!-- BEGIN Open Graph tags -->
<meta expr:content='data:blog.metaDescription' name='description' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='keywords'/>
<meta content='YOUR_FACEBOOK_APP_ID' property='fb:app_id'/>
<meta content='FB_ADMIN_ID' property='fb:admins'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta content='http://wmascat.blogspot.com/p/about.html(ABOUT_PAGE_HERE)' property='article:author'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='YOUR_FAVICON_URL' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta content='blog' property='og:type'/>
<meta content='YOUR_FAVICON_URL' property='og:image'/>
</b:if>
<meta expr:content='&quot;ru_RU&quot;' property='og:locale'/>
<!-- END Open Graph tags -->
Максим Булавинов
Константин, ну хорошо - вот я вижу тег:
meta expr:content='data:blog.metaDescription' name='description' property='og:description'
Мне нужно, что бы тут было краткое описание моей статьи. Но этот кусок общий для всего шаблона. Т.е. как сделать, что бы на место переменной data:blog.metaDescription подставлялся нужный текст - свой для каждой статьи? И куда вообще этот текст вписать?
Константин Кирилюк
Ну, тут нужно понимать, что собой представляет шаблонная переменная data:blog.metaDescription, а это есть краткое описание поста вводимое в его настройках. К слову, это же значение прописывается в автогенерируемом метатеге description... если таковое вообще включено (см. Настройки > Настройки поиска > секция "Метатеги" > опция "Описание" > "Включить описание для поисковых систем?"
Ваван
Наверное я не совсем понял вопрос Максима Б., ведь в каждом посте можно/нужно прописть свой дескрипшен(?!)
2Константин, в случае, если автор пренебрегает картинками в посте, или текст не требует вложения картинок или они не уместны (научный текст, юриспруденция напр.) Тогда как заменить/настроить одну универсальную og image?
Картинка 72х72 значок блоггер смотрится уж очень нелепо
Ваван
Вот может подскажете совет как изменить или вовсе убрать отображение огг картинок в соцсетях?
Я понимаю при ручной публикации можно нажать крестик. Но фидburner публикуeт автоматом.
Константин Кирилюк
2Ваван: если картинка неуместна или отсутствует можно использовать логотип сайта имхо ;)
Константин Кирилюк
2Ваван: не понял при чем тут фидбурнер... если речь идёт о ретрансляции, то фидбурнер осуществляет её только в твиттер...
Ваван
2Константин Кирилюк: фидбернер транслирует в твиттер, тот, в свою очередь, в фейсбук ) так хитро устроено. (Как делать из блоггер напрямую пока не знаю. Есть еще сервис IFTTT!)

Оказывается я пытался прописать мета-теги Фейсбук дважды. Ранее я уже ввел их вместе с формой комментариев. А ругается фейсбук от того, что никак не хочет принимать кириллицу внутри этих самых тэгов.
И самое главное, внутри этих тэгов ушла блоггеровская стандартная картинка. имхо не самый красивый логотип
Sof Unt
Здравствуйте, Константин.
Замечательная статья!
Не могли бы Вы подсказать, можно где-нибудь найти Генератор кода кнопки +1 для Google+ без JavaScript?
(как это реализовано для социальной сети ВКонтакте -- "Если Вы не можете выполнять JavaScript-сценарии на Вашем сайте, например Ваша блог-платформа не поддерживает этой функциональности, Вы можете размещать прямую ссылку для публикации ВКонтакте. Эта ссылка имеет следующий вид: http://vkontakte.ru/share.php?url={адрес страницы}")
Константин Кирилюк
2Sof Unt: Точно также как и для ВКонтакте, так и для Google+ имеется ссылка для шарига. Она имеет следующий вид: https://plus.google.com/share?url={адрес тсраницы}
Sof Unt
Большое спасибо!
Сработало в таком виде ...href="http://plus.google.com/share.php?url=http://адрес/" target="_blank">Поделиться Google+...
Sof Unt
Проверила :( К сожалению, Гугл (после перехода по моей ссылке) пишет: «404. That’s an error.
Не удалось найти запрошенный URL на этом сервере. That’s all we know.»
Тоже самое пишет, когда ссылку изменила на https://plus.google.com
Константин Кирилюк
2Sof Unt: у вас в ссылке ошибка share.php, а должно быть просто share ;)
dima alabes
помогите зделать свой сайт там где люди могут сидеть и обмениватся лайками плачу денги пишим мне в скайп status878
Константин Кирилюк
На счёт создания сайта, читайте тут. На счёт социальных кнопок уже сказано, но может прочитать подробней ещё и тут.
Отправить комментарий