May 20, 2018

Как установить favicon на сайт?

by @umnyaga
3
0

Мой Телеграмм-канал "Умный Лендинг"

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

Сегодня моя статья специально для тех, кто незнаком с этим понятием, или хочет освежить/дополнить свои знания про иконки для сайта.

Итак, само название «фавикон» – это то, что осталось от исходного «favicon», так сказать – сленговая версия, которая популярна в русскоязычном интернете.

Favicon – для сайта является его своеобразной визитной карточкой. Расшифровывается как «favourite icon» (если дословно, то это «любимое/избранное изображение»).

По факту это небольшая картинка, которая отображается:

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

2. В адресных строках почти всех браузеров непосредственно перед адресом.

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

 4. В закладках браузера.

#Зачем нужен favicon для сайта

Если установить «фавикон» на сайт ничего сверхъестественного не случится. Но некоторые положительные моменты все же будут:

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

#Как сделать «фавикон» для сайта

Для того? чтобы сделать иконку из картинки, которую Вы выберете, нужно соблюсти некоторые условия:

  1. Назвать ее «favicon.ico».
  2. Размер иконки должен составлять 16х16 пикселей.
  3. Разместить favicon.ico для сайта в корне веб-ресурса.
  4. Нужно сделать иконку в формате .ico. 

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

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

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

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

#Как создать новый «фавикон» или вообще его удалить

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

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

Небольшой итог

Независимо от способа, который Вы выберете, чтобы создать favicon.ico для сайта, это простейшее действие поможет существенно улучшить узнаваемость Вашего веб-ресурса среди сотен одинаковых конкурентов. А это однозначно не будет лишним, поскольку поможет вашей странице лучше продавать. А мы ведь строим Умный Лендинг)

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

А если очень хочется или нужно узнать мое мнение про вашу работу, ваш сайт (лендинг), Телеграм-канал, то можно написать лично мне.

May 20, 2018

Как сделать привлекательный сниппет?

by @umnyaga
7
0

Мой Телеграмм-канал "Умный Лендинг"

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

#Влияние сниппета сайта на количество трафика из поисковых систем

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

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

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

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

Нужно ли стараться сделать необычный и красивый сниппет сайта? Однозначно, да!

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

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

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

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

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

Кроме того, благодаря удачному сниппету Google и Яндекс будут учитывать улучшенные поведенческие факторы и повышать рейтинг Вашего сайта.

#Как создать сниппет страницы для Google поиска

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

#На основе чего создается сниппет для Яндекса

У Яндекса сниппет формируется по более сложным схемам и при этом description намного чаще не отображается в результатах выдачи, чем у Google. Но все же учитывается и этот тег необходимо заполнять.

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

На верхнем скриншоте в сниппет подтянулся фрагмент текста, на нижнем - description и текст.

 При формировании описания Яндекс учитывает:

  1. Текст на странице;
  2. Мета-тег description; 
  3. Микроразметку;
  4. Информацию из дополнительных источников (например, Яндекс.Маркет и Яндекс.Справочник).

С недавних пор, в результатах выдачи Яндекса появилась кнопка “Читать еще”, которая увеличивает отображаемый текст в сниппете сайта. 

Количество символов до кнопки “Читать еще” варьируется, но в среднем - 160-190 символов.

На данный момент точно не ясно, какое ограничение в количестве символов в расширенном описании сайта: в одних случаях - это текст до 160 символов, в других - почти 700. 

Специалисты Яндекса сообщают, что этот момент зависит от сложных внутренних алгоритмов и технических нюансов, а отображаемый текст после кнопки “Читать еще” не может быть более, чем в 3 раза, больше текущего.

Формирование расширенного описания происходит по тем же принципам - это “выжимка” наиболее релевантного текста со страницы. 

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

Например, для того, чтобы отображался адрес компании необходимо добавить ее в Яндекс.Справочник или воспользоваться микроразметкой Schema.org.

Также в Яндекс.Вебмастере в разделе “Информация о сайте > Региональность” можно прописать адрес и данные организации.

В случае с интернет-магазинами можно вывести в сниппет информацию о товарах. Существует несколькими способов: зарегистрироваться в Яндекс.Маркете; загрузить информацию о товарах в Яндекс.Вебмастер в раздел “Товары и цены” или же воспользоваться семантической разметкой. 

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

  1. Нужно создавать не просто красивый сниппет сайта, но и содержащий краткий ответ на интересующий пользователя вопрос.
  2. Наполнять страницы качественным контентом, который будет релевантным продвигаемому запросу, чтобы в случае использования части текста в виде сниппета в выдаче «не ударить в грязь лицом».
  3. Добавить оригинальный фавикон, который будет привлекать внимание пользователя поисковой системы, повышать возможность прочтения сниппета сайта и как следствие, перехода на него. Фавикон отображается только в выдаче Яндекса.

Небольшой видеоролик о том, что такое фавикон и зачем он нужен.


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

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

6. Выполнить анализ сниппетов сайта конкурента из ТОПа поисковой выдачи и использовать удачные моменты для своего случая.   

#Расширенные сниппеты. Особенности использования

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

#Не упустите возможность...

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

Так что включайте фантазию и вперед к завоеванию внимания пользователей поисковых сетей!

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

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

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

May 20, 2018

Как вывести ваш лендинг в топ-3 в Яндексе и Гугле

by @umnyaga
13
0

Мой Телеграмм-канал "Умный Лендинг"

Это заветная мечта всех интернет-маркетологов и инфобезнесменов. Но не у всех получается. А почему? Потому что слишклм много факторов влияет на продвижение в топ. Об этом есть целая наука - SEO называется. Ну, и кроме того, в топ-3 постоянно рвутся все. Поэтому толкотня там страшенная, движуха, как в Москве в метро или на дорогах в час-пик.

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

