Как добавить теги на сайт: как добавить теги на свой сайт для поисковых систем — Вопрос от Конантинст Хаустов

Содержание

Правильные методы добавить метатеги в сайты на WordPress, Bitrix и Joomla

Автор статьи: Евгений Костырев,
веб-программист компании SEO.RU

Метатеги для сайта — что это?

Метатеги — это специальные теги в языке гипертекстовой разметки HTML, которые находятся в контейнере <head> </head> и предназначены для передачи информации поисковым системам и браузерам. Вот как они выглядят в поисковой выдаче:

Самые важные метатеги для сайта — это:

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

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

Как вручную прописать метатеги в HTML-коде страницы?

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

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8"> <!--Эта строчка указывает кодировку страницы-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Эта строчка отвечает за масштабирование контента для мобильных устройств-->
    <meta name="description" content="Запуск интернет-магазина — это сложное мероприятие, и новичку легко допустить ошибку.
%MINIFYHTML204c3b9c8d173d50cab5f266dd02897f12%
Рассказываем, как не столкнуться с самыми распространенными недочетами"> <!--В эту строчку добавляется краткое описание страницы--> <meta name="Keywords" content="интернет-магазин, запуск, ошибки"> <!--В эту строчку добавляются ключевые слова--> <title>50 ошибок при запуске интернет-магазина и способы их избежать</title> <!--Эта строчка содержит Title — название страницы--> </head> <body> <p>Тут идет ваш контент</p> </body> </html>

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

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

Рассмотрим 3 основных CMS, которые остаются наиболее популярными и чаще всего встречаются в моей работе: WordPress, 1С-Битрикс и Joomla.

Как добавить метатеги в сайт на WordPress?

«Из коробки» WordPress не дает возможности прописать нужные метатеги, поэтому для этого используются плагины. Самые известные из них — это Yoast SEO и All in One SEO Pack. Разберем их.

Yoast SEO

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

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

Также можно использовать готовые переменные:

И создавать маски для разных типов контента (страниц, карточек товара, записей):

All in One SEO Pack

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

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

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

Как сформировать метатеги сайта на 1С-Битрикс?

У Битрикса есть SEO-модуль «из коробки», поэтому ничего дополнительно устанавливать не нужно. Достаточно просто открыть нужную вам страницу в админ-панели и перейти на вкладку SEO. Там будет полный доступ к метатегам страницы:

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

Чтобы все элементы раздела приняли маску, которую вы указали, нужно в настройках раздела найти пункт «Настройки для элементов» и там уже прописать то, что вам нужно:

Как изменить метатеги для сайта на Joomla?

Joomla, как и Битрикс, имеет свой SEO-модуль «из коробки», но реализован он иначе.

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

Затем в разделе «Параметры страницы», в окне «Заголовок страницы в браузере» прописать Title:

А в разделе «Метаданные» указать Description и Keywords:

Joomla, к сожалению, не может создавать маски. Для этого нужно вручную писать плагин или искать из имеющихся.

Как видите, при помощи встроенных опций современных CMS добавлять и редактировать важные для поискового продвижения сайта метатеги понятно и просто.


Как отобразить теги на веб-странице?

Любые теги никак не показываются в окне браузера, поскольку воспринимаются браузером как команды для вставки элементов и изменения их свойств. Но иногда требуется на веб-странице вывести теги, например, для демонстрации HTML-кода. В этом случае используйте спецсимволы &lt; и &gt; для замены угловых скобок < и >. При этом тег <p> будет выглядеть как &lt;p&gt; (пример 1)

Пример 1. Теги на странице

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вывод тегов</title>
  <style>
   .ex {
    border: dashed 1px #634F36;
    background: #fffff5;
    font-family: "Courier New", Courier, monospace; 
    padding: 7px;
    font-size: 80%;
    margin: 0 0 1em;
   }
  </style>
 </head>
 <body>
   <p>Пример страницы </p>
   <p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; 
      &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;<br />
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />
    &lt;head&gt;<br />
      &lt;meta http-equiv=&quot;Content-Type&quot; 
        content=&quot;text/html; charset=utf-8&quot; /&gt;<br />
      &lt;title&gt;Формула этанола&lt;/title&gt;<br />
    &lt;/head&gt;<br />
    &lt;body&gt;<br />
     &lt;p&gt;Формула этанола 
     С&lt;sub&gt;2&lt;/sub&gt;Н&lt;sub&gt;5&lt;/sub&gt;ОН&lt;/p&gt;<br />
    &lt;/body&gt;<br />
    &lt;/html&gt;
  </p>
 </body>
</html>
%MINIFYHTML204c3b9c8d173d50cab5f266dd02897f21%

В данном примере выводится код веб-страницы, а чтобы браузер не воспринимал теги напрямую, скобки < и > заменены специальными символами &lt; и &gt;.

Результат примера показан на рис. 1.

Рис. 1. Теги в документе

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

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

Что означает

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

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

Тематические отметки используют в двух случаях:

  • Когда нужно пометить записи, статьи или иные элементы, чтобы сгруппировать их по темам.
  • Для тегов HTML, являющихся символами разметки языка. Они дают возможность сформировать и структурировать сведения, находящиеся на сайтах. Внутри них находится содержимое, отображающееся на странице. Визуально можно представить как: <Открывающий_тег>Содержимое<Закрывающий_тег>.

Для чего нужны и где используются

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

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

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

Язык гипертекстовой разметки

Его появление вполне закономерно. Он весьма эффективен и выступает в качестве монументальной базы в мировой сети. Называют его HTML (Hyper Text Markup Language).

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

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

Метки как части языка HTML

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

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

Так отметки успешно доказали свою эффективность и стали частью языка html.

Как они работают

Разметки текстовых данных обозначаются угловыми скобками (<Н3>). Между ними находится обозначение тематики располагающихся за тегом сведений.

Дескрипторы подразделяются на парные и непарные. Двойные объединяют некоторое количество текста и выглядят так: <тег>текстовая основа, соответствующая определенной теме</тег>. Первый является открывающим, второй закрывающим, он дополняется правым слешем.

Есть еще одиночные отметки без закрывающей части. Так, <p> говорит об имеющемся абзаце, он встречается не только в одиночном, но и в парном варианте. А <code> свидетельствует о том, что идущие за ним текстовые данные представляют собой код какой-либо программы.

Служебные теги

Парные <HTML></HTML> определяют границы текста. <Title></Title> устанавливают рамки заголовка, а <body></body> предназначены для открытия и закрытия программного тела.

Все отметки подразделяются на:

  • Пустые (<col>,<br>,<base>).
  • Те, в которых содержится неформатированный текст (<script>).
  • Те, что выводят его (<textarea>).
  • Дескрипторы с другой стороны с иной формой имени (MathML).
  • Простые теги, которые больше всего распространены.

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

