Мета-теги в HTML
Э то урок, в котором мы поговорим о том, что такое мета-теги, для чего и как они используются при создании сайта и как их правильно заполнить.
Р екомендую использовать только те метатеги, которые реально нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.
Содержание урока:
§1. Тег «TITLE»
П ервый мета-тег очень важен. Причём этот мета-тег одинаково важен и для поисковых систем, и для посетителей. Первые в ранжировании результатов поиска придают большое значение ключевым словам, которые содержатся в теге «title», вторые видят его содержимое в виде ссылки на сайт в тех же результатах поиска:
С одержимое этого же мета-тега отображается и в заголовке окна браузера:
В HTML мета-тег «title» добавляется следующим образом:
К роме того, как я уже сказал ранее, ключевые слова, которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.
§2. Мета-тег «keywords» (ключевые слова)
С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».
Т е слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.
Н апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.
Б олее подробно о ключевых словах, в частности, и об оптимизации сайта, вообще, мы поговорим в соответствующих разделах.
Ч тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:
К лючевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время правильно заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.
§3. Мета-тег «description» (описание страницы)
С ледующим важным мета-тегом является тег «description», в котором должно содержаться краткое описание страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.
В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):
Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.
Т аким образом, правильный мета-тег «description» обязательно содержит ключевое слово (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из поисковой выдачи на сайт или нет! Поэтому его, как и «title», нужно прописывать для каждой страницы!
H TML-код для создания мета-тега «description» будет следующим:
Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).
§4. Технические мета-теги
Т ехнические мета-теги, для сайта, значат очень много. С их помощью можно управлять отображением страницы, настройками индексирования и т.д. В этом уроке мы рассмотрим основные технические мета-теги.
А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.seoded.ru/, нужно записать так:
Код для вставки мета-тега «robots»:
author и copyright — мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:
§5. Заключение
Э то все метатеги в HTML, которые будут нужны новичку. Остальные специфичны и могут понадобиться тебе после того, как наберешься опыта и будешь точно знать, что делаешь. Из всех же вышеперечисленных мной настоятельно рекомендую использовать на каждой странице твоего сайта следующие:
О стальные применяй по мере необходимости, но особо не заморачивайся. Помни, что мета-теги не сделают твой сайт интересным, они могут лишь помочь браузеру и web-серверу правильно отобразить страницы сайта, а поисковой системе их найти.
Н а этом раздел моего сайта про основы HTML для начинающих окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».
А втор и эксперт: Алексей Востров.
Ещё материалы по этой теме:
Поделиться ссылкой на эту страницу в:
Как добавить метатег и подтвердить домен на Facebook
Чтобы использовать лендинги для таргетированной рекламы в Facebook и Instagram с целью «Конверсия», нужно подтвердить домен в вашем бизнес-менеджере Facebook.
В статье расскажем, как подтвердить бесплатный домен, созданный в SendPulse (minisite.ai и pulse.is) с помощью одного из способов, который предлагает бизнес-менеджер Facebook — добавления метатега.
Содержание
Как добавить домен в Facebook
Зайдите в настройки вашего бизнес аккаунта, в раздел «Безопасность бренда» и нажмите «Домены».
Нажмите «Добавить», введите домен и нажмите «Добавить домен».
Нажмите на добавленный тег и перейдите на вкладку «Подтверждение метатега», чтобы выбрать вариант подтверждения домена с помощью метатега. Скопируйте предложенный HTML код.
Как вставить метатег в SendPulse
Перейдите в настройки сайта на вкладку «Аналитика». Напротив поля «Метатег Facebook» введите скопированный код и нажмите «Подключить».
Как проверить и подтвердить метатег
Чтобы убедиться, что метатег добавлен, перейдите на сайт под этим доменом и проверьте исходный код.
Вернитесь в настройки Facebook во вкладку «Подтверждение метатега» и нажмите «Подтвердить».
После подтверждения возле вашего домена появится пометка «Подтвержден».
Оценка: 5 / 5 (6)
Как правильно прописать метатеги: ручной и автоматические способы для WordPress, Bitrix и Joomla
27.04.2020 Время прочтения: 7 минут
Автор статьи: Евгений Костырев,
веб-программист компании SEO.RU
Метатеги для сайта — что это?
Метатеги — это специальные теги в языке гипертекстовой разметки HTML, которые находятся в контейнере и предназначены для передачи информации поисковым системам и браузерам. Вот как они выглядят в поисковой выдаче:
Самые важные метатеги для сайта — это:
Сразу оговоримся, что описанные ниже методы работают в идеальных условиях, когда ранее никто не вносил правки в код ядра и модулей проекта. В этом случае подходы к добавлению метатегов могут кардинально измениться.
Как вручную прописать метатеги в 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 добавлять и редактировать важные для поискового продвижения сайта метатеги понятно и просто.
Как добавить мета-тег, скрипт или иной код на сайт?
Добавление мета-тегов требуется в случаях, когда какой-либо ресурс требует подтвердить право владения доменом (верифицировать домен). В большинстве своем мета-теги нужны для подключения корпоративной почты на домене или регистрации в сервисах вроде Яндекс.Вебмастера или Google Search Console.
Заходим в редактор и открываем папку «Сниппеты», находим в этой папке сниппет head:
Поскольку сниппет head является необязательным, в старых или сторонних шаблонах он может отсутствовать. В этом случае необходимо искать секцию в файле layouts.layout.liquid и делать изменения там. Если Вы не владеете языком HTML в достаточной степени и не уверены в своих силах, можете просто прислать в техническую поддержку мета-тег, и мы поможем Вам его разместить.
Помимо мета-тегов, иногда возникает потребность разместить на своем сайте онлайн-консультант, кнопку плавающую обратного звонка или иной виджет, который должен срабатывать на всех страницах сайта.
Сперва необходимо скопировать JavaScript-код, который предоставляется создателем виджета. Затем открываем в бэк-офисе раздел «Настройки => Счетчики и коды», нам нужно поле «javascript-код для вывода на всех страницах магазина»:
Содержимое, фигурирующее здесь, появляется в итоговом HTML-коде страницы непосредственно перед закрывающим тегом
Мета-теги
Правильная настройка мета-тегов очень важна для SEO. Работы по заполнению, прописыванию, корректировке мета-тегов всегда выполняются при запуске проекта, сразу после того, как собрано семантическое ядро. И продолжаются по мере необходимости в течение всего периода продвижения сайта. Иногда достаточно лишь небольших изменений в метатегах, чтобы сайт вышел в ТОП10. Особенно это актуально для низкочастотных запросов, а также в тех случаях, когда сайт уже находится достаточно высоко по данному запросу (например, 11-15-я позиция в поисковой выдаче), и нужно совсем немного, чтобы выдвинуть его в ТОП. Зачастую под SEO-тегами подразумеваются Title, Description и Keywords. Однако тегов намного больше. И в этой статье мы постараемся охватить этот вопрос максимально полно.
Содержание
Что такое мета-теги
К тегам мета относятся:
Подробнее можно прочитать в справке по HTML или Википедии.
На хабрахабр приводится такое определение: meta-теги — это необязательные атрибуты, размещенные в заголовке страницы, которые могут содержать ее описание, ключевые слова к ней, информацию об авторе, управляющие команды для браузера и поисковых роботов, и прочую служебную информацию, не предназначенную для посетителей.
Мета-теги (англ. meta tags, досл. служебные ярлыки) — это служебные слова, которые содержат важную информацию о веб-документе для поисковых систем. К таким словам (тегам) относятся теги Title, Description, Hx, Robots, Canonical.
Правильные SEO мета-теги для Яндекса и Google
Рассмотрим, как правильно написать мета-теги для сайта, как их добавить и разместить в коде. Нас будет интересовать:
Следует отметить, что в большинстве CMS (систем администрирования сайта), есть специальные поля для заполнения мета-тегов, и вам не нужно прописывать их непосредственно в HTML-коде. От вас потребуется только вписать содержание тега (Title, Description, Keywords, H1, Canonical) или выбрать подходящее значение (Index/NoIndex, Follow/NoFollow). Однако следует проверять, корректно ли размещаются теги: 1) в правильных местах, 2) правильный синтаксис, 3) значения в тегах соответствуют вашим настройкам. Причем следует проверить не только на главной странице, но и на различных внутренних страницах. Например, у нас сайт интернет-магазин. В этом случае обязательно нужно проверить, корректно ли размещаются мета-теги на главной странице, внутренних информационных, страницах категорий и товаров, поскольку веб-документы каждого из этих типов могут формироваться по своему отдельному шаблону.
Теперь подробнее о каждом из тегов.
Мета-тег Title
Это самый главный тег, который больше других влияет на продвижение сайта по ключевым словам. В большинстве случаев именно этот текст используется в заголовке сниппета, как показано в примере ниже. (Но не всегда, в заголовок так же может быть выведено содержание тега H1 или даже H2, H3).
Синтаксис
Тег должен находиться внутри контейнера … в любом месте.
Требования SEO
Примеры правильного заполнения тегов
Ошибки и неудачные примеры мета-тегов
Мета-тег Description
Так же один из важных тегов для продвижения страницы по ключевым словам. Описание может использоваться в сниппете.
Однако текст в сниппет может быть подставлен и из контентной части страницы, если поисковик решит, что это предпочтительнее. При этом, независимо от того, выводится в сниппет описание из тега description или из текста, то, как составлен метатег описания, оказывает влияние на ранжирование страницы в поиске.
Пример, когда description в мета и в сниппете отличаются: 
Синтаксис
Тег должен находиться внутри контейнера … в любом месте.
Требования SEO
Примеры правильного заполнения тегов (полужирным выделены ключевые слова)
Ошибки и неудачные примеры мета-тегов
Мета-тег H1
Еще один очень важный тег. В нем лучше всего размещать главный, максимально частотный запрос, по которому продвигается данная страница. Заголовок страницы чаще всего должен содержать 1-3 слова. Исключение — страницы статей, товаров, проектов и т.п. То есть страницы, продвигаемые под более специфические, менее частотные запросы.
Синтаксис