Содержание

Как правильно написать теги

Многих интересует, как правильно писать теги. Граффити, изображения, аудио, видео — все это помечается тегами для упрощенного поиска по темам.

Правильно ли мы понимаем значение этого слова и действительно ли тег нужен только как указатель при поиске информации?

Что такое теги

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

Язык его происхождения — английский, с которого tag переводится как «бирка, этикетка», а глагол to tag известен британцам в значении «метить, помечать».

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

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

Использование тегов в социальных сетях

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

  • Он начинается с символа «решетка» (Shift + 3 в английской раскладке клавиатуры).
  • Если состоит из двух и более слов, то эти слова не должны прерываться. Обычно либо между ними не ставят пробелы (например: #мыходилигулять), либо ставят знаки препинания или символ «нижнее подчеркивание» в тех местах, где должны быть пробелы (например: #мы_ходили_гулять).
  • Если кликнуть на активный хештег, поиск выдаст другие записи с таким же хештегом. Именно поэтому хештеги часто применяются для упрощения поиска по паблику или по теме поста.

Использование тегов при размещении видеозаписей на Youtube

Для видеохостинга «Ютуб» наличие тегов невероятно важно. Дело в том, что этот сервис помогает видеоблогерам продвигать свои каналы совершенно бесплатно, если соблюдены следующие условия:

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

Теги заполняются после загрузки видео в специальном поле. Они позволяют пользователю «Ютуб» найти видео по теме. Система анализирует теги и название видео, затем выдает его по запросу в поисковой строке.

Как написать теги в «Яндекс.Дзен»

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

Как правильно писать теги в «Дзен»

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

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

О том, как писать теги с названиями, например, названиями компаний, организаций, блогов, очень мало материалов. Основное правило — использовать их не очень часто, поскольку это может оттолкнуть. Не сложно понять на практике, как правильно писать теги с названиями.

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

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

Не настолько сложно понять, как писать теги в HTML, выучить их — более трудная задача. Каждый тег отвечает за что-либо в структуре сайта.

Как писать теги в HTML

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

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

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

здесь идет таблица с колонками, ячейками и текстом в них

.

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

Помимо тегов существуют их атрибуты — своеобразные настройки тегов. Например, чтобы указать размер, цвет или тип шрифта, используется тег , но этого недостаточно, так как машине непонятно, какой именно размер или тип шрифта имеется в виду. Потому нужно конкретизировать с помощью атрибутов size, color и face. Они пишутся в тех же угловых скобках после тега, и важно задать значение атрибутов. Например . Это означает, что размер шрифта будет увеличен на два пункта, цвет текста — фиолетовый, а используемый шрифт — Tahoma. Также можно выбирать только один атрибут. К слову, код цвета пишется по принципу RGB. Можно просто посмотреть код выбранного цвета в «Фотошопе».

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

Зачем нужны мета-теги

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

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

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

Задача мета-тегов — дать пояснение о том, какую информацию содержит веб-страница или веб-сайт.

Задачи мета-тегов при отптимизации

Для оптимизации страницы под поисковые системы нужны теги :

  • Текст — парный тег. В нем прописывается то, какая информация содержится на этой веб-странице. В может повторяться то, что написано в заголовке Н1 и подзаголовках, а может и немного отличаться. Данные в теге видны не на самой странице, в только в коде и во вкладке сайта.
  • — более подробное описание того, какая информация содержится. Достаточно примерно 150-200 символов (несколько предложений). Пользователь не видит то, что содержится в данном теге, эта информация нужна для индексации поисковыми системами.
  • — у него задача похожа на задачу предыдущего тега, но разница в том, то он конкретизирует какой-либо конкретный элемент, например, поясняет, о чем изображение. Пользователю это описание может быть видно только при наведении курсора мышки на изображение, и то не всегда.

Как правильно писать мета-теги

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

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

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

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

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

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

Из статьи вы узнаете:

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

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

Зачем указывать теги и почему важно делать это правильно

Теги на YouTube – это ключевые слова и фразы, описывающие содержание видео. С их помощью поисковые алгоритмы распознают суть ролика.

Можно выделить несколько основных функций, которые выполняют теги:

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

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

Обязательно заполняйте раздел тегов при загрузке видео на YouTube

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

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

Как подобрать теги для видео на YouTube

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

Поиск популярных ключевых запросов

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

Обращайте внимание на все запросы с вхождением заданного ключевика. Например, ваше видео посвящено выполнению вечернего макияжа, и при подборе тегов для видео основная фраза – «вечерний макияж». В Wordstat Yandex такое словосочетание искало 23 тыс. человек. В то же время запрос «макияж глаз» был задан 153 тыс. раз, «красивый макияж» искало 26 тыс. человек. Поэтому стоит учесть возможность использования схожих ключей.

При подборе тегов учитывайте связанные запросы

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

Просмотр подсказок YouTube

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

К примеру, введем в поисковую строку словосочетание «вечерний макияж». В качестве подсказок YouTube показывает:

  • вечерний макияж для карих глаз;
  • вечерний макияж 2018;
  • вечерний макияж для азиатских глаз;
  • вечерний макияж смоки айс.

Далее расширяем запрос дополнительными словами и вводим «как вечерний макияж». В подсказках видим:

  • как сделать вечерний макияж;
  • как нанести вечерний макияж;
  • как сделать вечерний макияж самой себе.

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

Совет: проверьте популярность тегов, выбранных из подсказок YouTube, через Wordstat Yandex или Планировщик ключевых слов Google. Так вы сможете определить самые частые запросы и повлиять на продвижение видео в поисковой выдаче Google и Yandex.

Анализ конкурентов в своей нише

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

  • откройте страницу с нужным видео;
  • кликните по левой кнопке мыши и выберите «Просмотр кода страницы» или нажмите Ctrl + U;
  • после открытия страницы с кодом введите команду Ctrl + F;
  • в появившейся строке поиска напишите «keywords»;
  • просмотрите выделенные слова и скопируйте их.

Изучайте ключевые слова конкурентов при подборе тегов к своему видео

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

Совет: при анализе конкурентов не зацикливайтесь на видео одного канала. Просмотрите несколько популярных роликов разных авторов. Это предупредит ситуацию, когда вы неосознанно скопируете конкурента.

Использование общих тегов канала и видеороликов

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

Совет: придумайте 1-2 брендированных тега и применяйте их для всех видео. Так вы повысите шансы на вывод своих роликов в раздел похожих для видео своего канала.

Как правильно вписать теги

Количество допустимых тегов на YouTube ограничено – можно указать не более 500 символов. Постарайтесь использовать этот лимит полностью, чтобы максимально подробно описать содержание видео.

  • используйте как отдельные слова, так и словосочетания. Поисковые запросы зачастую объединяют несколько слов;
  • длинные и важные теги для видео указывайте в самом начале, чтобы поисковые роботы их обработали в первую очередь;
  • не допускайте грамматических ошибок. YouTube исправляет ошибочные пользовательские запросы. А вот тег с опечаткой учтен не будет;
  • если вы продвигаете видео на нескольких языках, используйте смешанные теги. YouTube не запрещает сочетать русские теги с тегами на иных языках;
  • не указывайте теги в описании ролика. Это считается нарушением и YouTube может удалить такое видео.

Для замены тегов просто удалите предыдущие и укажите новые

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

Почему не нужно путать теги и хештеги

Далеко не все авторы YouTube-каналов понимают разницу между тегами и хештегами. Тем более, что это могут быть абсолютно одинаковые слова и фразы. Визуальное различие – в знаке хеш # перед написанием хештега.

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

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

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

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

Вы можете объединить ролики в серию с помощью одинакового хештега в названии

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

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

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

Правильная настройка мета-тегов очень важна для SEO. Работы по заполнению, прописыванию, корректировке мета-тегов всегда выполняются при запуске проекта, сразу после того, как собрано семантическое ядро. И продолжаются по мере необходимости в течение всего периода продвижения сайта. Иногда достаточно лишь небольших изменений в метатегах, чтобы сайт вышел в ТОП10. Особенно это актуально для низкочастотных запросов, а также в тех случаях, когда сайт уже находится достаточно высоко по данному запросу (например, 11-15-я позиция в поисковой выдаче), и нужно совсем немного, чтобы выдвинуть его в ТОП. Зачастую под SEO-тегами подразумеваются Title, Description и Keywords. Однако тегов намного больше. И в этой статье мы постараемся охватить этот вопрос максимально полно.

Содержание

Что такое мета-теги

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

К тегам мета относятся:

  • description — описание веб-страницы,
  • keywords — ключевые слова,
  • http-equiv — тип отправляемого документа и кодировка (charset),
  • generator — CMS сайта,
  • author — автор,
  • copyright — авторские права,
  • robots — правила индексирования страницы для роботов,
  • viewport — данные о настройке области просмотра
  • и другие.

Подробнее можно прочитать в справке по HTML или Википедии.

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

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

Мета-теги (англ. meta tags, досл. служебные ярлыки) — это служебные слова, которые содержат важную информацию о веб-документе для поисковых систем. К таким словам (тегам) относятся теги Title, Description, Hx, Robots, Canonical.

Правильные SEO мета-теги для Яндекса и Google

Рассмотрим, как правильно написать мета-теги для сайта, как их добавить и разместить в коде. Нас будет интересовать:

  • синтаксис — то, как правильно должен быть прописан мета-тег в HTML-коде сайта;
  • требования поисковых систем к тегам;
  • примеры правильного и неправильного заполнения тегов.

Следует отметить, что в большинстве CMS (систем администрирования сайта), есть специальные поля для заполнения мета-тегов, и вам не нужно прописывать их непосредственно в HTML-коде. От вас потребуется только вписать содержание тега (Title, Description, Keywords, h2, Canonical) или выбрать подходящее значение (Index/NoIndex, Follow/NoFollow). Однако следует проверять, корректно ли размещаются теги: 1) в правильных местах, 2) правильный синтаксис, 3) значения в тегах соответствуют вашим настройкам. Причем следует проверить не только на главной странице, но и на различных внутренних страницах. Например, у нас сайт интернет-магазин. В этом случае обязательно нужно проверить, корректно ли размещаются мета-теги на главной странице, внутренних информационных, страницах категорий и товаров, поскольку веб-документы каждого из этих типов могут формироваться по своему отдельному шаблону.