Имя оповещает о том, в каком отображении окажется текст. Чтобы иметь наглядное представление, что значит тег и как использовать его в работе, неплохо рассмотреть несколько примеров.

  • Заголовок первого уровня выглядит так: <h2>Что такое HTML простыми словами</h2>.
  • Между открывающей и закрывающей метками располагается текстовый блок — абзац: <p></p>.
  • Для оформления курсивом: <i>наклонный шрифт</i>.
  • Сделать блок с мелким текстом: <small>месторасположение небольшой надписи</small>.
  • Вместилище для графических изображений: <img>картинка, схема, фотография</img>.
  • Таблица: <table>местонахождение указанного элемента</table>.
  • Указывает, что именно будет демонстрировать браузер юзеру. Так, программа на языке Java Script предстает перед пользователем в образе:   <script>сама программа</script>.
  • Нумерованный список устанавливается таким образом: <ol>здесь находится перечень</ol>.

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

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

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

На смартфоне

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

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

На YouTube

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

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

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

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

Мета-теги: что это такое

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

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

Что значит добавить тег

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

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

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

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

h2: что это такое

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

Стиль шрифта рекомендуется подбирать простой и понятный. Единственным условием выступает его крупный размер. Делается это не только для того, чтобы текст моментально привлек внимание юзеров, хотя и этот пункт весьма немаловажный. Н1 играет ведущую роль в процессе оптимизации. По сути, h2 является названием страницы или записи и должен содержать краткую информацию о контенте, который идет далее. Так, пользователь, держащий страницу о постройке жилья из дерева, должен использовать в h2 главные ключевые слова по тематике, например: <h2>Строительство деревянного дома своими руками: расчет бюджета сруба, подбор материалов, подготовительные работы</h2>. Все ясно и понятно, нет ничего лишнего, но дана информация о самом важном. 

Что такое теги в Инстаграме

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

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

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

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

Основание и успешное ведение бизнес-аккаунта позволяет пользователям-бизнесменам:

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

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

Как создать сайт в блокноте?

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

Что такое HTML

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

Вот как выглядит на экране домашняя страница сайта umi.ru:

А вот как её «видит» браузер:

Чтобы понять, как работает HTML необходимо ознакомиться с его основным понятием, каковым является тег. Этот термин обозначает специальный структурный элемент, представляющий собой определенную комбинацию символов, при помощи которого и осуществляется разметка страницы. Определить тег очень просто — что бы он не означал, он всегда выделен в тексте знаками “<” перед и “>” в конце названия тега. Например, <script> или <table>, означающие «сценарий» и «таблица» соответственно. Если действие относится к определённой части текста, например, выделение полужирным шрифтом, то границы этого участка обозначаются парными тегами. В случае с полужирным текстом это будут комбинации <b> и </b>. Обратите внимание, что любой закрывающий тег отличается от открывающего косой чертой “/”.

Существуют и непарные теги, когда действие разовое и не относится к определённому участку текста, например, перенос строк, обозначаемый в HTML комбинацией <br>.

 

Основные виды тегов и их роль в разметке веб-страницы
  • <!DOCTYPE html>. С этого элемента начинается сайт. Он сообщает браузеру, что документ создан с помощью языка гипертекстовой разметки HTML. По большому счёту, этот элемент не обязателен, но его присутствие позволит избежать потенциальных проблем с отображением страницы;
  • парный тег <html> и </html> сообщает о начале и конце каждой страницы;
  • внутри между элементами парного тега <head> и </head> указывается всевозможная служебная информация о странице, в том числе, ее заголовок, указания на стили, использованные в ее оформлении, подключаемые скрипты, специальные метаданные;
  • ещё один парный тег <title> содержит заголовок страницы и находится внутри тега <head>. Благодаря этому тегу браузер и поисковые роботы определяют название каждой страницы;
  • область документа, отображаемая непосредственно на мониторе и видная пользователю, ограничивается парным тегом <body>. На странице эта область следует за тегом </head>.
  • для добавления в текст ссылок служит тег <a>, однако он несколько отличается от предыдущих своим видом и выглядит <a href=”URL ссылки”>текст ссылки</a>.
  • абзацы в тексте обозначаются парным тегом <p>.
  • для разделения текста при помощи подзаголовков различных уровней существуют парные теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Благодаря им можно выделять текст в зависимости от его важности.
  • для выделения текста полужирным шрифтом служит парный тег <b>.

Это всего лишь небольшая часть из всего разнообразия тегов, которых насчитывается около ста. Тем не менее, с их помощью уже можно начинать  cоздание сайта через блокнот. Есть также ряд правил, по которым теги располагаются в документе. Для основных тегов, включая <html>, <head>, <title>, <body>, существует строгий порядок распределения, тогда как в блоке, ограниченном тегами <body>, остальные теги комбинируются в зависимости от общего замысла и в соответствии со стандартами языка HTML.

Создаём сайт своими руками в Блокноте

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

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

Как уже говорилось, документ начинается с тега <!DOCTYPE html>, который сообщает браузеру, как его интерпретировать. Это и будет первая строчка в коде вашего сайта.

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

Затем выделим в документе участок страницы со служебной информацией, добавив парный тег <head> между тегами <html>, как показано ниже:

Чтобы указать заголовок страницы, в пространстве между тегами <head> и </head> в одну строку напишите парный тег <title></title> и вставьте между них заголовок (название сайта), например, «Создание сайта через блокнот».

А вот как её «видит» браузер:

Это будет единственная служебная информация нашего сайта. Далее приступаем к оформлению той части, которая будет видна на экране дисплея, выделив её тегами <body>. Открывающий тег ставим в строке после тега </head>, а закрывающий — перед тегом </html>, обозначающим, как мы помним, конец страницы.

Теперь, воспользовавшись парным тегом <h2> и </h2>, в строке, следующей после тега <body>, укажем заголовок нашей страницы, который будет показан пользователю. Между этими тегами добавим название страницы, например то же, что и у сайта — «Создание сайта через блокнот».

Наполним сайт содержанием, создав один абзац текста, и ограничив его открывающим тегом <p> в строке после </h2> и </p> в конце абзаца. Между ними добавим текст. Например: «Чтобы научиться  cозданию сайта через блокнот, сначала необходимо получить представление об HTML».

Если вы хотите в тексте сделать выделение полужирным шрифтом, воспользуйтесь парным тегом <b>. В нашем примере выделим слово «HTML» — <b>HTML</b>.

Создадим подзаголовок. Для этого в новой строке пропишем парный тег <h4> в который вставим подзаголовок следующего блока текста, например, «Что такое теги».

Далее создадим еще один абзац текста, использовав уже знакомые нам теги <p> и </p>, вставив между ними отрывок из нашей статьи.

Не переживайте, что текст вышел за пределы окна — на экране компьютера или смартфона он будет автоматически подстроен под ширину страницы. Впрочем, если вы хотите сделать перенос, вставьте тег <br> — теперь строка будет заканчиваться именно в этом месте, а дальнейший текст начинаться с новой строки (на экране, но не в Блокноте). Так и поступим — разделим наш абзац переносом.

Осталось научиться вставлять ссылки — один из ключевых элементов гипертекстов. Для этого воспользуемся тегами <a href=””></a>. Например, в новом абзаце с текстом: «В создании сайта через блокнот нам помогли специалисты компании UMI», — дадим ссылку на сайт. В результате у  вас должна получиться комбинация вида <a href=”https://umi.ru/”>UMI</a>. То есть, между кавычками в теге <a href=””> указывается URL страницы, на которую ведёт ссылка, а перед закрывающим тегом </a> указывается текст, который будет отображён на странице. Как это выглядит на деле, видно на приведённом ниже рисунке.