#Микроразметка данных: что, зачем и как

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

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

И что мы здесь видим? Тут вам и часть описания, и фрагмент новости об анонсе продолжения фильма, и в придачу еще и кусочек кем-то оставленного отзыва.

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

В последнем варианте страница выглядит в выдаче привлекательнее и информативнее благодаря использованию микроразметки данных в ее коде. 

Итак, что же такое микроразметка и зачем она нужна?

#Чуть-чуть теории о семантической разметке

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

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

Микромазметка данных состоит из двух частей:

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

Один из самых популярных на сегодняшний день словарей микроразметки – Schema.org. Был разработан в 2011 году и изначально принят к использованию Microsoft (Bing), Google и Yahooo! с целью унифицирования схемы микроразметки данных веб-страниц. Со временем подтянулся и Яндекс. 

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

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

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

#Неужели польза семантической разметки так существенна?

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

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

#Использовать или нет

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

Но есть один нюанс. Считается, что в результате применения словарей микроразметки Schema.org, сайты получают преимущества, результатами действия которых становится увеличение притока трафика до 30%. Согласитесь, это довольно впечатляющая цифра. И это означает, что если использовать микроразметку, затраты на продвижение сайта в поисковиках могут быть существенно сэкономлены. Так что «думайте сами, решайте сами», внедрять или не внедрять.

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

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

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

May 20, 2018

Как найти сервис для прототипирования. Часть 3

by @umnyaga
13
0

Мой Телеграмм-канал "Умный Лендинг"

Ну как у вас дела с прототипами для сайтов (лендингов)? Осваиваете потихоньку?

Тогда подкину вам еще работы. Последние 10 сервисов для создания прототипов.

11. Marvel

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

Интерфейс Marvel

12. Mockplus

Основная «фишка» Mockplus – возможность просматривать прототипы на мобильных устройствах, сканируя QR-код, 3000 иконок в платных тарифах.

Домашняя страница Mockplus

13. UXPin

Как и в Marvel, в UXPin можно создавать прототипы приложений для умных часов. Правда, только для часов, работающих на Android.

Интерфейс создания прототипа мобильного приложения

14. Flinto

Flinto – сервис прототипированния, в котором есть готовые шаблоны для самых распространенных разрешений мобильных устройств, а также встроенные анимации переходов в приложениях на Android и iOS.

Flinto для Mac

15. Sketch

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

Интерфейс Sketch

16. OmniGraffle

OmniGraffle доступен только для Mac и iOS, причем лицензии приобретаются отдельно. Сам сервис является мультиинструментом, и создание прототипов – не самая главная его функция.

Структура сайта в OmniGraffle

17. Pidoco

Главная особенность Pidoco – интуитивный drag’n’drop интерфейс, совместная работа над проектом.

Интерфейс Pidoco

18. Mockingbird

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

Интерфейс Mockingbird

19. iPlotz

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

Веб-версия iPlotz

20. Proto Share

В платных тарифах Proto Share можно создавать бесконечное количество проектов. Кроме того, у сервиса очень долгий триал-период – целых 30 дней.

Десктопного приложения у Proto Share нет, сервис доступен только в веб-версии

21. MockFlow

Самый дешевый тариф Mockflow стоит всего $14 / месяц, при этом в лицензию входит множество инструментов, в том числе для создания сайтов и баннеров, а также сервис совместной работы над дизайн-проектами.

Интерфейс MockFlow

22. Mockup Builder

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

Mockup Builder

#Прототип – незаменимый инструмент при разработке сайта

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

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

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

May 20, 2018

Как найти сервис для прототипирования. Часть 2

by @umnyaga
11
0

Мой Телеграмм-канал "Умный Лендинг"

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

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

#Еще 7 сервисов для создания прототипов

4. Vectr

С Vectr можно работать как онлайн, так и установив приложение на ПК. При этом обе версии синхронизируются друг с другом, давая возможность работать над одним прототипом как онлайн, так и с компьютера. Каждому создаваемому проекту присваивается URL, который можно отправить коллегам или клиенту для внесения комментариев и правок.

Попробовать Vectr в деле можно даже без регистрации. Так выглядит демонстрационная веб-версия сервиса

5. Atomic

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

Интерфейс Atomic

6. InVision

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

Интерфейс командной работы в InVision

7. Adobe Experience Design

Adobe Experience Design входит в пакет Creative Suite от Adobe и синхронизируется со многими сервисами из этого пакета. Главные особенности: быстрый переход из прототипа в приложение, возможность моментально посмотреть изменения в прототипе на мобильных устройствах. Главный минус – десктопное приложение доступно только для Windows 10.

8. Principle

Principle отлично подходит для создания анимированных прототипов. Приложение доступно только для Mac.

Образец прототипа для Apple Watch, созданного в Principle

9. Just in mind

Главное преимущество Just in mind состоит в том, что в сервисе доступно множество элементов и жестов, а также готовые шаблоны прототипов.

Just in mind

10. Moqups

Moqups – еще один достаточно популярный сервис для создания прототипов. Главная особенность – неограниченное количество пользователей на платных тарифах.

Прототип мобильного приложения, созданный в Moqups

#А вот вам и видеоурок по работе в Moqups

Если материал был полезен, ставим 🌕, если нет, то 🌑. Успехов вам и никуда не уходите! Завтра будет окончание этого материала. И, в итоге, вы получите 22 сервиса для прототипирования! Круто-же!

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

Show more