Теперь подробнее о каждом из тегов.

Мета-тег Title

Это самый главный тег, который больше других влияет на продвижение сайта по ключевым словам. В большинстве случаев именно этот текст используется в заголовке сниппета, как показано в примере ниже. (Но не всегда, в заголовок так же может быть выведено содержание тега h2 или даже h3, h4).


Синтаксис

Тег должен находиться внутри контейнера … в любом месте.

Требования SEO

  • Заголовок должен быть уникальным на всех страницах сайта, а также не повторять Title на страницах других сайтов (для этого в конце Title можно добавить название организации).
  • Тайтл должен отражать суть страницы, должен быть информативным и кратким.
  • Должны присутствовать запросы, по которым продвигается данная страница, самые важные размещаем в начале тега, заголовок должен обязательно содержать 1-3 ключевых слова.
  • Не включайте в Title слишком много ключевых слов
  • Содержимое тегов Title и h2 должно быть разным — у них разные цели: Title заголовок для сниппета, h2 заголовок веб-страницы.
  • Не используйте специальных символов, пока не убедитесь, что они поддерживаются.
  • Не используйте спецсимволы (= / + _ ), знаки препинания и стоп-символы (точка, двоеточие, восклицательный и вопросительный знак) — помните, это знаки, которые разбивают пассажи в Title, что снижает взаимосвязь ключей по разные стороны от стоп-знака.
  • Составляйте тег Title для людей по всем правилам русского языка, заголовок по возможности нужно делать цепляющим и привлекательным.
  • Оптимальная длина Title – от 30 до 65 символов. Google ориентируется на длину в пикселях, рекомендуемая длина — от 200 до 571 пикселей. Если длина Title больше, то в сниппете появляется многоточие, которое также занимает дополнительное место в заголовке. Оно может появиться как в конце заголовка сниппета, так и в начале. Короткие Тайтл тоже плохо, поскольку в него помещается мало ключей. НО: при этом нет смысла придерживаться оптимальных значений длины заголовка для служебных страниц на сайте, которые НЕ продвигаются по ключевым словам.