Наш наипростейший сайт, созданный с помощью блокнота, почти готов. Осталось сохранить документ в формате *.html. Теперь его можно открывать в любом браузере. Заметьте, после сохранения с расширением HTML содержимое файла выглядит несколько по-другому — теперь в нём выделены все теги и ссылки, а при помощи расположенных слева плюсов и минусов можно скрывать и раскрывать содержимое отдельных блоков, находящихся между парными тегами, к примеру, скрыть участок, ограниченный тегом <head>.

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

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

Google Tag Manager — что это и как настроить Google Analytics с его помощью

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

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

бонус для читателей

Подробный гайд, как установить Google Tag Manager на свой сайт

Скачать материал

Содержание

Что такое Google Tag Manager

GTM — это система для удобного управления JavaScript и HTML тегами (фрагментами кода) без помощи разработчиков. Или почти без помощи — один раз все же придется обратиться к программистам, чтобы установить на сайт код самого Диспетчера тегов. Зато потом вы сможете самостоятельно подключать любые сервисы и добавлять новые скрипты уже в интерфейсе Google Tag Manager.

С помощью Диспетчера тегов вы можете:

  • Настроить отправку данных в Google Analytics, Яндекс. Метрику, AppsFlyer и другие аналитические системы.
  • Размещать на сайте теги ремаркетинга Google Ads, DoubleClick, Facebook и пр.
  • Размещать на сайте кастомные HTML скрипты, например, для показа баннеров, проведения A/B тестов и т. д.
  • Быстро вносить изменения в установленные теги.

Кому будет полезен Google Tag Manager:

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

Узнайте, какие кампании приносят прибыль, а какие не окупаются

Автоматически импортируйте расходы из рекламных сервисов в Google Analytics. Сравнивайте затраты, CPC и ROAS разных кампаний в одном отчете.

Плюсы и минусы Диспетчера тегов

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

  • GTM — полностью бесплатный инструмент.
  • Огромное количество готовых интеграций с другими сервисами. Перечень всех поддерживаемых тегов вы можете посмотреть в справке.
  • Диспетчер тегов положительно влияет на скорость сайта — код становится короче, благодаря чему страницы загружаются быстрее.
  • В GTM есть режим проверки и отладки. Вы можете протестировать работу тегов прежде, чем добавлять их на сайт.
  • Google Tag Manager сохраняет все изменения в настройках. Вы в любой момент можете вернуться к предыдущей версии, если опубликовали код с ошибками, например. Также можно узнать, кто именно, когда и какие изменения внес.
  • Удобная совместная работа — вы можете выдать доступы разного уровня к аккаунту в Диспетчере тегов своим сотрудникам или маркетологам из рекламного агентства, с которым вы сотрудничаете.
  • С помощью GTM легко подтвердить права на сайт для Search Console.
  • У Диспетчера тегов есть большое комьюнити, официальный форум и справка, где вы всегда найдете ответ на свой вопрос.

К недостаткам Google Tag Manager можно отнести такие пункты:

  • Если при внесении правок случайно повредить код контейнера GTM, то все теги, развернутые с его помощью, перестанут работать. Придется искать ошибку в коде и исправлять.
  • Для установки кода GTM на сайт и более гибких настроек (например, пользовательских тегов) необходимо знание HTML, JavaScript и DOM.
  • Нет онлайн-поддержки и отчетов внутри сервиса.

Если вам нужна помощь с установкой и настройкой Google Tag Manager, вы можете воспользоваться услугой «Настройка веб-аналитики» от OWOX BI. Наши специалисты разработают индивидуальную систему метрик под ваши цели и бизнес-задачи.

Структура и термины Google Tag Manager

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

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

Тег, как мы уже писали выше — это фрагмент кода, который необходимо выполнить. Он может выполнять разные функции: передавать данные в системы аналитики и другие сторонние приложения; запускать ремаркетинг; отправлять email пользователям, бросившим корзину; менять контент для A/B тестов и т. д.

Вы можете использовать готовые шаблоны тегов:

Или создавать собственные теги, если вы хорошо разбираетесь в HTML:

Триггер — это обязательное условие для срабатывания тега. Его можно настроить как для активации тега, так и для блокировки. Триггер должен содержать событие: клик по кнопке, загрузка страницы, переход по ссылке и т. д. Также для каждого триггера можно настроить фильтры, например, указать URL страниц, на которых должен срабатывать тег.

В Google Tag Manager все триггеры разделены на 4 группы:

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

Триггеры в Диспетчере тегов:

Переменная — это параметр и его значение. В триггерах с помощью переменных настраивают фильтры. Например, если вам нужно отслеживать просмотр страницы www. site. ru/tovar, вы можете настроить триггер «Просмотр страницы», который будет срабатывать только тогда, когда переменная Page URL принимает значение site. ru/tovar. В тегах переменные используются для хранения и передачи данных о действиях пользователей на сайте, транзакциях, товарах и т. д.

На момент написания этой статьи в GTM доступно 44 встроенных переменных для сайтов. Чтобы использовать переменную, ее нужно активировать, поставив напротив галочку:

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

Как настроить Google Analytics с помощью Google Tag Manager

Шаг 1. Создайте аккаунт в Google Analytics, если у вас его еще нет. Как это делается, мы детально описали в статье про настройку GA.

Шаг 2. Установите код контейнера GTM на свой сайт. Для этого вы можете использовать инструкцию, которую мы подготовили.↴

бонус для читателей

Подробный гайд, как установить Google Tag Manager на свой сайт

Скачать материал

Шаг 3. Создайте переменную просмотра страниц. Для этого на вкладке «Рабочая область» выберите «Переменные» — «Пользовательские переменные» и нажмите «Создать». В поле «Тип переменной» выберите из выпадающего списка «Настройки Google Analytics», а в поле «Идентификатор отслеживания» укажите ID вашего ресурса Google Analytics, в который хотите передавать данные.

Придумайте название для переменной, например GUA Pageview, и сохраните ее.

Не знаете где посмотреть ID вашего ресурса? Открываем Google Analytics, на вкладке «Администратор» выбираем «Настройки Ресурса» и находим идентификатор отслеживания:

Шаг 4. Создайте тег, который будет отправлять данные о просмотре страниц в ресурс Google Analytics. Для этого в разделе «Теги» нажмите «Создать», выберите из списка тип тега «Google Аналитика — Universal Analytics». В поле «Тип отслеживания» укажите «Просмотр страницы», а в поле «Настройки Google Analytics» — переменную, которую создали в Шаге 3. Затем выберите встроенный триггер «All Pages», назовите и сохраните тег.

Шаг 5. Опубликуйте изменения, которые вы только что внесли в свой контейнер. Для этого на вкладке «Рабочая область» нажмите на кнопку «Отправить».

В открывшемся окне укажите название новой версии контейнера и нажмите «Опубликовать».

ВАЖНО! Если ранее вы вручную разместили код Google Analytics на сайт, то его нужно удалить и одновременно с этим опубликовать контейнер GMT, иначе данные будут дублироваться.

Шаг 6. Проверьте, передаются ли данные в Google Analytics. Для этого зайдите в свой аккаунт GA и откройте отчет «В режиме реального времени — Обзор». В него должны начать поступать данные:

Возможные проблемы при работе с Google Tag Manager

Проблема: Теги отрабатывают верно в режиме отладки, но данные в GA не поступают.

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

Решение: Указать верный идентификатор отслеживания. Где его взять, мы описали в Шаге 3.

Проблема: При переходе на Google Tag Manager резко возросло количество сеансов и пользователей.

Причина: Опубликован контейнер GTM, а код Google Analytics, установленный вручную, не удален. Из-за этого данные передаются в GA и через GTM, и через насайтовый код, в результате чего дублируются.

Решение: Удалить насайтовый код GA.

Проблема: Вы внесли изменения в контейнер Google Tag Manager, но в режиме отладки их не видете.

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

Решение: Обновить предварительный просмотр. Проверить, какая «Рабочая область» в режиме предварительного просмотра.

Полезные ссылки и примеры задач, решаемых с помощью Диспетчера тегов

Google Tag Manager в связке с Google Analytics дает вам очень гибкую систему аналитики и позволяет настроить сбор практически любых данных с сайта. Мы подготовили подборку статей по теме — узнайте, какие еще задачи вы можете решить благодаря GTM:

  1. Статья «Дублируются заказы в Google Analytics. Что делать?», в которой вы узнаете причины задваивания транзакций и найдете руководство, как настроить GTM, чтобы избежать дублей.
  2. Статья «GTM может больше: применяем пользователь­ские теги» о том, как создавать пользовательские теги для проведение А/В тестов, размещения на сайте новых элементов (например, баннеров), и динамической подмены телефонных номеров.
  3. Статья «И целого сайта мало: Зачем анализировать мобильные приложения», в которой вы найдете гайд, как отслеживать установки мобильных приложений с помощью Google Tag Manager.
  4. Статья «Расширенная электронная торговля: Настрой меня полностью» о том, как настроить функцию «Enhanced Ecommerce» в GA с помощью GTM.
  5. Статья «Как настроить динамический ремаркетинг в Google Ads с помощью Google Tag Manager», в которой вы найдете подробное пошаговое руководство.

И на закуску вебинар «На шаг впереди: приемы и тонкости работы с Google Tag Manager», на котором наш веб-аналитик показала, как:

  • Отслеживать JavaScript ошибки, которые мешают посетителям вашего сайта совершать целевые действия.
  • Отслеживать глубину прокрутки страницы — для контент-проектов, которые хотят оценивать эффективность разделов или авторов, а также для тех, у кого много элементов на странице и она занимает несколько экранов
  • Убрать дублирование транзакций в Google Analytics.
  • Использовать «Последовательность тегов» (Tag Sequencing), «Рабочие области» (Workspaces), «Подтверждение» (Approvals) и другие полезные опции в GTM.

Заполните форму, и мы пришлем вам запись и презентацию вебинара на email.

Запись вебинара

На шаг впереди: приемы и тонкости работы с Google Tag Manager

Часто задаваемые вопросы

Открыть все Закрыть все
  • Что такое Google Tag Manager?

    GTM — это система для удобного управления JavaScript и HTML тегами (фрагментами кода) без помощи разработчиков. Или почти без помощи — один раз все же придется обратиться к программистам, чтобы установить на сайт код самого Диспетчера тегов. Зато потом вы сможете самостоятельно подключать любые сервисы и добавлять новые скрипты уже в интерфейсе Google Tag Manager.

  • Зачем нужен Google Tag Manager?
    С помощью Диспетчера тегов вы можете:
    • Настроить отправку данных в Google Analytics, Яндекс. Метрику, AppsFlyer и другие аналитические системы.
    • Размещать на сайте теги ремаркетинга Google Ads, DoubleClick, Facebook и пр.
    • Размещать на сайте кастомные HTML скрипты, например, для показа баннеров, проведения A/B тестов и т. д.
    • Быстро вносить изменения в установленные теги.
  • Как настроить Google Analytics с помощью Google Tag Manager?
    1. Создайте аккаунт в Google Analytics, если у вас его еще нет.
    2. Установите код контейнера GTM на свой сайт с помощью инструкции, которую вы можете скачать в этой статье.
    3. Создайте переменную просмотра страниц в Google Tag Manager.
    4. Создайте тег, который будет отправлять данные о просмотре страниц в ресурс Google Analytics.
    5. Опубликуйте изменения, которые вы внесли в свой контейнер.
    6. Проверьте, передаются ли данные в Google Analytics — в отчете «В режиме реального времени — Обзор».

Тег Title (название страницы) | SEO-портал

Заголовки сниппетов в поиске

Важная роль тега title в SEO в частности обуславливается его влиянием на формирование заголовков сниппетов:

Тег

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

Справка Google

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

Заголовки сниппетов отображают только релевантные поисковым запросам фрагменты тегов Title.

Формирование заголовка сниппета не из <title>

Нередко бывает, что заголовок сниппета формируется не из названия страницы по ряду причин:

  • нерелевантное содержание (нет вхождений слов из запроса),
  • слишком длинное содержание (более 200 символов, в идеале — не более 55),
  • спам (перечисление ключевых слов и фраз),
  • неуникальный текст (названия страниц на сайте дублируются).

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

Справка Google

Источники формирования заголовков сниппетов

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

  • тегов заголовков h2-h6,
  • содержимого мета-тега Description,
  • анкоров внешних или внутренних ссылок,
  • содержимого других HTML-элементов контента.

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

Платон Щукин

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

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

<head>
  <title>Название страницы</title>
</head>

Учитывая важность названия веб-страницы в SEO, крайне важно знать, как правильно его заполнять:

Обязательное заполнение

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

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

Справка Google

Уникальность

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

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

Справка Google

Суть страницы

Название должно отражать суть страницы (желательно в пределах одного предложения).

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

Справка Google

Длина (количество символов)

Заголовок сниппета поисковой выдачи ограничен определенным количеством символов. Если название страницы превысит это количество, заголовок сниппета будет содержать только его фрагмент. Сделайте всё возможное, чтобы содержимое тега title отображалось в сниппете полностью. Идеальный вариант – название длиной не более 55 символов.

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

Справка Google
Слишком длинный заголовок

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

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

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

Место вхождения ключевой фразы

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

Краткий и содержательный заголовок

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

Осмысленное содержание

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

Хорошо также, если заголовок не только содержит ключевые слова, но также информативен и актуален.

Яндекс.Помощь

Спам ключевыми словами

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

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

Справка Google

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

Яндекс.Помощь

Наличие лишних слов

Лишние слова (так называемая «вода», например: «наш», «самый», «лучший») «размывают» конкретику заголовка и увеличивают его длину – откажитесь от их использования в теге title.

Названия страниц должны быть информативными и краткими.

Справка Google

Спецсимволы Unicode

В теге <title> рекомендуется применять спецсимволы Unicode (например: ©, ®, ♥), тем самым делая сниппет более привлекательным для пользователей.

Наличие пассажей

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

Название сайта или компании

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

<title>[название страницы] [разделитель] [название сайта]</title>

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

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

Справка Google

В качестве разделителя названия бренда от названия страницы часто применяются символы (тире), - (дефиз), | (вертикальная черта), : (двоеточие) и / (косая черта). Для примера обратим внимание на оформление заголовков веб-страниц, относящихся к сервисам Яндекса и Google.

В качестве разделителя в заголовках веб-страниц сервиса Яндекс.Помощь применяется тире, а на страницах Справка Google — дефиз:

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

Название категории

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

<title>[название страницы] [разделитель] [название категории] [разделитель] [название сайта]</title> 

Пример для интернет-магазина:

<title>Велосипед Marin Sky Trail | Горные велосипеды | Магазин велосипедов</title>

Пример для информационного сайта:

<title>Лечение и профилактика продольного плоскостопия | Статьи | Медицинский блог</title>

Для примера возьмем страницы веб-сервисов Яндекса и Google, содержащие в заголовке название страницы, название категории и название сервиса:

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

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

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

ЗапросГеозависимостьЧастота для Москвы
мебельда10 000
мебель на заказда3 500
купить мебельда1 500
купить мебель в Москвенет400
мебель в Москвенет200
мебель под заказда200
мебель на заказ в Москвенет150
заказать мебельда60
купить мебель на заказда20
мебель ценыда20

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

Спам ключевиками в теге

Бездумно перечислять целевые запросы в названии страницы ни в коем случае нельзя:

<!-- Так делать нельзя, можно попасть под санкции: -->
<title>Мебель на заказ, купить мебель, мебель под заказ, мебель в Москве, заказать мебель</title>

Такой текст однозначно будет воспринято поисковыми системами как спам.

«Вода» в теге Title

Большое количество лишних слов и фраз «размывают» релевантность заголовка целевым запросам и увеличивают его длину:

<!--Слишком много «воды»:-->
<title>Частное предприятие «Интерплюс» - производство и реализация мебели в городе Москва по низким ценам от производителя</title>

Такие «водянистые» заголовки страниц не способны конкурировать в борьбе за позиции по высокочастотным высококонкурентным коммерческим запросам.

Несколько предложений в теге Title

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

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

Чтобы правильно написать тег title, необходимо предварительно хорошо оценить важность целевых запросов. В нашем случае:

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

На основании анализа запросов правильный тег title, релевантный всем перечисленным целевым запросам, можно написать следующим образом:

<!-- Конкретное релевантное название: -->
<title>Купить мебель на заказ в Москве по низким ценам</title>

Такой текст обеспечит привлекательный заголовок сниппетов поисковой выдачи:

Привлекательный заголовок сниппета Google

Проанализируем релевантность данного заголовка целевым запросам.

Прямые вхождения ВЧ- и СЧ-запросов:

  • «мебель»,
  • «мебель на заказ»,
  • «купить мебель»,
  • «мебель на заказ в москве»,
  • «купить мебель на заказ».

Минимально разбавленные вхождения НЧ-запросов:

  • «купить мебель в москве»,
  • «мебель цены».

Как добавить теги — метки к статьям. Плагин wordpress Simple Tags

10 октября | Автор З. Владимир | 16 комментариев

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

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

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

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

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

В общем хватит теории, давайте вернемся к нашему плагину. Вот ссылка на его официальную страницу — http://wordpress.org/extend/plugins/simple-tags. После скачивания установите Simple Tags в директорию с другими плагинами, а затем активируйте в админке. На этом все. Здесь не нужно копаться в коде, править файлы шаблона и т.д. На данный момент плагин совместим до версии WordPress 4.5.4, и обновлялся последний раз 6 месяцев назад, что говорит о его востребованности и постоянной поддержке в рабочем состоянии.

♦ Как правильно настроить WordPress плагин Simple Tags 

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

Используя пункт меню «Mass edit terms»(Массовое редактирование меток), вы можете в удобном режиме редактировать метки сразу для всех статей вашего блога (страница выполнена в виде таблицы).

Можно включить опцию «Autocompletion with old input» — автоматического создания меток. В этом случае они будут генерироваться самостоятельно на основе содержимого заметки и ее заголовка. Понятно, что лучше сделать все своими руками. Но когда у вас нет лишнего времени, а заметок на блоге очень много, можно прибегнуть к данному способу.

Также в настройках можно скрыть метки от индексации, можно активировать метки для статичных страниц и сделать много чего еще (настроек довольно много).

♦ Как добавить теги или метки к постам

При редактировании или добавлении заметки на блог у вас появится специальное поле для заполнения меток.

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

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

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

Как видите, ничего сложного в этом плагине нет. Можно даже оставить настройки по умолчанию и использовать дополнительный функционал плагина Simple Tags во благо своего блога.

 

Всего хорошего и удачи всем!!
С огромным Уважением, Владимир

Понравилась статья? Подпишитесь на новости блога или поделитесь в социальных сетях, а я отвечу вам ВЗАИМНОСТЬЮ

Обратите внимание на другие интересные статьи:


тегов — Поддержка — WordPress.com

Теги

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

Содержание

Добавление тегов через модуль тегов
Управление тегами в настройках сайта
Списки тем
Добавление тегов и управление ими через WP Admin

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

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

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

От пяти до 15 тегов (или категорий, или их комбинации) — хорошее число для добавления к каждому из ваших сообщений.

Пример того, как тема Editor отображает категории и теги на странице блога.
Добавление тегов через модуль тегов

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

Добавьте теги в настройках документа в редакторе сообщений.

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

Добавьте новые теги, набрав текст для тега и нажав клавишу Enter или Return на клавиатуре.

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

Чтобы удалить тег, щелкните X справа от тега.

Добавление тегов

↑ Содержание ↑

Управление тегами в настройках сайта
  1. Перейти на Мой сайт → Настройки.
  2. Щелкните на опции Writing.
  3. Нажмите на теги.

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

Управление тегами

↑ Содержание ↑

Список тем

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

Однако , вы не хотите, чтобы нерелевантный контент отображался в списках тем или поиске, и мы тоже. Вот почему мы ограничиваем количество тегов и категорий, которые можно использовать в списке общедоступных тегов.От пяти до 15 тегов (или категорий, или их комбинации) — хорошее число, которое можно добавить к каждому из ваших сообщений. Чем больше тегов и / или категорий вы используете, тем меньше вероятность того, что ваше сообщение будет выбрано для включения в списки тем . Узнайте больше о темах здесь.

↑ Содержание ↑

Добавление тегов и управление ими через WP Admin

Инструкции из этого руководства относятся к панели управления WP Admin. Вы можете перейти на эту панель управления, добавив / wp-admin в конец URL-адреса вашего сайта (e.g .: example.wordpress.com/wp-admin)

Вы можете добавлять новые теги и управлять существующими из сообщений → Теги на панели инструментов.

Вам будет представлен список ваших существующих тегов и способ добавления новых тегов.

Вы можете добавить новый тег, заполнив поля:

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

Управление тегами

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

Если вы щелкните Quick Edit , тег превратится в поле редактирования, и вы сможете быстро переименовать его:

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

При нажатии Удалить этот тег будет удален.

Массовые действия

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

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

В меню массовых действий выберите Удалить , а затем щелкните Применить .Теги будут удалены.

Преобразование тегов в категории

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

Щелкнув по ней, вы перейдете на страницу импорта. Здесь вы можете нажать на Конвертер категорий и тегов :