Примеры правильного заполнения тегов

  • Купить сантехнику в Москве, интернет-магазин Куписантехнику.Ру
  • Окна REHAU в Москве, официальный сайт партнера — Пластиковые окна недорого
  • Мета-теги для сайта, Title и Description в примерах — SEOgio
  • Элемент пола Кнауф — купить в Москве по цене 310 pуб | KNAUF
  • Новости — Компания Ромашка

Ошибки и неудачные примеры мета-тегов

  • Евроремонт, ремонт дома, ремонт квартир в Смоленске, ремонт в Смоленске | Ремонт квартир, cтроительство Смоленск ( простое перечисление ключевых слов )
  • Главная – ООО Ромашка , подарки оптом, подарки сотрудникам, рекламные сувениры, корпоративные подарки. ( вначале должны быть самые главные ключевые слова )
  • Ремонт ( слишком короткий Title )
  • «Автомоечный комплекс №1»: автомойка, шиномонтаж, кафе, сауна, комната отдыха . ( название компании вначале, двоеточие, слова, по которым не будет продвигаться сайт )
  • Новости о юридических услугах и бухгалтерском обслуживании в компании Ромашка ( использование ключевых слов в заголовке страницы, которая по этим словам НЕ продвигается, это может только мешать )

Мета-тег Description

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

Пример:

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

Пример, когда description в мета и в сниппете отличаются:

Синтаксис

Тег должен находиться внутри контейнера … в любом месте.