Щелкнув по нему, вы попадете на экран, где вы можете выбрать, какие теги преобразовать в категории. Сделайте свой выбор и нажмите «Преобразовать теги в категории».

Нажмите кнопку «Теги в категории».

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

Быстрое и простое руководство по метатегам в SEO

Мета-теги — это невидимые теги, которые предоставляют данные о вашей странице поисковым системам и посетителям сайта.

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

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

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

Почему важны метатеги?

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

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

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

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

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

Шесть метатегов для улучшения оптимизации вашего сайта

1. Тег заголовка

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

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

Это означает, что тег заголовка должен быть четким, описательным и обычно не более 55 символов.

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

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

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

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


Пример заголовка

Вывод : Обратите внимание на теги заголовков, будьте ясны и информативны.

2. Мета-описание

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

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

Ранее оптимальная длина метаописаний составляла 150–165 символов, но недавнее обновление способа отображения результатов поиска Google привело к тому, что время от времени показывались более длинные фрагменты.Чтобы узнать больше о том, что это значит для SEO и как адаптироваться, прочтите всеобъемлющую статью Дэвида Портни «Длина фрагмента обновленной поисковой выдачи Google: какой должна быть ваша стратегия SEO сейчас?».

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



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

3. Мета-тег роботов

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

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

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

Метатег robots помещается в раздел вашей страницы, и результат может выглядеть следующим образом:




(…)

< body> (…)

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

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

Google также требует, чтобы ссылки были nofollowed при определенных обстоятельствах. Например, в 2016 году он издал указание для блоггеров запретить переход по любым ссылкам, которые они включили в обзор продукта, поскольку «эти ссылки не появляются естественным образом».Если вы хотите nofollow по отдельной ссылке, вы можете добиться этого, добавив rel = ”nofollow” к HTML-ссылке.

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

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

4. Альтернативный текст

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

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

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

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

5.Канонический тег

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

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

Канонический тег может выглядеть в HTML так:

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

6. Тег заголовка (h2, h3, h4 и т. Д.)

Заголовочные теги являются частью вашего контента; Короче говоря, это заголовки, которые вы используете для структурирования своей страницы.

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

Порядок тегов заголовков (от h2 до h6) подчеркивает важность каждого раздела. Тег h2 обычно обозначает заголовок страницы или заголовок статьи, а h3 и ниже служат в качестве подзаголовков для разделения вашего контента.

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

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

Быстрое и простое руководство по метатегам в SEO

Абзац содержания

Еще один абзац содержания

Почему важны метатеги?

Абзац содержания

Шесть метатегов для улучшения оптимизации вашего сайта

1.Тег заголовка

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

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

Как оптимизировать метатеги: контрольный список

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

Это может способствовать повышению авторитета, расширенному присутствию в поиске и, следовательно, более высокому ранжированию.

Если вы готовы проверить свою эффективность с помощью метатегов, вот краткий контрольный список для начала:

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

Как использовать мета-теги HTML

Примечание. Для получения более свежей информации по этой теме см. Наше полное руководство по метатегам в SEO

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

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

Давайте посмотрим, что такое метатеги, какие метатеги имеют значение и как избежать ошибок при внедрении метатегов на ваш сайт.

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

Метатеги

HTML официально являются тегами данных страницы, которые находятся между открывающим и закрывающим тегами заголовка в HTML-коде документа.

Текст в этих тегах не отображается, но может быть проанализирован и сообщает браузерам (или другим веб-службам) конкретную информацию о странице.Просто он «объясняет» страницу, чтобы браузер мог ее понять.

Вот пример кода метатегов:

 <заголовок>
 Не метатег, но все равно требуется 


 

Подробнее об истории метатегов читайте в нашем посте «Смерть метатега».

Тег заголовка

Хотя тег заголовка отображается в блоке заголовка страницы, на самом деле это не метатег. Какая разница? Тег заголовка является обязательным «элементом» страницы согласно W3C. Мета-теги — это необязательные дескрипторы страницы.

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

Описание метатега

Так выглядит тег описания:

  

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

Мета-тег description помогает веб-сайтам по трем важным направлениям:

  • «Описание» сообщает поисковой системе, о чем ваша страница или сайт: Чтобы поисковая система могла понять, о чем ваша страница, вам нужно написать хорошее описание. Когда алгоритм Google решает, что описание написано плохо или неточно, он заменяет это описание своей собственной версией того, что находится на странице. Разве вы не предпочли бы описывать свой сайт потенциальным клиентам или посетителям своими словами, а не оставлять его в искусственных руках Google? Посмотрите на этот пример и судите сами:

  • «Описание» помогает повысить рейтинг кликов на вашем сайте: Написание хорошего описания не только помогает Google не переписывать его, но и помогает привлечь больше людей, переходящих на ваш сайт.Хорошо написанное описание не только сообщает пользователю, что находится на вашей странице, но также побуждает их посетить ваш сайт. Описание — это то, что отображается здесь в результатах поиска. Это похоже на хорошую витрину. Сайты с плохим описанием получат меньше кликов, а поисковые системы понизят рейтинг вашего сайта в пользу других сайтов.
  • «Описание» помогает при ранжировании сайта: Распространенное мнение (основанное на том, что Google сказал в 2009 году) состоит в том, что ничто в описании не поможет вам получить рейтинг. Однако я видел доказательства обратного. Это тяжело? Нет, но если вам нужно какое-то значение для вторичного ключевого слова (скажем, –ing –ed или –s), используйте его здесь.

Две другие заметки по мета-тегам описания:

  • Пусто Описания: Может ли описание быть пустым? Да. Когда он пуст, Google и Bing заполнят его за вас. На самом деле, иногда (например, для блогов) вы можете предпочесть версию Google или Bing. (Лично я всегда заполняю его, когда это возможно, предпочитая свою версию их версии, но если у вас небольшой штат, это не всегда практично.)
  • Цитаты: Не используйте в описании полные кавычки («»). Скорее всего, это обрежет ваше описание. Чтобы избежать этой проблемы, используйте одинарные кавычки.

Мета-тег «Ключевые слова»

Давным-давно в далекой-далекой галактике метатег «ключевые слова» был критически важным элементом для ранних поисковых систем. Подобно динозаврам, этот тег является ископаемым со времен древних поисковых систем.

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

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

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

Другие мета-теги

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

  • Сказал пауку, когда возвращаться
      
  • Сообщил браузеру о раздаче
      
  • Приказал странице обновить
      
  • Сказал странице перенаправить / обновить
      

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

ПРИМЕЧАНИЕ. Добавление тегов в схему и расширенные фрагменты данных — в одиночку наиболее важные (и довольно тихо объявленные) изменения в том, как ваш сайт взаимодействует с поисковыми системами и поисковыми роботами.Узнать его. Знай это. Реализуй это.

Мета-тег роботов

Тег robots по-прежнему остается одним из самых важных тегов. Не столько для правильной реализации, сколько для неправильной.

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

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