Требования SEO

  • Должен отражать суть страницы, написан в виде согласованного текста. Может быть несколько предложений.
  • Должен быть уникальным для всех страниц сайта, не дублировать аналогичные теги на других сайтах (для этого используем название компании в тексте мета-тега).
  • В теге нужно использовать запросы, по которым продвигается данная страница, однако делать это необходимо так, чтобы они были использованы естественным образом, в нужной морфологии. Также не следует просто перечислять запросы через запятую.
  • Содержание тега не должно повторять Title.
  • Длина description должна быть не менее 70 и более 150-200 символов. Google определяет длину в пикселях, рекомендуемая длина от 400 до 930 пикселей.
  • В description желательно отразить основные преимущества компании, товара, услуги.
  • Наиболее важную информацию и фразы лучше разместить в начале мета-описания.

Примеры правильного заполнения тегов (полужирным выделены ключевые слова)

Ошибки и неудачные примеры мета-тегов

  • ( короткий, мало ключевых слов )
  • ( сгенерирован автоматически, просто вырезано начало контента на странице )
  • ( перечисление ключевых слов через запятую, неестественное мета-описание )

Мета-тег h2

Еще один очень важный тег. В нем лучше всего размещать главный, максимально частотный запрос, по которому продвигается данная страница. Заголовок страницы чаще всего должен содержать 1-3 слова. Исключение — страницы статей, товаров, проектов и т.п. То есть страницы, продвигаемые под более специфические, менее частотные запросы.
Синтаксис

Как писать на HTML / Девман

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

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

Настоятельно рекомендуем повторить все шаги, что делает Оля в этом туториале, чтобы вы лучше усвоили материал. Читать — недостаточно, так материал усваивается плохо и уже через пару дней вы всё забудете.

1. Создайте HTML-документ

Для начала Оле понадобится заготовка, файл index.html. Создайте у себя файл с таким же содержимым:

<html>
  <head>
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Здесь 3 тега, которые обязаны быть в каждом html-файле:

  • <html> — здесь лежат все теги страницы, он “корневой”, главный;
  • <head> — в этом теге лежит всё, что не контент страницы: стили, заголовок страницы в теге <title>, кодировка и так далее;
  • <body> — “тело” HTML-документа, здесь лежит всё, что вы увидите на страничке в браузере.

2. Добавьте текст

Вот что Оля должна вывести при поиске “Коала” в поисковике, для которого она верстает страницу с результатами поиска:

Коала — Википедия
Коaла (лат. Phascolarctos cinereus) — вид сумчатых, обитающий в Австралии. Единственный современный представитель семейства коаловых ... Читать ещё.

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

 Как получилось у Оли

Не долго думая, Оля добавила текст прямо внутрь <body> и получила такой результат:

Без ссылок на результаты поиска работа Оли бесполезна. Люди пришли не просто почитать про коал: им нужны ссылки на сайты про коал.

Оля помнит наизусть несколько тегов: <img> — для картинок, а <p>

— для параграфа текста. Но как добавить ссылку? Какой у неё тег?

Оля загуглила, и получила этот ответ:

htmlbook. ru — крутой сайт, на котором хорошая документация по HTML и CSS, поэтому в первую очередь присматривайтесь к нему.

Отлично, нужен тег <a>! Но как его написать?..

Как писать теги

У тегов бывают разные названия, но способов их написать всего два. Способ записи зависит от того парный он или одиночный.

Пример парного тега:

<p>Покупайте наши веб-сайты!</p>

Так на страницу можно добавить параграф с текстом. Тег <p> обязательно “закрывать” — добавлять в конце ещё один, но с чёрточкой: </p>. Так вы скажете браузеру, что всё, текст параграфа закончился.

Пример одиночного тега:

<img src="адрес_картинки">

Он сам по себе, его “закрывать” не нужно. Одиночных тегов очень мало, в основном, вам пригодится только <img> — для картинок, <br> — перенос строки и <hr> — горизонтальная линия.

Вот более развёрнутый пример, где вы можете увидеть как выглядят парные и одиночные теги рядом друг с другом:

<img src="https://dvmn.org/filer/canonical/1594118255/683/">
<h2> Зачем нужен h2 </h2>
<p>
   В теге h2 пишут заголовки, как "Как писать теги" чуть выше.
   Это парный тег, у него есть начало и конец, как и у тега p.
</p>
<p>
   У тега img нет "начала" или "конца". Он значит только то, что нужно добавить картинку.
   Браузеру не нужно сообщать, когда она "закончится".
</p>

Парные теги нужно закрывать

Допишите тег

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

<a href="#">Читать ещё</a>

Оля не знала какую ссылку поставить для ссылки, ведь ссылки будут подставляться уже при шаблонизации, поэтому оставила “#” вместо ссылки. Это называется якорь, и это такой обычай среди верстальщиков: если не знаешь, какую ссылку поставить, ставь #.

Теперь на страничке Оли появилась ссылка. Попробуйте повторить результат Оли:

4. Выделите все “коала” на странице

Поисковик выделяет жирным шрифтом все слова, которые вы искали. Оля не знает, что это за тег, но по запросу html жирный шрифт в google.com Оля нашла ссылку на заветный htmlbook.ru.

Попробуйте, у вас получится, как у Оли? У неё получился такой текст:

Сейчас текст у Оли весь одинакового размера. В нём Оля хочет выделить заголовок: Коала — Википедия крупно, а чуть ниже весь остальной текст, мельче. Оля загуглила html заголовок и сразу нашла подходящий тег: <h2>.

Странно, получается, заголовку достался отдельный тег, а остальному тексту — нет. Оля продолжила гуглить теги и узнала о теге <p>: пишут, что он нужен для текста. Но зачем? Чтобы разобраться в этом Оле пришлось узнать о строчных и блочных тегах.

О строчных и блочных тегах

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

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

  • <a> — ссылка;
  • <i> — выделение текста курсивом;
  • <b> — выделение текста жирным;
  • <br> — одиночный тег для переноса строки.

Другой вид тегов — блочные. Это теги, которые объединяют другие теги внутри себя в группы, и наделяют их смыслом. Например, блочный тег

<h2> содержит в себе заголовок страницы, а блочный тег <p> — параграф текста. За счёт них можно оформить заголовок в одном стиле, а остальной текст — в другом:

<h2>Статья о котиках</h2>
<p>
  <b>Котики</b> — замечательные животные. Я полюбил их, когда мне было 7 лет.
  Как сейчас помню, на мой <i>день рождения</i> мне подарили замечательного кота. ..
</p>

В этом примере заголовок статьи покрашен в красный цвет: color:red;. Текст же статьи при этом остался чёрным, покрасился только заголовок “Статья о котиках”. Для текста внутри тега

<p> теперь можно определить другие, отдельные стили, которые не коснутся текста в заголовке <h2>.

Внутри тега <p> есть несколько строчных тегов: <b> и <i>. Они прямо “срослись” с текстом, существуют прямо внутри него, в отличие от блочных, которые только обрамляют текст по краям.

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

  • <header> — “шапка” сайта, полоса, которая всегда висит в самом верху страницы;
  • <footer> — “подвал” сайта — самый низ страницы, где расположены всякие ссылки на техподдержку, лицензии, контакты поддержки и т. д.;
  • <main> — главный контент на странице: то, ради чего пользователь пришёл на сайт;
  • <div> — для создания прочих блоков, для которых нет специализированного тега. Например, для карточки товара в магазине или карточки поста.

Отдельно стоит выделить эти блочные теги:

  • <p> — параграф текста;
  • <h2>, <h3>... <h6> — заголовок. Чем больше число — тем мельче заголовок;

Допишите код

Теперь, когда Оля разобралась с блочными/строчными тегами, она может наконец закончить незавершённую работу: добавить на страницу теги <h2> и <p>. Заголовок с тегом <h2> показался ей слишком крупным, поэтому она воспользовалась <h3>:

Заголовок на то и нужен, чтобы на него хотелось кликнуть. А на ваш заголовок кликнуть нельзя. Что делать? Нужен тег для ссылок <a>. Но как правильно: положить тег <a> внутрь тега <h2> или наоборот?..

О комбинации тегов

Нельзя располагать блочные теги внутри строчных.

Такой код существовать не должен:

<a><h2>Заголовок</h2></a>

Тег <a> — строчный, он существует внутри текста. Тег <h2> — блочный, он оборачивает собой текст и все строчные теги для этого текста. Вот как стоило поступить в этой ситуации:

<h2><a>Заголовок</a></h2>

Оля прислушалась к этой рекоммендации и вот что у неё получилось:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
</h3>

Проверьте, у вас получилось сделать заголовок ссылкой?

Теперь Оля хочет подпись под заголовком ссылки, как вот тут:

Оля загуглила html мелкий текст и нашла тег, который поможет сделать текст меньше. Подпись под заголовком Оля решила делать прямо внутри тега <h3>, чтобы она была “едина” с заголовком <h3>, никуда не уехала и так далее:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
  <small>ru. wikipedia.org›Коала</small>
</h3>

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

В HTML обычные переносы строк игнорируются, так как текст переносится по ширине экрана. Чтобы заставить текст перенестись насильно, есть одиночный тег <br>:

<h3>
  <a href="#"><b>Коала</b> — Википедия</a>
  <br>
  <small>ru.wikipedia.org›Коала</small>