Вот четыре реализации метатега роботов и их значение.

  •   

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

    Этот тег чаще всего используется, когда сайт находится в разработке. Разработчик будет noindex / nofollow на страницах сайта, чтобы они не были обнаружены поисковыми системами, а затем забудет удалить тег. При запуске вашего нового веб-сайта не верьте, что он был удален. ДВОЙНАЯ ПРОВЕРКА!

  •   

    Это означает: «Индексируйте эту страницу. Не переходите по ссылкам на странице ». Ваша страница БУДЕТ в индексе, и по вашим ссылкам на другие страницы переходить не будут.Это нарушит путь ссылки на вашем сайте с этой страницы на другие страницы.

  •   

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

  •   

    Это означает: «Индексируйте эту страницу.Следуйте ссылкам на странице ». Это означает, что ваша страница БУДЕТ в индексе И будут отслеживаться ваши ссылки на другие страницы. Это НЕ нарушит путь ссылки на вашем сайте с этой страницы на другие страницы.

ПРИМЕЧАНИЕ. Тег роботов может игнорироваться менее скрупулезными пауками.

Тег Charset

Наконец, все сайты должны проверять кодировку. В США это тег UTF-8. Просто убедитесь, что это есть на вашей странице, если вы доставляете HTML с использованием английских символов.

  

Заключение

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

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

Как добавить мета-теги в WordPress

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

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

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

Как добавить метатеги в WordPress вручную

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

 
 

Для этого следуйте пошаговой инструкции.

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

2. Щелкните папку public_html в левой части экрана.

Источник изображения

3. Щелкните папку wp-content .

4. Найдите папку с надписью «themes».

Источник изображения

5. Щелкните папку с названием вашей темы.

6. Щелкните правой кнопкой мыши шаблон header.php и выберите Изменить из раскрывающегося меню.