</h3>

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

<small>
    <small>
        ru.wikipedia.org›Коала
    </small>
</small>

Тег как бы “накапливает” эффект мелкого текста и делает его ещё мельче. Проверьте, у вас тоже так получится?

Попробуйте применить

Что делать, если подходящий тег не нашёлся

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

Если же и гугл не помогает — придётся подумать, как составить то, что вы хотите из того, что есть. Самый простой пример — вы хотите сделать кнопку с картинкой. Такого тега нет, зато есть кнопка и есть картинка:

<button>
    <img src="#" >
</button>

Или вы хотите, чтобы ваш текст был выделен жирным и при этом был ссылкой, вот так: жирная ссылка. Это можно сделать двумя способами, комбинируя теги <a> и <b>, они оба строчные:

<a><b>Жирная ссылка</b></a>
<b><a>Жирная ссылка</a></b>

Что ещё почитать по теме

  • Статья Строчные элементы от htmlbook.ru
  • Слайды типичные ситуации в вёрстке

Как писать теги заголовков для SEO: 5 лучших практик

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

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

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

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

Чему вы научитесь…

  • SEO 101: Как писать привлекательные теги заголовков
  • Что такое теги заголовков?
  • Почему теги заголовков имеют значение
  • 5 советов по написанию тегов заголовков
    • 1. Придумайте уникальные заголовки для каждой страницы.
    • 2. Обратите внимание на длину.
    • 3. Используйте целевое ключевое слово (но не переусердствуйте).
    • 4. Описывайте содержание страницы.
    • 5. Сделайте (краткий) пример того, что находится на странице.
  • Теги заголовков: короткие, но мощные
  • Почему изображения важны для SEO
  • 12 советов по улучшению SEO для изображений
    • 1. Используйте релевантные высококачественные изображения.
    • 2. Настройте имя файла.
    • 3. Используйте замещающий текст.
    • 4. Добавьте подписи к изображениям.
    • 5. Уменьшите размер файла изображения.
    • 6. Найдите правильное соотношение качества и размера.
    • 7. Выберите правильный тип файла.
    • 8. Добавьте изображения на карту сайта.
    • 9. Используйте адаптивные изображения.
    • 10. Используйте ленивую загрузку.
    • 11. Используйте схемы для продуктов и рецептов, где это уместно.
    • 12. Размещайте изображения на своем сайте.
  • Найдите время для оптимизации изображений

Что такое тег заголовка?

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

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

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

Если вы используете WordPress и у вас есть плагин SEO, вы можете пропустить html и добавить тег заголовка на свою страницу, заполнив поле с надписью «Заголовок» или «Тег заголовка» в вашем плагине.

Почему так важны теги заголовков

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

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

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

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

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

5 советов по написанию тегов заголовков

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

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

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

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

2. Обратите внимание на длину.

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

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

3. Используйте целевое ключевое слово (но не переусердствуйте).

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

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

4. Описывайте содержание страницы.

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

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

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

5. Сделайте (краткий) пример того, что находится на странице.

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

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

Теги заголовков: короткие, но мощные

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

Не пропустите остальную часть нашей серии SEO 101!

  • Как работают поисковые системы?
  • Как писать метаописания
  • Какая структура URL лучше?
  • Рекомендации по архитектуре веб-сайтов

Нужна помощь экспертов в улучшении вашего SEO рейтинга? Свяжитесь с экспертными SEO-услугами HostGator.

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

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

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

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

Почему изображения важны для поисковой оптимизации

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

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

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

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

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

12 советов по улучшению SEO для изображений

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

1. Используйте релевантные высококачественные изображения.

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

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

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

2. Настройте имя файла.

Это один из тех шагов, которые настолько просты, что просто удивительно, как никто этого не делает.

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

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

3. Используйте замещающий текст.

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

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

Если вы предпочитаете использовать HTML, вы можете добавить alt=»your alt text» к тегу изображения.

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

4. Добавьте подписи к изображениям.

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

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

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

5. Уменьшите размер файла изображения.

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

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

Если вы используете CMS, такую ​​как WordPress, изменить размер изображения на вашем веб-сайте после его загрузки в CMS очень просто, но это означает, что у вас все еще будет большой размер файла, который замедляет работу серверной части.

Вы можете ускорить работу своего веб-сайта, по-прежнему отображая изображения с высоким разрешением, изменив размер файлов изображений перед их загрузкой на веб-сайт. Часто это легко сделать с помощью программ, которые входят в стандартную комплектацию большинства компьютеров, таких как программа Mac Preview или Microsoft Paint. Или, если у вас есть Adobe Photoshop, вы можете использовать команду «Сохранить для Интернета», чтобы найти файл наименьшего размера, который по-прежнему обеспечивает хорошее разрешение.

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

6. Найдите правильное соотношение качества и размера.

Эта часть немного сложна, потому что вы хотите, чтобы ваши изображения выглядели действительно хорошо (см. «высокое качество» в части № 1), но вы не хотите, чтобы они были достаточно большими, чтобы замедлить работу вашего сайта.

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

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

7. Выберите правильный тип файла.

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

  • JPG является одним из наиболее распространенных форматов файлов, поскольку он использует файлы небольшого размера и широко поддерживается. Но качество изображения не всегда такое хорошее, как у файлов PNG, а формат не поддерживает прозрачный фон, поэтому в некоторых случаях JPG не работает.
  • PNG — это формат файла для изображений, обеспечивающий высокое разрешение и поддерживающий текстовое описание изображения, что хорошо для SEO. Основным недостатком PNG является то, что для него требуются файлы большего размера, чем для JPG и GIF. Часто это лучше всего подходит для сложных изображений и изображений, содержащих текст.
  • GIF не поддерживает такой широкий цветовой диапазон, как два других, но может быть хорошим выбором для более простых изображений. Он поддерживает небольшие размеры файлов и прозрачный фон.

Для фотографий часто хорошо подходит формат JPG. Для разработанной графики более распространены GIF и PNG, и если вам нужна версия более высокого качества, вам подойдет PNG.

8. Добавьте изображения на карту сайта.

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

Если вы используете WordPress, есть плагины, которые вы можете использовать для создания карты сайта для изображений, такие как Google XML Sitemap для изображений и Undira All Image Sitemap. Если вы предпочитаете делать это самостоятельно, Google предоставляет информацию о создании карты сайта для изображений здесь.

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

9. Используйте адаптивные изображения.

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

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

Если вы услышали «HTML-код» и начали отключаться, не беспокойтесь. Если ваш сайт работает на WordPress, CMS позаботится об этом за вас. Пока вы используете WordPress 4.4 или более позднюю версию (что вам определенно следует сделать сейчас), к вашим изображениям будет автоматически применяться код srcset, и вам не нужно ничего делать.

10. Используйте ленивую загрузку.

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

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

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

Если вы используете WordPress, самый простой способ реализовать ленивую загрузку — это плагин. Ленивая загрузка — одна из многих функций, включенных в плагин JetPack, если вы хотите пойти по этому пути. Или вы можете рассмотреть тот, который просто обеспечивает ленивую загрузку, например a3 Lazy Load или Lazy Load.

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

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

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

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

12. Размещайте изображения на своем сайте.

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

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

Уделите время SEO-оптимизации изображений

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

Кристен Хикс

Кристен Хикс — внештатный писатель из Остина и постоянно учится, постоянно стремясь узнавать что-то новое. Она использует это любопытство в сочетании со своим опытом работы в качестве внештатного владельца бизнеса, чтобы писать на темы, важные для владельцев малого бизнеса, в блоге HostGator. Вы можете найти ее в Твиттере по адресу @atxcopywriter.

Как писать теги заголовков для поисковой оптимизации

Обратите внимание: теперь доступна более свежая версия этого руководства — Как писать теги заголовков для поисковой оптимизации — опубликовано в мае 2016 года.

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

Так что же такое тег заголовка? Почему это важно для SEO, и как вы пишете чертовы вещи?

Метатеги

Сначала поговорим о метатегах. Мета-элементы — это элементы HTML или XHTML, используемые для предоставления информации о веб-странице поисковым системам и пользователям веб-сайта.

Такие элементы должны быть размещены как теги в разделе заголовка HTML-документа. Эти элементы:

  • Тег заголовка
  • Описание
  • Ключевые слова (они больше не используются, и вы можете получить «баллы» за спам за чрезмерное использование Bing, поэтому просто забудьте о них. Если у вас есть ключевые слова, заполненные «спамом», вы, вероятно, захотите их исправить. )

Что такое тег заголовка?

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

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

Напишите теги заголовков для людей; отформатируйте их для поисковых систем.

ПРИМЕЧАНИЕ: У каждого опытного SEO есть свои уникальные методы для этого, поэтому я собираюсь дать вам лучшие практики вместе с некоторыми из моих методов. Однако существует миллион способов написать тег title.

Как выглядит тег заголовка?

Тег заголовка выглядит следующим образом в HTML-коде:

Важные слова идут сюда

Ресурсы

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

Наконец, вот где Google показывает Тег заголовка:

ПОМНИТЕ:  Тег заголовка – это САМЫЙ ВАЖНЫЙ ОТДЕЛЬНЫЙ ТЕГ на вашей странице. Он сообщает поисковым системам, о чем ваша страница. Это по-прежнему жизненно важно для вашей стратегии SEO.

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