7. Добавьте свои метатеги в раздел заголовка (между тегом.

8. Сохраните изменения.

Источник изображения

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

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

Как добавить мета-теги в WordPress с помощью плагина

С помощью плагина вы можете добавлять универсальные и уникальные метатеги на свой сайт WordPress. Мы рассмотрим, как добавить их с помощью плагина Meta Tag Manager. Если вы используете другой плагин, ознакомьтесь с его документацией, чтобы получить точные инструкции.

1. Сначала войдите в свою панель управления WordPress.

2. Щелкните Плагины > Добавить новый .

3. Найдите «Диспетчер метатегов». Когда появится результат поиска, нажмите Установить сейчас и Активировать .

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

5. Перейдите к Настройки > Диспетчер метатегов .

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

7. Затем перейдите на страницу Общие параметры и убедитесь, что сообщения, страницы и медиа перечислены в поле «Поддержка типа сообщения».”Таким образом, при редактировании сообщения, страницы или медиафайла вы можете добавить метатеги, которые будут отображаться только в этом конкретном элементе.

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

В демонстрации ниже вы увидите, что я работаю в редакторе сообщений. Я прокручиваю мета-поле Yoast SEO до мета-окна Meta Tag Manager и добавляю мета-тег описания, уникальный для этого конкретного сообщения.

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

Добавление метаинформации на ваш сайт

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

Как добавить мета-теги в WordPress | Руководство

Знаете ли вы, почему вы читаете именно эту статью? Мы знаем!

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

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

Сообщите нам, если вам нужна помощь агентства поддержки веб-сайтов Wishdesk WordPress. Мы поможем вам настроить ваш сайт быстро и по доступной цене.

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

Мета-теги — это короткие тексты, короткие фрагменты кода HTML, которые помогают поисковым системам понимать вашу страницу и информацию на ней.

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

В противном случае ваша страница затеряется среди тысяч других.

Добавление метатегов на сайт WordPress — один из самых важных методов SEO.

нажмите комбинацию Ctrl + U — чтобы увидеть метатеги страницы

Что такое пример метатега?

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

  • Мета-тег заголовка
  • Описание мета-тега
  • Мета-тег ключевого слова
  • Альтернативный текст для метатегов
  • Канонический метатег
  • Заголовочный метатег

Рассмотрим их подробнее и рассмотрим примеры метатегов на страницах.

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

Тег заголовка выглядит так:

Мета-тег description — это краткое и четкое описание того, о чем страница. Метатег description — это то, что отображается прямо под метатегом title.

Метатег description выглядит так:

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

  • Альтернативный текст для изображений

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

Альтернативный тег начинается с alt = «ВАШ ALT TEXT»>

.

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

Тег заголовка (h2, h3 …) — это заголовки, с помощью которых вы называете части главной страницы, страницы продукта, блога и т. Д. Они также читаются поисковыми системами и увеличивают ваши шансы оказаться на первой позиции Google. Чтобы найти тег заголовка в html-коде, вам нужно ввести

,

или любой другой тег заголовка, который вы ищете.

Как метатеги помогают SEO в WordPress?

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

Сайты

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

Как добавить метатеги h2-H6 в WordPress

Есть 3 возможных способа добавления тегов заголовков:

1.введите теги заголовков вручную

Вам просто нужно открыть текстовый редактор в WordPress и написать и выбрать в нем h2-h6.

2. введите теги заголовков с помощью визуального редактора

Перейдите в визуальный редактор и просто создайте h2, h3 и т. Д., Используя 6 различных тегов заголовков.

3. Создание тегов заголовков с помощью специального сочетания клавиш

На клавиатуре нажмите Alt + Shift + Numbers 1, 2, 3 и т. Д.

Как добавить описание и метатеги ключевых слов

Есть два основных способа добавить описание и метатеги ключевого слова в WordPress.

Используйте плагин Yoast SEO

Добавление метатегов с помощью плагина Yoast SEO и других подобных плагинов SEO является наиболее распространенным способом.

Для добавления метатегов необходимо:

  1. установите плагин.
  2. добавьте ключевое слово и описательную цель после установки, нажмите Pages> All или Posts> All> Edit> Enter keyword> нажмите Edit Snippet bud> введите метатег описания.
  3. Сохраните изменения.

Добавить метатеги вручную

Добавить метатеги вручную тоже несложно.

Чтобы добавить метатеги на сайт WordPress без плагинов, вам необходимо:

1. Откройте файл header.php через файловый менеджер или SFTP

.

2. Найдите тег

3. В таких «пробелах» нужно написать властно-тег

4. Сохраните изменения.

Как добавить альтернативный текст для метатегов

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

Как добавить канонический метатег

Есть 2 основных способа добавить канонический метатег на ваш сайт:

  1. добавить метатег Canonical через плагин Yoast
  2. добавить канонический метатег через RankMath

Топ-7 советов по созданию хороших мета-тегов

  1. Не перегружайте страницу метаданными
  2. Выберите четкие и правильные ключевые слова
  3. Добавьте короткие метаданные на свой сайт WordPress
  4. Добавить уникальные метатеги для каждой страницы
  5. Используйте ключевые слова в метатегах
  6. Избегайте пассивного голоса
  7. Сделайте их уникальными

Итого

Добавить метатеги на сайт WordPress — это главное, что вы должны извлечь из этого блога.Мета-теги — залог успеха вашего сайта. Надеемся, наш блог был вам полезен.

Если вам нужна помощь с добавлением метатегов на сайт WordPress, просто свяжитесь с агентством по разработке веб-сайтов Wishdesk.

Правильная маркировка сообщений для пользователей и SEO • Yoast

Йост де Валк

Йост де Валк — основатель и директор по продуктам Yoast. Он интернет-предприниматель, который незадолго до основания Yoast инвестировал и консультировал несколько стартапов.Его основная специализация — разработка программного обеспечения с открытым исходным кодом и цифровой маркетинг.

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

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

Что происходит, когда вы добавляете тег?

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

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

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

Отсюда можно сделать вывод:

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

Но что делать?

Как выбрать теги

Когда вы планируете свои сообщения в блоге, скорее всего, у вас будут общие темы.Эти темы, вероятно, ваши лучшие теги. Например, на yoast.com мы часто пишем о SEO-копирайтинге и структуре сайта, а также о WordPress, Schema.org или Google Analytics. Это лишь некоторые примеры тегов, которые мы обычно используем для наших сообщений.

При выборе тегов задайте себе вопрос:

  • К каким еще сообщениям относится этот пост?
  • Какой тег лучше всего подходит для этой группы сообщений? Какой общий знаменатель?
  • Это лучший выбор ключевого слова для этой темы?

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

Оптимизируйте страницу тегов

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

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

Поиск связанного контента с помощью тегов

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

Проверяйте их регулярно

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

Тщательно выбирайте теги

Когда вы пишете сообщение в блоге, тщательно думайте о своих тегах. Не делайте это на две секунды позже. Они важны для посетителей и Google! Хорошая вещь в том, чтобы думать о своих тегах, заключается в том, что это также сразу помогает вам найти другие сообщения, на которые можно ссылаться. Удачи вам с тегами!

Подробнее: Как навести порядок в структуре вашего сайта »

8 метатегов, улучшающих SEO

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

Мета-теги являются ключевыми, потому что они сообщают поисковым системам, о чем страница. Думайте о них как о первом впечатлении для всех поисковых систем.

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

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

Как проверить метатеги веб-сайта

Если вы хотите проверить метатеги для любой страницы, просто щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотреть исходный код страницы».

Вы также можете использовать такие инструменты, как SEMrush (в частности, инструмент аудита SEMrush) и Screaming Frog, чтобы проверить метатеги на любом сайте.

Самые важные метатеги для SEO в 2018 году

В этой статье я проведу вас по 8 наиболее важным метатегам:

  1. Тег заголовка
  2. Мета-описание
  3. Канонический тег
  4. Альтернативный текстовый тег
  5. Мета-тег роботов
  6. Открытые метатеги графа и карточки Twitter
  7. Теги заголовка
  8. Мета-тег адаптивного дизайна

Используя эти метатеги, вы можете повысить SEO вашего сайта.

1. Тег заголовка

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

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

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

Всегда добавляйте тег заголовка в раздел вашего сайта:

Это образец заголовка

Вот несколько полезных советов по написанию тега заголовка:

  • По возможности, длина тега заголовка не должна превышать 60 символов
  • Добавьте слова, обозначающие содержание вашего контента, например «Как сделать», «Обзор», «Лучшее», «Советы», «Лучшие», «Найти» или «Купить».
  • Используйте ключевые слова с длинным хвостом или ключевые слова с 4+ словами, например «оптимизирован ли мой сайт для мобильных устройств» или «как сделать веб-сайт адаптированным для мобильных устройств».
  • Добавьте числа к своему заголовку, например «9 HTML-тегов, которые улучшат SEO».
  • Начните тег заголовка с основного целевого ключевого слова
  • Не набивайте ключевые слова, написав что-нибудь вроде следующего: «Мы продаем нестандартные хьюмидоры для сигар.Наши хьюмидоры для сигар изготавливаются вручную. Если вы думаете о покупке специального хьюмидора для сигар, обратитесь к нашим специалистам по изготовлению специального хьюмидора для сигар »
  • Включите уникальный тег заголовка на каждой странице

2. Мета-описание

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

Вот пример метаописания, отображаемого на странице результатов поиска:

Вот как вы закодируете метаописание, подобное приведенному выше:

Google не использует метаописание в качестве сигнала ранжирования. Тем не менее, он по-прежнему оказывает огромное влияние на рейтинг кликов (CTR) вашей страницы, потому что он появляется в результатах поиска и информирует пользователей, о чем ваша страница.

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

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

Новая средняя длина поля фрагмента описания на рабочем столе составляет около 160 символов по сравнению с более чем 300 символами.

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

Вот как написать хороший тег описания:

  • Не добавляйте повторяющиеся метаописания.
  • Добавьте четкий призыв к действию (CTA) в своих описаниях, например «подайте заявку сегодня», «проверьте ____» или одну из этих 100 фраз CTA.
  • Добавьте целевые ключевые слова в описания.
  • Добавьте любые скидки или предложения, которые у вас есть.

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

3. Канонический тег

Канонический тег — это тег ссылки HTML с атрибутом rel = canonical.

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

Используйте следующий синтаксис для добавления канонического тега:

4. Альтернативный текстовый тег

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

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

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

При создании замещающего текста для вашего веб-сайта используйте следующий синтаксис:

”xyz”

Вот несколько советов по использованию тегов alt-текста:

  • Всегда используйте правильное описание и никогда не вставляйте ключевое слово в этот тег
  • Используйте информативные имена файлов
  • Будьте ясны и по делу
  • Создать карту сайта изображения
  • Используйте 50-55 символов (до 16 слов) в альтернативном тексте
  • Используйте средний или маленький размер файла для более быстрой загрузки страницы — только не ухудшайте разрешение изображения

5.Мета-тег роботов

Мета-тег robots сообщает поисковым системам индексировать или не индексировать вашу веб-страницу.

Тег имеет четыре основных значения для поисковых роботов:

  • FOLLOW — сканер поисковой системы будет переходить по всем ссылкам на этой веб-странице.
  • INDEX — сканер поисковой системы проиндексирует всю веб-страницу.
  • NOFOLLOW — Сканер поисковой системы НЕ будет следовать за страницей и любыми ссылками на этой странице
  • NOINDEX — Сканер поисковой системы НЕ будет индексировать эту веб-страницу

Используйте следующий синтаксис для метатега роботов:

Означает не индексировать или не подписываться на эту веб-страницу.

Означает индексировать и подписываться на эту веб-страницу.

Разместите метатег robots в разделе своей веб-страницы.

6. Мета-теги Open Graph и карты Twitter

Эти теги упрощают синхронизацию в социальных сетях.

Открытые метатеги графа способствуют интеграции между Facebook, LinkedIn, Google и вашим веб-сайтом.

Вот пример того, как теги Open Graph выглядят в стандартном HTML:

Карточки

Twitter работают аналогично Open Graph, за исключением Twitter.

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

Вот пример того, как выглядит карточка Twitter в стандартном HTML:

7.Теги заголовка

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

Элементы заголовка идут от h2 до H6. h2 — самый большой и самый важный уровень, а H6 — самый маленький и наименее важный.

Если вы помечаете текст тегом h2, вы показываете поисковым системам, что это самый важный текст на этой странице.

8. Мета-тег адаптивного дизайна

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

Мета-теги

Viewport позволяют веб-дизайнерам настраивать масштаб и отображение страницы на любом устройстве.

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

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

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

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

Правильные метатеги упрощают поиск вашего сайта

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

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


Об авторе

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

Добавить комментарий

Ваш адрес email не будет опубликован.