Что вам нужно знать, когда вы пишете тег заголовка? Вот краткий контрольный список с некоторыми советами по написанию оптимизированных тегов заголовков:

  • Длина: Длина тегов заголовков не должна превышать 70 символов, включая пробелы.
  • Размещение ключевого слова: Самые важные слова (ключевые слова) должны быть первыми в теге заголовка, а наименее важные слова — последними в теге заголовка (от наиболее к наименее). Однако, если вы работаете с языком, который читается справа налево, то это происходит в обратном порядке, и это будет от наименее важного к наиболее важному.
  • Разделение по ключевому слову: Использовать трубы | для разделения важных (ключевых слов) фраз (без запятых, знаков подчеркивания, тире или любых других знаков препинания, если ключевое слово не написано таким образом) .
  • Формулировка: Важные фразы должны быть короткими и простыми. Опустите слова, которые сделают его читабельным как предложение. (например, и, если, но, то и т. д.)
  • Название компании: Если название вашей компании , а не является частью важных (ключевых слов) фраз, поместите его в конце тега заголовка; если это часть ваших важных слов, поместите его в качестве первых слов в теге заголовка. Некоторые  специалисты по поисковой оптимизации посоветуют вам убрать это. Вы можете оставить его в целях брендинга — тогда люди увидят бренд и нажмут. Это справедливо не для всех сайтов.
  • НЕ ДУБЛИРУЙТЕ теги заголовков: Они должны быть написаны по-разному на каждой странице. Не массово копировать теги заголовков.
  • Сделайте это релевантным: Теги заголовков должны быть написаны так, чтобы описывать содержимое страницы. (например, страница «О нас» будет выглядеть так:

О компании | Важные ключевые слова | Название компании

или

Важные ключевые слова | О нас | Название компании

Google и теги заголовков

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

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

Теги заголовков, заполненные ключевыми словами

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

Допустим, ваш сайт пытается ранжироваться в категориях Blue Bells и Yellow Bells. Много раз вы будете видеть, как основное ключевое слово повторяется несколько раз в теге заголовка. Это может выглядеть так:

Синие колокольчики, желтые колокольчики, все виды колокольчиков | Колокола Колокола и многое другое | Doors. com

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

Синие и желтые колокольчики | Дверные звонки | Doors.com

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

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

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

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

Некоторые примеры написания тегов заголовков

Давайте рассмотрим несколько примеров написания тегов заголовков на реальных примерах.

Если вашими важными словами (ключевыми словами) были «Чарли Шин» и  «Победа», ваш тег заголовка будет написан в следующем порядке:

Чарли Шин Победа

Чарли Шин будет первым словом в теге.

А что, если бы у нас было более одного набора слов? Что, если бы моими ключевыми словами были «Победа Чарли Шина» и «Кровь тигра»? Ваш тег заголовка по-прежнему будет написан с «Charlie Sheen Winning» в качестве первых слов в теге. Затем вы добавили бы канал | и «Tiger’s Blood» в качестве второй фразы:

Charlie Sheen Winning | Tiger’s Blood

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

А что, если бы у нас было более одного набора слов и  название компании, для которого мы не беспокоились об оптимизации (название компании не было частью проблемы репутации). Если бы моими словами были «Победа Чарли Шина» и «Кровь тигра» и «CBS», вы бы разделили эти три фразы вертикальной чертой, где CBS была бы последней и самой дальней от начала, которую Google считает наименее важной фразой:

Чарли Шин Победа | Кровь тигра | Си-Би-Эс

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

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

Тег заголовка Написание популярной викторины!

При использовании строгих принципов SEO. Какие ЛУЧШИЕ теги заголовков для важных (ключевых слов): (выберите 2) «Чарли Шин» «Победа» «Шоу Говарда Стерна» при оптимизации (попытке ранжирования) слов «Чарли Шин (1) Победа ( 2)”

  1. Чарли Шин Победа на шоу Говарда Стерна
  2. Шоу Говарда Стерна и Чарли Шина | Выигрыш
  3. Чарли Шин набирает очки на шоу Говарда Стерна
  4. Чарли Шин | Победа | Шоу Говарда Стерна
  5. Чарли Шин и Говард Стерн выигрывают шоу
  6. Победа | Чарли Шин на шоу Говарда Стерна
  7. Победа Чарли Шина | Шоу Говарда Стерна
  8. Не имеет значения, пока есть все слова

Если бы я писал это, правильный ответ был бы № 4 .

Примечание редактора. Первоначально эта колонка была опубликована 23 февраля 2012 г. и стала самой популярной колонкой года в Search Engine Watch в 2012 г.