Содержание

правила и рекомендации по корректному заполнению

Данный метатег влияет на индексировании страниц.

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

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

Сами директивы:

      • all — разрешается индексировать текст и ссылки на текущей странице;
      • none — запрещается индексировать текст и переходить по ссылкам на странице;
      • index — равно all, т.е индексирование разрешено;
      • follow — то же, что all;
      • noindex — запрещено к индексированию текста страницы;
      • nofollow — запрещено переходить по ссылкам на странице;
      • noimageindex — запрещает индексирование изображений на текущей странице.
      • noarchive — запрещает выводить в результатах поиска ссылки «Сохраненная копия»;
      • nosnippet — запрещает выводить в поисковой выдаче сниппет.

Чаще всего тег роботс выглядит как:

      • <meta name=»robots» content=»index, follow» /> — разрешается индексировать страницу;
      • <meta name=»robots» content=»noindex, nofollow» /> — не разрешается индексировать страницу.

Желательно использовать этот тег на всех страницах сайта с разрешением к индексированию, кроме тех страниц, которые вы хотите запретить. Кроме того, можно разным поисковым системам указывать разные параметры, например Яндексу разрешать индексацию, а Google запрещать. Делать это можно с помощью указания конкретного робота: <meta name=»yandex» content=»noindex» /> — запрет для Яндекса, <meta name=»google» content=»noindex» /> — запрет для Гугла.

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

примеры правильного написания meta-тега Description, размеры (длина) для Яндекса

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

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

Зачем прописывать мета?

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

Составить текст – несложно, но это помогает:

  • Заинтересовать больше пользователей.
  • Повысить кликабельность.
  • Увеличить количество переходов на сайт.

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

Что такое дескрипшен?

С технической точки зрения, description tag – это элемент, который вставляется в шапку страницы внутри

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

В коде это выглядит так:

<head>

<meta name=»description» content=»Сюда необходимо вставить текст, который будет показан в выдаче»>

</head>

А в выдаче так:

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

Как правильно заполнить

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

Правильно оформить отображение в поиске помогут следующие рекомендации:

  • Содержание тегов должно соответствовать конкретной странице. При обновлении контента необходимо дорабатывать и данные для выдачи.
  • Используйте ключевые слова в title и description, но в меру: достаточно трёх небольших по длине запросов. Это не влияет на ранжирование, но если потенциальный клиент использует его в строке поиска, то они будут подсвечены жирным шрифтом, а значит, привлекут внимание.
  • Распределяйте важную для пользователей информацию: оффер – в заголовке, главные преимущества – в описание. В дополнение воспользуйтесь сервисами поисковых систем, чтобы добавить нужные быстрые ссылки и внедрить микроразметку для отображения специальных данных. В Яндексе сделать это можно через инструменты Вебмастера.

Тестируйте разные сочетания элементов, чтобы найти наиболее кликабельную комбинацию. Правильное заполнение сниппета во многом зависит от самой объёмной его части – description.

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

  • Хотя специалисты отмечают, что максимальная длина мета-тега на сайтах – 270-300 символов, идеальный размер текста не должен превышать 140-160 знаков. Текст будет помещаться в выдаче Яндекса и Google. Значима и длина слов, потому что они переносятся на вторую строку без разделения.
  • Не дублируйте информацию из title и избегайте повторов.
  • Содержание тега должно быть уникальным для каждой страницы. Важно заполнять его так, чтобы описание соответствовало контенту.
  • Избегайте общих фраз и не вводите пользователей в заблуждение – это влияет на дальнейшее взаимодействие с сайтом и отражается на поведенческих факторах.
  • Используйте призыв к действию – это повышает CTR.

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

Примеры написания description

Заполнить мета-тег description помогут примеры для разных типов контента. Идеальная формула для статей – написать, о чём прочитает пользователь, кликнув на ссылку. Например, если в Google ввести запрос «как правильно написать текст для лендинга», в выдаче появится материал от Tilda Education:

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

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

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

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

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

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

Закажи юзабилити-тестирование прямо сейчас

Заказать

МЕТА-тег Description и описание страницы сайта в результатах поиска

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

В Google и Yandex meta тег description отображается практически одинаково — после ссылки на сайт и названия домена выводится содержимое тега.

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

Синтаксис мета-тега description и правила размещения

Тег description помещается в html-код сайта, в верхней части в любом месте тега head, например:

Примеры использования meta description:

meta name=»description» content=»Наша компания поможет в организации рекламных кампаний в интернете — маркетинг, создание посадочных страниц, настройка банерной, контекстной, тизерной рекламы, анализ и SEO-аудит сайтов и страниц, эффективный маркетинг в сети интернет»

Как составлять текст для description

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

Рекомендации по составлению текста для meta description:

  • Описание должно относиться к конкретной странице и отражать ее текущее содержание, не нужно чтоб описание относилось ко всему сайту, оно должно быть максимально лаконичным и конкретным
  • Разные страницы, даже со сходным и похожим контентом должны иметь разные мета-описания, не стоит использовать шаблоны и проставлять одинаковые описания на каждой странице. Если это сложно лучше заполнить meta description только на важных страницах, чем на всех прописать одно и тоже
  • Описание не должно быть слишком коротким, поисковикам это не нравится — вероятно потому что малый объем не позволяет провести качественный анализ страницы
  • Максимальная длина описания в документации не определена и рекомендации различных специалистов могут серьезно различаться, общепринятая длина по которой ориентируется большинство — около 160 символов, кто-то считает что описание должно укладываться в объем 100-140 символов, некоторые уверены что верхняя граница после которой поисковики не учитывают содержимое тега это 250 символов. Для удобства заполнения и легкости восприятия рекомендуем придерживаться длинны в 120-160 символов, этого достаточно в большинстве случаев. Если Вы немного превысите планку в 160 символов — не страшно, никаких санкций за это со стороны поисковиков не предусмотрено
  • Не стоит увлекаться оптимизацией текста для описания, насыщать его ключами, текст должен быть естественным понятным человеку и легко читаться. Так же не стоит включать спец-символы, писать все заглавными буквами, добавлять смайлики и т. п.
  • Форма мета-описания произвольная, можно писать предложениями с точкой, можно перечислить важные признаки или параметры которые в первую очередь интересуют посетителя
  • Язык описания в meta-тег description и язык страницы должны совпадать, постарайтесь коротко и емко выразить суть страницы, чтобы пользователь сразу понял, что это — то что нужно

Meta description в Яндекс

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

Meta description в Google

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

Подведем итог:

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

Как правильно заполнять мета-тег Description?

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

Метатег Description – что это такое

Таким термином называют html-тег, который содержит краткое, емкое описание страницы для поисковых роботов. Это логичное продолжение тега Title, но в более развернутом представлении. Метатег вписывается в код исходного сайта в начале страницы, между тегами заголовков. Принцип работы поисковых систем (ПС) подразумевает индексацию ресурса сверху вниз, соответственно, метатеги индексируются первыми. Поэтому так важно знать, как правильно заполнить тег Description. Его грамотное оформление подскажет поисковым роботам содержание страницы, ее суть. В коде он прописан в значении <head>  и имеет такой вид: <meta name=»description» content=»Краткое описание страницы.»>. На сайте пользователь его не увидит, просмотр доступен только в сниппете в поисковой выдаче.

Для чего нужен метатег Description

Не так давно поисковые роботы подчинялись совершенно другим правилам и работали не по привычному сейчас алгоритму. Занять позицию в ТОП10 можно было, плотно наполнив теги и тексты ключевыми словами и фразами. Однако уже произошли кардинальные изменения. Описание сайта никоим образом не влияет на ранжирование, но ПС уделяют пристальное внимание содержимому. Они проверяют его на перенасыщенность ключевиками (переспам), переоптимизацию, признаки применения черных методов SEO-продвижения. Описание в ранжировании не играет роли, однако за него есть риск попадания в черный список.

Как заполнять description? Нужно быть осторожными и предварительно подумать, что указать. Писать вы будете для людей, которые прочтут его в сниппете выдачи, следовательно, он должен быть привлекательным именно для пользователей. От него во многом зависит кликабельность страницы, рост трафика и поведенческий фактор. ПС чутко следят за всем, что происходит с ресурсом. Они ведут счет показов в выдаче, сколько раз его посетили и т.д. Здесь уместно вспомнить о маркетинговых приемах. Если текст будет составлен неверно, не вызовет интерес у потенциальной аудитории, люди просто проигнорируют ваш сайт. Некачественный ресурс быстро скатится на нижние позиции, станет нерентабельным.

Описание не всегда попадает в сниппет, зачастую ПС могут изъять часть текста со страницы, или совместить дескрипшн и текстовый фрагмент. Если в метатеге не прописано откровенного спама, в сниппете окажется именно он (такое случается более чем в 50% случаев). Это означает, что продвижение и ситуация с сайтом находятся под вашим контролем.

Description — как заполнять правильно

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

  1. Конкретная информация. Как пользователь попадает на ресурс? Набирает нужную фразу в строке поиска и просматривает сайты. Но зачем ему переходить на каждый из них? Он внимательно изучит текст в сниппете, и, если он будет соответствовать его интересу, посетит ресурс. Информация должна быть полезной и содержать основные моменты, к примеру, характеристику товара/услуги, его цену, местонахождение продавца, контакты. При размещении стоимости определите, насколько она конкурентоспособна, иначе такое действие может навредить вам. Размещение номера телефона важно для организаций или лиц, предоставляющих срочные услуги, к примеру, службы такси, эвакуатора, компьютерной помощи и т.п.
  2. Наличие основного ключевого запроса. Ключ в дескрипшн не влияет на ранжирование. Но употребление его в теге повышает вероятность отражения в сниппете description, а не произвольного участка текста со страницы. Это повышает кликабельность при релевантности ключевика запросу. Как правило, слова выделяются жирным шрифтом.
  3. Оптимальный размер. Донесение до пользователя важной информации необходимо представлять в таком объеме, чтобы в итоге ничего не было обрезано. Как заполнять метатег description? Он имеет ограничение по количеству символов. Яндекс допускает максимальный объем в 160-170 знаков с учетом пробелов, Google — не более 150-170. Нормой считается 120-140 символов. Их вполне достаточно, чтобы вместить два предложения с рекламным уклоном, завуалированный призыв к действию или конкретные данные, о которых говорилось в правиле 1.
  4. Title и Description не должны быть идентичны друг другу. ПС не накажут за это, но подумайте сами, стоит ли бессмысленно использовать выгодное пространство, когда его можно применить в рекламных целях.
  5. Расширенные сниппеты. Это еще одна возможность увеличить посещаемость ресурса, что отразится на его положении в поисковой выдаче. Расширенный сниппет обеспечивает дополнительные переходы.
  6. Привлекательность и читабельность. Некоторые оптимизаторы и владельцы сайтов, желая ознакомить пользователей с большим числом товаров/услуг со страницы, скатываются к их банальному перечислению. Ничего интересного в подобном подходе нет, так как правильно заполнить description для сайта очень важно. Если конкретнее, это влияет на положение в выдаче.
  7. Отсутствие дублирования дескрипшн на внутренних страницах. Любая информация не должна повторяться внутри площадки. Это может повлечь за собой неприятные последствия. Описания обязаны быть уникальными.
  8. Noyaca. Не забывайте об этом теге, если ваш ресурс зарегистрирован в Яндекс.Каталоге. В таком случае при выдаче всем вашим страницам будет присвоен сниппет, указанный в описании в каталоге. Ничего «противозаконного» нет, но вы лишаетесь возможности полноценного использования данного направления. Избежать подобной участи поможет следующее действие: добавьте в блоке <head>— строку <meta name=»robots» content=»noyaca»/>.
  9. Упоминание региона. Если площадка имеет региональное направление и предназначена для охвата определенной области (города), выделите их название. Это сыграет вам на руку при геозависимом запросе.

Куда обратиться?

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

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

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

WordPress

access_time

10 декабря, 2020

hourglass_empty

4мин. чтения

Вступление

Как добавить мета теги в WordPress? Ответ на этот вопрос может показаться довольно простым. Добавить мета описание (meta description) и мета ключевые слова (meta keywords) в ваш блог на WordPress действительно не так уж и сложно, но польза от этого может быть несравнимо велика, когда речь пойдёт о SEO. В этом руководстве по WordPress мы покажем вам, как правильно использовать мета заголовок, ключевые слова и мета описания в блоге WordPress и значительно улучшить ваши позиции в SEO.

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

К предложению

Что потребуется

Перед началом этого руководства проверьте наличие:

  • доступ в административную область WordPress сайта.

Почему важны WordPress мета теги: meta description, meta keywords и meta title?

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

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

Мета описание (meta description) помогает вашему блогу вдвойне: облегчает работу поисковой системы, кратко описывает содержание записи и привлекает пользователей сжатым и ёмким резюме записи.

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

В итоге, из-за того, что поисковые системы отказываются указывать вес различных факторов в ранжировании сайтов, мы точно не знаем, насколько значительную роль играют meta description и keywords в улучшении SEO вашего сайта. Однако мы знаем, что они играют определенную роль, чего должно быть достаточно, чтобы привлечь ваше внимание к ним.

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

Применение плагина SEO Yoast для добавления мета тегов в WordPress

Плагин Yoast SEO разработан Joost de Valk, признанным гуру в SEO в WordPress. Хотя WordPress изначально сама по себе является довольно приличной платформой CMS с точки зрения SEO, Yoast SEO можно использовать для оснащения вашего сайта дополнительной мощью, которая может сказаться на большой разнице в рейтинге сайтов. Популярная функция анализа страниц Yoast выделяет детали, связанные с SEO, которые могли быть упущены, например, теги alt на изображениях, длина сообщения и структура предложения. Мы будем использовать плагин для добавления title, description и keywords в блог WordPress.

Шаг 1 – Включение расширенных настроек SEO Yoast

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

Чтобы включить дополнительные настройки, перейдите в SEO -> Консоль. Здесь выберите вкладку Возможности и найдите заголовок Дополнительные настройки страницы. Передвиньте положение кнопки в Вкл. под заголовком. Это заставит перезагрузиться странице и после этого вы увидите дополнительные настройки. В некоторых версиях плагина дополнительные настройки изначально включены, среди которых вы тоже можете включать или отключать отдельные из них. Пример части страницы возможностей на англ. :

Шаг 2 – Добавление Meta Title

Чтобы добавить Meta Title или SEO title к записи, перейдите в Записи ->Все записи и выберите ту запись, для которой вы ходите добавить мета заголовок.

Как только запись откроется в редакторе, прокрутите страницу до заголовка Yoast SEO. В этом разделе вы увидите Просмотр сниппета, то как он будет показан в поисковой системе. Это создаётся автоматически для каждой записи. Нажмите на Изменить сниппет. Перед вами появятся дополнительные поля. Первое поле, называется SEO-заголовок, это и есть мета заголовок страницы. Введите соответствующий заголовок в это поле. Yoast поможет вам его создать правильно, индикацией цветной полосы ниже – зелёный означает, что длина оптимальная.

Шаг 3 – Добавление Meta Description

Мета описания в WordPress можно добавить в том же разделе, что и SEO-заголовок. Сразу под полем SEO-заголовок находится два дополнительных поля – Ярлык и Мета-описание. Просто напишите краткое и понятное описание вашей записи.

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

Шаг 4 – Добавление Keywords

В отличие от мета заголовка и мета описания, ключевые слова могут быть отключены в настройках Yoast SEO и тогда их нужно включить вручную. Для этого перейдите на страницу SEO -> Titles & Meta и выберите вкладку Другие. Здесь вы увидите настройку Использовать мета теги ключевые слова? – включите её. Сохраните настройки. Обращаем ваше внимание, что названия и набор настроек может отличаться в разных версиях плагина. Ниже показан пример этой настройки на англ. языке:

Чтобы добавить ключевые слова к записи, опять перейдите в Записи -> Все записи. Прокрутите страницу до раздела Yoast SEO и сразу под Просмотром сниппета вы найдёте поле Фокусное ключевое слово либо Meta keywords.

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

Либо, если поле рассчитано на несколько значений keywords, то добавьте несколько ключевых слов (не более 10), разделённых запятыми. Здесь тоже постарайтесь подобрать наиболее подходящие для вашей статьи ключевые слова, которые описывают вашу статью и представлены в самой статье.

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

Выводы

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

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

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

Работы по написанию и заполнению чаще всего выполняются на старте проекта специалистами, но что делать, если SEO-оптимизатора у вас нет «под рукой», а сделать свой ресурс прибыльным и получить заветные позиции в Яндекс и Google хочется? Давайте разбираться.

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

Мета-теги – это инструкции разметки HTML-страниц, назначение которых – указание дополнительных данных о странице для поисковых систем (ПС). Если, находясь на сайте, вы нажмете сочетание клавиш Ctrl+U (сработает для большинства популярных браузеров Chrome, Яндекс,Opera) вы увидите HTML документ, в блоке которого вы найдете те самые мета-теги

Вы можете прямо сейчас проделать эту нехитрую операцию и узнать, как обстоят дела с мета на вашем сайте. Еще одним простым способом отслеживания заполнения title, description и keywords является установка расширения в браузер Google Chrome «SEO META in 1 CLICK». На верхней панели появится иконка, при нажатии на которую, вы получите всю необходимую информацию.

Теперь вы вооружены и готовы.

Зачем нужно заполнять мета-теги

«Заполнение и оптимизация мета-тегов жизненно необходима вашему сайту», — скажем мы. «Почему?» — не поймете вы.

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

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

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

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

Итак, заполнять мета-теги нужно, потому что…

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

С вопросом «зачем» разобрались, но «как»?

Откуда брать ключи для мета-тегов?

Маленькое, но очень важное отступление.

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

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

На помощь вам придет WordStat – сервис для подбора ключей и сбора статистики об их частотности.

  1. Мозговой штурм

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

  2. Бесконечный список

    Хорошо если ваш словарный запас ограничился на 2-3 фразах, их легко уместить в одном предложении и все прекрасно, но что делать если их 10 или того хуже 20. Все не поместятся. Как отбросить лишние? Интуиция? Нет.

  3. Спросите пользователей.

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

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

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

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

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

Мета-тег Title

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

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

Правила заполнения Title

Прежде чем приступить к формированию title, нужно четко запомнить несколько требований:

  1. Чем ближе основной ключ находится к началу, тем лучше
  2. Старайтесь по возможности не склонять основное ключевое слово
  3. Каждый из title на вашем сайте должен быть единственным и неповторимым как на вашем сайте, так и среди других сайтах
  4. Title не должен быть несвязным набором ключей. Это должно быть грамматически связанное и правильно составленное предложение
  5. Title и заголовок страницы – это разные вещи и не нужно их путать. Они должны быть разными
  6. Если вы оказываете услуги или продаете товар в конкретном регионе, укажите в title город
  7. Не повторяйте ключ дважды
  8. Если вам нужно разбить title на два предложения ни в коем случае не используйте точку. Используйте другие разделители «|», «:», «-» и ничего кроме них (да, запятые тоже нельзя)
  9. В конце title точка не ставится
  10. Начните title с заглавной буквы
  11. Оптимальная длина title от 30 до 65 символов, все что выйдет за границы поисковая система обрежет

Пример заполнения title

Итак, с теорией разобрались теперь перейдем к практике. Вернемся к шкафу. Мы выбрали три подходящих ключа «Шкаф, купить шкаф, деревянный шкаф». Все логично, но за такой title поисковая система может наложить санкции. Почему? Смотрите выше пункт 4 и пункт 7.

А вот предложение «Купить недорого деревянный шкаф в Москве – ООО «Стеллажик»» не только содержит основные высокочастотные запросы, но и отвечает всем правилам грамматики.

Итак, еще несколько примеров правильных Title:

Купить капсульную кофеварку по низкой цене в Москве – «Импульс»

Заказать сайт-визитку в Орле – разработка сайтов «Агни»

Евроремонт домов и квартир в Смоленске по низким ценам | Еврострой

А вот так делать не нужно:

Окна, установка окон, пластиковые окна, дешевые окна, купить окна

Простое перечисление ключевых слов – это плохой вариант.

Главная. ООО Праздник, товары для праздников оптом по низким ценам в Белгороде

Помните, никаких точек и запятых? А еще ключевые слова должны быть в самом начале.

Купить торт

Слишком короткий и неинформативный title

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

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

Мета-тег description – с какой стороны к нему подойти?

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

Google всегда отображает содержание мета-тега description в сниппете. Яндекс формирует сниппет на свое усмотрение из вашего контента или мета-тега.

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

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

Несколько неукоснительных правил:

  1. Добавьте самую частотную фразу в начало
  2. Используйте прямое вхождение ключа
  3. Текст должен быть согласованным с точки зрения русского языка
  4. Description не title, поэтому не стоит его повторять
  5. Оптимальная длинна составляет от 70 и до 200 символов. Все, что выходит за верхний предел, поисковая система обрежет
  6. Мыслите креативно, отразите ваши сильные стороны и преимущества
  7. Используйте призывы к действию
  8. Придумайте уникальный текст для каждой из страниц сайта

Кажется, что все очень сложно, но это не так. Перейдем к примерам.

Пример заполнения description: как правильно, а как делать не стоит

Давайте разберем следующий description.

Телевизоры в Москве – купить телевизор по выгодной цене в Электрисити. Бесплатная доставка и гарантия 2 года. Большой выбор товаров. Совершайте покупки на выгодных условиях!

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

Основная фраза «телевизоры в Москве» употреблена в самом начале, указали преимущества (гарантии, бесплатная доставка). Cделали description уникальным по отношению к другим сайтам, добавив название своего магазина (бренда). И конечно же призыв к действию в самом конце не останется незамеченным.

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

А теперь представьте, что вы хотите купить себе электронные часы и видите следующее описание:

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

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

Маленький бонус напоследок! Универсальный шаблон для коммерческих сайтов:

[Название категории] купить по цене от [минимальная цена в категории] ☛ Низкие цены ☛ Большой выбор ☛ Доставка по всей России ★★★ Интернет-магазин ______ ☎ [телефон] (Пн-Сб с 9:00 до 18:00)

[Название товара] купить по цене [цена товара] ☛ Низкие цены ☛ Большой выбор ☛ Доставка по всей России ★★★ Интернет-магазин _____и ☎ [телефон] (Пн-Сб с 9:00 до 18:00)

Если вам показалось, что написать что-то свое абсолютно вам не по силам, то такой description подойдет под любой вид товаров.

Мета-тег Keywords

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

Правила заполнения

  1. Пишите только релевантные для вашей страницы ключевые запросы
  2. Не добавляйте слишком много фраз – количество в пределах 1-5, будет оптимальным
  3. Пишите запросы через «,»
  4. Вот и все, теперь вы знаете как составить важные для оптимизации мета-теги самостоятельно. Не забудьте, что вам нужно прописать их для каждой из страниц вашего сайта. Удачи!

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

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

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

[Название товара] – купить в [Город] | [Название магазина]

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

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

Мета-теги для внутренней оптимизации и продвижения сайта

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

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

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

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

Заголовок документа — тег Title

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

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

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

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

Описание страницы — мета-тег Description

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

Хотя никто не запрещает вам написать сюда много информации, поисковики ограничивают и его максимальную отображаемую длину. Приблизительное рекомендуемое количество символов здесь — 100-200.

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

Мета-тег индексации — Robots

Содержание этого мета-тега может иметь несколько заранее определённых значений. По умолчанию, для нормальной индексации вашей страницы, в нём должно быть прописано: «index, follow». Если по какой-то причине вы хотите указать поисковому боту, что данную страницу не стоит индексировать, пропишите в нём: «noindex, nofollow».

  • index разрешает индексацию самого текста
  • follow позволяет поисковику производить индексацию ссылок в нём

Пример для обычной индексации:

<meta name=»robots» content=»index, follow»>

Адаптивное отображение — мета-тег Viewport

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

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

Универсальная запись, которая подойдёт в большинстве случаев:

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

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

Заголовки — это целая группа, которая помогает поисковику понять структуру документа и включает в себя 6 тегов: h2, h3, h4, h5, h5 и h6. В отличие от предыдущих мета-тегов, заголовки располагаются в «теле» документа — внутри тега body, а не head и их содержимое видно посетителю в самом тексте страницы.

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

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

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

Заключение

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

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

Мета-описание [2021 SEO] — Moz

Что такое мета-описание?

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

Пример:

Пример мета-описания

Пример кода

    

Оптимальная длина

Мета-описания могут быть любой длины, но Google обычно обрезает фрагменты до ~ 155–160 символов. Лучше, чтобы метаописания были достаточно длинными, чтобы они являются достаточно информативными, поэтому мы рекомендуем описания от 50 до 160 символов. Помните, что «оптимальная» длина будет варьироваться в зависимости от ситуации, и вашей основной целью должно быть обеспечение ценности и увеличения количества кликов.

Оптимальный формат

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

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

Фактор ранжирования Google?

В сентябре 2009 года Google объявил, что ни метаописания, ни мета-ключевые слова не влияют на алгоритмы ранжирования Google для веб-поиска.

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

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

Лучшие практики SEO

Напишите убедительную копию объявления

Тег meta description выполняет функцию рекламной копии.Он привлекает читателей на веб-сайт из результатов поиска и, таким образом, является очень заметной и важной частью поискового маркетинга. Создание удобочитаемого, убедительного описания с использованием важных ключевых слов может улучшить рейтинг кликов для данной веб-страницы. Чтобы максимизировать CTR на страницах результатов поисковых систем, важно отметить, что Google и другие поисковые системы выделяют ключевые слова в описании жирным шрифтом, когда они соответствуют поисковым запросам. Этот полужирный текст может привлечь внимание пользователей, выполняющих поиск, поэтому вам следует как можно точнее сопоставить свои описания с поисковыми запросами.

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

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

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

Не включайте двойные кавычки

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

Иногда нормально писать метаописания

, а не

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

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

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

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

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

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


Продолжайте изучать

(мета) Теги заголовка + проверка длины заголовка [2021 SEO]

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

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

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

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

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

Пример кода
   Пример заголовка   
Оптимальный формат

Первичное ключевое слово — Вторичное ключевое слово | Фирменное наименование
8-футовые зеленые виджеты — Виджеты и инструменты | Widget World

Оптимальная длина заголовка

Google обычно отображает первые 50–60 символов тега заголовка.Согласно нашим исследованиям, если вы ограничите свои заголовки 60 символами, можно ожидать, что около 90% ваших заголовков будут отображаться правильно. Точного ограничения на количество символов нет, потому что символы могут различаться по ширине, а отображаемые заголовки Google (в настоящее время) имеют максимум 600 пикселей.


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

Мета-теги заголовков — главный фактор, помогающий поисковым системам понять, о чем ваша страница, и они являются первым впечатлением, которое у многих людей создается о вашей странице. Теги заголовка используются в трех ключевых местах: (1) страницы результатов поисковых систем (SERP), (2) веб-браузеры и (3) социальные сети.

1. Страницы результатов поисковой системы

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

2. Веб-браузеры

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

3. Социальные сети

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

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


Как мне написать хороший тег заголовка?

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

1. Следите за длиной заголовка

Если заголовок слишком длинный, поисковые системы могут обрезать его, добавив многоточие («… «) и в итоге могут пропустить важные слова. Хотя мы обычно рекомендуем использовать заголовки длиной не более 60 символов, точный лимит немного сложнее и основан на 600-пиксельном контейнере.

Некоторые символы, естественно, занимают больше пробел. Такой символ, как заглавная «W», шире, чем строчный, например «i» или «t». Взгляните на приведенные ниже примеры:

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

Старайтесь избегать ВСЕХ заголовков ЗАГЛАВНЫМИ буквами. Посетителям, выполняющим поиск, может быть сложно их прочитать, и они могут серьезно ограничивать количество символов, отображаемых Google.

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

Здесь, потому что Google обрезал текст перед добавлением бренда (текст перед «… «- исходный текст), были отображены только 35 символов исходного заголовка. Подробнее о том, как запретить поисковым системам переписывать теги заголовков, см. ниже.

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

2. Не переусердствуйте с ключевыми словами SEO

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

Купить виджеты, Лучшие виджеты, Дешевые виджеты, Виджеты на продажу

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

3. Дайте каждой странице уникальный заголовок

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

[Название продукта] — [Категория продукта] | [Фирменное наименование]

Категорически избегайте заголовков по умолчанию, таких как «Домашняя страница» или «Новая страница» — эти заголовки могут заставить Google думать, что у вас есть дублированный контент на вашем сайте (или даже на других сайтах в Интернете). Кроме того, эти заголовки почти всегда снижают CTR.Спросите себя: какова вероятность того, что вы нажмете на страницу под названием «Без названия» или «Страница продукта»?

4. Ставьте важные ключевые слова на первое место

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

Фирменное наименование | Основная категория продукта — Второстепенная категория продукта — Название продукта

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

5. Воспользуйтесь преимуществами своего бренда

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

6. Пишите для своих клиентов

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


Почему Google не использует мой тег заголовка?

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

1. Ваш заголовок наполнен ключевыми словами

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

2. Ваш заголовок не соответствует запросу

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

3. У вас есть альтернативный заголовок

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

4.
У вас есть старый список DMOZ.

В редких случаях поисковые системы могут получить заголовок из DMOZ (также известного как Open Directory Project). Если отображаемый заголовок в поиске не соответствует тегу заголовка, но соответствует вашему списку DMOZ, вы можете заблокировать эту замену с помощью тега Robots NOODP, который выглядит следующим образом:

  

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


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

Как писать метаописания в постоянно меняющемся мире (также известный как Google Giveth, Google Taketh Away)

Сводка: С середины мая 2018 года Google вернулся к более коротким отображаемым фрагментам. Наши данные показывают, что эти изменения широко распространены и что большинство метаописаний обрезаются в предыдущем диапазоне примерно 155–160 символов.

Еще в декабре Google существенно изменил способ отображения поисковых сниппетов: наше исследование показало, что многие сниппеты длиннее 300 символов. На выходных они, похоже, отменили это изменение (Дэнни Салливан частично подтвердил это в Twitter 14 мая). Помимо очевидного вопроса — каковы новые ограничения? — это может оставить вас в недоумении, как справиться, когда правила продолжают меняться. Ни у кого из нас нет хрустального шара, но я попытаюсь ответить на оба вопроса, основываясь на том, что мы знаем сегодня.

Ложь, грязная ложь и статистика …

Я извлек все доступные фрагменты поиска из MozCast 10K (страница 1 результатов Google для 10 000 ключевых слов), поскольку это набор данных, который мы собираем ежедневно и у него богатая история. Утром 15 мая в этом наборе данных было 89 383 отображаемых фрагмента.

Я мог бы сказать вам, что для всего набора данных минимальная длина составляла 6 символов, максимальная — 386, а среднее значение — около 159. Это не очень полезно по нескольким причинам.Во-первых, совет писать метаописания длиной от 6 до 386 символов — не совсем полезный совет. Во-вторых, мы имеем дело с множеством крайностей. Например, вот отрывок по запросу «USMC»:

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

Если отбросить их серьезную путаницу с несколькими брендами, я думаю, мы все можем согласиться с тем, что «BER Meta TAG1» не оптимален.Если эти кейсы чему-то вас научат, то дело только в том, чего нельзя делать. А как насчет противоположной крайности? Вот фрагмент из 386 символов, полученный при поиске по запросу «соглашение о недопущении конкуренции»:

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

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

Общая картина, часть 1

Иногда вы должны позволить данным говорить сами за себя, с минимальными уговорами. Давайте посмотрим на все отрезанные фрагменты (заканчивающиеся на «…») и удалим результаты видео (из предыдущего исследования мы знаем, что они немного короче).Остается 42 863 фрагмента (чуть меньше половины нашего набора данных). Вот график всех отрезанных длин, собранных в ячейки по 25 символов (0–25, 26–50 и т. Д.):

Это сильно отличается от наших данных за декабрь и явно сгруппировано в диапазоне 150–175 символов. Мы видим, что несколько отображаемых фрагментов Google обрезаются после диапазона 300+, но они затмеваются более короткими отрезками.

Общая картина, часть 2

Очевидно, что в этом диапазоне 125–175 символов происходит много всего, поэтому давайте увеличим масштаб и посмотрим только на среднюю часть частотного распределения, разбитую на более мелкие сегменты из 5 символов:

Мы можем довольно ясно видеть, что большая часть отсечений происходит в диапазоне 145–165 символов.До декабря наши предыдущие правила для метаописаний заключались в том, чтобы они не превышали 155 символов, поэтому похоже, что Google более или менее вернулся к старым правилам.

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

К машине обратного пути …?!

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

(1) Пусть этим займется Google

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

(2) Пусть … упадет там, где может

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

(3) Нарезать все на 155 символов

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

(4) Напишите описания с адаптацией к длине

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

Подход 150/150

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

Что, если бы мы применили такой подход к метаописаниям? Другими словами, почему бы не написать «наводку» из 150 символов, которая суммирует страницу, а затем добавить 150 символов полезных, но менее важных деталей (когда добавление этой детали имеет смысл и дает ценность)? 150/150 — это не магическое число — вы можете даже сделать 100/100 или 100/200.Главное — убедиться, что текст перед вырезом может стоять сам по себе.

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

Строка 1 (145 символов)

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

Строка 2 (122 символа)

Согласно нашему новому исследованию (май 2018 г.), ограничение снова составляет 155–160 символов.Как оптимизаторам оптимизации следует адаптироваться к этим изменениям?

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

Стоит ли вообще беспокоиться?

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

Есть ли способ узнать, когда будет использоваться более длинный фрагмент (> 300 символов)? Некоторые специалисты по поисковой оптимизации выдвинули гипотезу о наличии связи между более длинными сниппетами и избранными сниппетами вверху страницы. В нашем общем наборе данных 13,3% всех поисковых запросов содержали фрагменты.Если мы посмотрим только на поисковые запросы с максимальной длиной отображаемого фрагмента 160 символов (т.е. ни один результат не был длиннее 160 символов), то обнаружение указанного фрагмента составило 11,4%. Если мы посмотрим на результаты поиска с хотя бы одним отображаемым сниппетом длиной более 300 символов, количество избранных сниппетов составляет 41,8%. Хотя этот второй набор данных довольно мал, это разительная разница. Кажется, есть некоторая связь между способностью Google извлекать ответы в виде избранных сниппетов и их способностью или желанием отображать более длинные поисковые сниппеты. Однако во многих случаях эти более длинные фрагменты переписываются или берутся прямо со страницы, поэтому даже в этом случае нет гарантии, что Google будет использовать ваше более длинное мета-описание.

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

HTML-мета-HTTP-эквивалент Атрибут

❮ HTML тег

Пример

Обновлять документ каждые 30 секунд:



Попробуй сам »

Определение и использование

Атрибут http-Equiv предоставляет заголовок HTTP для информации / значения атрибута content .

Атрибут http-Equiv может использоваться для имитации заголовка ответа HTTP.


Поддержка браузера

Атрибут
http-экв Есть Есть Есть Есть Есть

Синтаксис

Значения атрибутов

Значение Описание
политика безопасности содержимого Задает политику содержимого для документа.

Пример:

тип содержимого Задает кодировку символов для документа.

Пример:

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

Пример:

Примечание. Значение «обновить» следует использовать осторожно, поскольку оно отнимает у пользователя управление страницей. Использование «обновления» вызовет сбой в Рекомендации W3C по обеспечению доступности веб-контента.


❮ HTML-тег

Меньше думайте о SEO и больше о переходах по ссылкам

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

Как поисковые системы используют метаописания

Лучшие примеры метаописаний и способы их использования поисковыми системами исходят от самих поисковых систем.Для начала давайте посмотрим на собственное метаописание Google.

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

Ровно 159 знаков, включая пробелы. Метаописание Google отображается в трех ведущих поисковых системах следующим образом.

В Google…

В Yahoo…

В Bing…

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

Что лучшие SEO-блоги говорят о метаописаниях

Независимо от того, учитываются ли они для ранжирования, лучшие блоги по SEO предлагают использовать метаописания. В серии статей «Изучите SEO» SEOmoz сообщает…

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

И в 21 Essential SEO Tips & Techniques, Search Engine Land говорит:

«Тег meta description не поможет вам ранжироваться, но он часто будет отображаться в виде фрагмента текста под вашим объявлением, поэтому он должен включать релевантные ключевые слова и быть написаны так, чтобы побудить пользователей нажимать на ваше объявление. .”

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

  • SEOmoz использует метаописания на своей домашней странице и страницах продуктов, но не в своих сообщениях в блогах.
  • Search Engine Land использует длинные метаописания на своей домашней странице и иногда использует их в своих сообщениях.
  • Search Engine Watch использует длинное метаописание на своей домашней странице, но не в своих сообщениях.
  • SEOBook не использует метаописание на своей домашней странице или в сообщениях в блогах, но время от времени использует его на внутренних страницах.
  • Search Engine Journal использует краткое метаописание на своей домашней странице, но не в своих сообщениях.

3 причины, почему вы все еще должны использовать метаописания

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

Причина 1: ключевые слова в результатах поиска выделены жирным шрифтом

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

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

Причина 2: это используют популярные социальные сети

Каждый раз, когда вы делитесь страницей в социальных сетях, таких как Facebook, Google+ или LinkedIn, каждый сайт будет извлекать либо метаописание, либо первое или два предложения сообщения в качестве описания для отображения в общей публикации. Метаописание обычно отображается полностью, а первые или два предложения вашего сообщения будут обрезаны с многоточием […].Хотя вы можете редактировать описание для Facebook и LinkedIn, не все, кто делится вашей страницей, будут делать это.

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

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

Причина 3: социальные сети закладок используют его

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

Вот несколько примеров сетей, которые включают метаописания: Digg, BizSugar и My SEO Community. Практически любая социальная сеть закладок / голосования, построенная на системе Pligg CMS, также сначала будет использовать метаописание. Хотя вы можете редактировать описания в этих сетях, вы не можете рассчитывать на то, что это сделают другие, отправившие ваши страницы.Кроме того, если вам не нужно редактировать описания, вы сэкономите немного времени для себя, если отправляете свои собственные страницы.

Как включить метаописания на свои страницы

Если вы используете WordPress в собственном домене, вам повезло. Метаописания можно легко добавить к вашему контенту с помощью простых (и бесплатных) плагинов, таких как All in One SEO Pack. Просто установите его и ищите на каждой странице / посте поле «Детали SEO», в котором будет запрашиваться настраиваемый заголовок SEO, мета-описания и другая информация.Детали SEO вашей домашней страницы можно добавить в разделе основных настроек плагина. Другие темы и платформы могут иметь встроенные параметры SEO. Если нет, выполните поиск платформы своего веб-сайта и плагина, надстройки или расширения SEO.

Советы по улучшению результатов поиска в результатах поиска

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

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

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

Шаг № 1: Посетите Ubersuggest, введите свой домен и нажмите «Поиск»

Шаг № 2: Щелкните Аудит сайта на левой боковой панели

Шаг № 3: Прокрутите вниз до раздела «Основные проблемы SEO» и нажмите «Просмотреть все проблемы внизу»

Шаг № 4: Поиск «повторяющихся метаописаний» (Ctrl + F)

Если найдете, щелкните по строке.В приведенном выше примере я нажимаю на слова «13 страниц с повторяющимися метаописаниями».

Затем выдается список всех страниц с повторяющимися метаописаниями:

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

Вы все еще используете метаописания на своем сайте? Если да, то есть ли у вас какие-либо дополнительные советы и инструменты, которые люди могут использовать, чтобы сделать добавление метаописаний на свой сайт более простым и полезным? Поделитесь своими мыслями в комментариях!

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

Шон Ворк — бывший директор по маркетингу в KISSmetrics.

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Создавайте хорошие заголовки и фрагменты в результатах поиска

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

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

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

Создание описательных заголовков страниц

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

Вот несколько советов по управлению вашими титулами:

Почему заголовок результата поиска может отличаться от тега

страницы </h4> <p> Если мы обнаружили, что у определенного результата есть одна из перечисленных выше проблем с его заголовком, мы можем попытаться создать улучшенный заголовок из привязок, текста на странице или других источников. Однако иногда даже страницы с хорошо сформулированными, краткими, описательными названиями в результате будут иметь разные названия в наших результатах поиска, чтобы лучше показать их релевантность запросу.Для этого есть простая причина: тег заголовка, указанный владельцем веб-сайта, ограничен статичностью, фиксируется независимо от запроса. </p> <p> Когда мы знаем запрос пользователя, мы часто можем найти альтернативный текст на странице, который лучше объясняет, почему этот результат релевантен. Использование этого альтернативного текста в качестве заголовка помогает пользователю, а также может помочь вашему сайту. Пользователи сканируют результаты своего запроса или другие признаки релевантности, и заголовок, подобранный для запроса, может увеличить шансы, что они перейдут по ссылке.</p> <p> Если вы видите, что ваши страницы появляются в результатах поиска с измененными заголовками, проверьте, есть ли у ваших заголовков одна из проблем, описанных выше. Если нет, подумайте, подходит ли альтернативный заголовок для запроса. Если вы по-прежнему считаете, что исходное название было бы лучше, сообщите нам об этом на справочном форуме Центра поиска Google. </p> <h3 data-text="How snippets are created"><span class="ez-toc-section" id="i-52"> Как создаются сниппеты </span></h3> <p> Фрагменты автоматически создаются из содержимого страницы. Фрагменты предназначены для выделения и предварительного просмотра содержимого страницы, которое лучше всего соответствует конкретному поиску пользователя: это означает, что на странице могут отображаться разные фрагменты для разных запросов.</p> <p> У владельцев сайтов есть два основных способа предложить контент для создаваемых нами фрагментов: расширенные результаты и мета-теги описания. </p> <h4 data-text="How to adjust snippet presentation"><span class="ez-toc-section" id="i-53"> Как настроить представление фрагмента </span></h4> <p> Вы также можете либо запретить создание и отображение сниппетов для вашего сайта в результатах поиска, либо сообщить Google о максимальной длине, которую вы хотите, чтобы ваши сниппеты были. Используйте метатег nosnippet, чтобы Google не отображал фрагмент для вашей страницы в результатах поиска, или используйте метатег <code translate="no" dir="ltr"> max-snippet: <em> [number] </em> </code>, чтобы указать максимальную длину для ваших фрагментов результатов.Вы также можете запретить отображение определенных частей текстового содержимого страницы во фрагменте с помощью data-nosnippet. </p> <h4 data-text="Create good meta descriptions"><span class="ez-toc-section" id="i-54"> Создавайте хорошие метаописания </span></h4> <p> Google иногда использует тег описания <meta> со страницы для создания фрагмента результатов поиска, если мы думаем, что он дает пользователям более точное описание, чем это было бы возможно только на основе содержимого страницы. Тег meta description должен, как правило, информировать и заинтересовывать пользователей кратким релевантным описанием того, о чем конкретная страница.Они похожи на презентацию, которая убеждает пользователя в том, что страница — это именно то, что он ищет. Нет ограничений на длину метаописания, но фрагменты результатов поиска усекаются по мере необходимости, как правило, для соответствия ширине устройства. </p> <ul> <li> Убедитесь, что <strong> каждая страница вашего сайта имеет метаописание </strong>. </li> <li> <strong> Различайте описания для разных страниц. </strong> Идентичные или похожие описания на каждой странице сайта бесполезны, когда отдельные страницы появляются в результатах поиска в Интернете.В этих случаях у нас меньше шансов отобразить шаблонный текст. По возможности создавайте описания, которые точно описывают конкретную страницу. Используйте описания уровня сайта на главной домашней странице или других страницах агрегирования и используйте описания уровня страницы везде. Если у вас нет времени на создание описания для каждой отдельной страницы, постарайтесь расставить приоритеты для вашего контента: как минимум, создайте описание для важных URL-адресов, таких как ваша домашняя страница и популярные страницы. </li> <li> <strong> Включите в описание четко обозначенные факты.</strong> Метаописание не обязательно должно быть в формате предложения; это также отличное место для включения информации о странице. Например, в новостях или сообщениях в блогах можно указать автора, дату публикации или информацию о подписи. Это может дать потенциальным посетителям очень важную информацию, которая в противном случае не отобразилась бы во фрагменте. Точно так же на страницах продуктов могут быть ключевые фрагменты информации — цена, возраст, производитель — разбросанные по странице. Хорошее метаописание может свести воедино все эти данные.Например, следующее метаописание предоставляет подробную информацию о книге. <pre translate="no" dir="ltr"> <meta name = "Description" content = "Автор А.Н. Автор, Иллюстрация В. Гога, цена: 17,99 долларов США. Объем: 784 страницы "> </pre> В этом примере информация четко помечена и разделена. </li> <li> <strong> Создание описаний программным способом. </strong> Для некоторых сайтов, например источников новостей, создание точного и уникального описания для каждой страницы несложно: поскольку каждая статья написана от руки, требуется минимальные усилия, чтобы добавить описание из одного предложения.Для крупных сайтов, управляемых базами данных, таких как агрегаторы продуктов, рукописные описания могут быть невозможны. В последнем случае, однако, может быть уместным и поощряется программное создание описаний. Хорошие описания удобочитаемы и разнообразны. Данные, относящиеся к страницам, являются хорошим кандидатом для программного создания. Имейте в виду, что метаописания, состоящие из длинных строк ключевых слов, не дают пользователям четкого представления о содержании страницы и с меньшей вероятностью будут отображаться вместо обычного фрагмента.</li> <li> <strong> Используйте описания качества. </strong> Наконец, убедитесь, что ваши описания действительно информативны. Поскольку метаописания не отображаются на страницах, которые видит пользователь, легко позволить этому контенту скользить. Но высококачественные описания могут отображаться в результатах поиска Google и могут иметь большое значение для улучшения качества и количества вашего поискового трафика. </li> </ul> <h2><span class="ez-toc-section" id="_HTML"> Что в голове? Метаданные в HTML — Изучите веб-разработку </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Заголовок HTML-документа — это часть, которая не отображается в веб-браузере при загрузке страницы.Он содержит такую ​​информацию, как страница <code> <title> </code>, ссылки на CSS (если вы решите стилизовать свой HTML-контент с помощью CSS), ссылки на настраиваемые значки и другие метаданные (данные об HTML, например об авторе и важные ключевые слова, описывающие документ.) В этой статье мы рассмотрим все вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой. </p> <table> <tbody> <tr> <th scope="row"> Предварительные требования: </th> <td> Базовое знакомство с HTML, как описано в Приступая к работе с HTML.</td> </tr> <tr> <th scope="row"> Цель: </th> <td> Чтобы узнать о заголовке HTML, его назначении, наиболее важных элементах, которые он может содержать, и о том, какое влияние оно может иметь на документ HTML. </td> </tr> </tbody> </table> <p> Давайте вернемся к простому HTML-документу, который мы рассмотрели в предыдущей статье: </p> <pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница

Это моя страница

Заголовок HTML — это содержимое элемента — в отличие от содержимого элемента (которое отображается на странице при загрузке в браузере), содержимое заголовка не отображается на странице .Вместо этого задача руководителя — содержать метаданные о документе. В приведенном выше примере голова довольно маленькая:

  
  
   Моя тестовая страница 
  

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

Мы уже видели в действии элемент </code> — его можно использовать для добавления заголовка в документ. Однако это можно спутать с элементом <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code>, который используется для добавления заголовка верхнего уровня к содержимому вашего тела — его также иногда называют заголовком страницы. Но это разные вещи! </p> <ul> <li> Элемент <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code> появляется на странице при загрузке в браузере — обычно его следует использовать один раз на страницу, чтобы разметить заголовок содержимого вашей страницы (заголовок истории, заголовок новости или что-то подходящее. к вашему использованию.) </li> <li> Элемент <code> <title> </code> — это метаданные, которые представляют заголовок всего HTML-документа (а не его содержимое). </li> </ul> <h4><span class="ez-toc-section" id="i-55"> Активное обучение: изучение простого примера </span></h4> <ol> <li> Чтобы начать это активное обучение, мы хотели бы, чтобы вы зашли в наш репозиторий GitHub и загрузили копию нашей страницы title-example.html. Для этого либо <ol> <li> Скопируйте и вставьте код со страницы в новый текстовый файл в редакторе кода, затем сохраните его в удобном месте.</li> <li> Нажмите кнопку «Raw» на странице GitHub, что приведет к появлению необработанного кода (возможно, в новой вкладке браузера). Затем выберите в браузере меню <em> File> Save Page As … </em> и выберите подходящее место для сохранения файла. </li> </ol> </li> <li> Теперь откройте файл в браузере. Вы должны увидеть что-то вроде этого: <p> Теперь должно быть совершенно очевидно, где находится содержимое <code> <h2> </h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></code>, а где — содержимое <code> <title> </code>! </p> </li> <li> Вам также следует попробовать открыть код в редакторе кода, отредактировать содержимое этих элементов, а затем обновить страницу в браузере.Повеселись с этим. </li> </ol> <p> Содержимое элемента <code> <title> </code> также используется другими способами. Например, если вы попытаетесь добавить страницу в закладки (<em> Закладки> Закладка этой страницы </em> или значок звездочки в строке URL в Firefox), вы увидите содержимое <code> <title> </code>, заполненное как предлагаемое имя закладки. </p> <p> </p> <p> Содержимое <code> <title> </code> также используется в результатах поиска, как вы увидите ниже. </p> <p> Метаданные — это данные, которые описывают данные, а в HTML есть «официальный» способ добавления метаданных в документ — элемент <code> <meta> </code>.Конечно, другие вещи, о которых мы говорим в этой статье, также можно рассматривать как метаданные. Существует множество различных типов элементов <code> <meta> </code>, которые могут быть включены в <head> вашей страницы, но мы не будем пытаться объяснять их все на данном этапе, так как это будет слишком запутанно. Вместо этого мы объясним несколько вещей, которые вы обычно видите, просто чтобы дать вам представление. </p> <h4><span class="ez-toc-section" id="i-56"> Указание кодировки символов вашего документа </span></h4> <p> В примере, который мы видели выше, эта строка была включена: </p> <pre> <code> <meta charset = "utf-8"> </code> </pre> <p> Этот элемент определяет кодировку символов документа — набор символов, который разрешено использовать в документе.<code> utf-8 </code> — это универсальный набор символов, который включает практически любые символы любого человеческого языка. Это означает, что ваша веб-страница сможет поддерживать отображение на любом языке; поэтому рекомендуется устанавливать это на каждой создаваемой вами веб-странице! Например, ваша страница может нормально обрабатывать английский и японский языки: </p> <p> Если вы установите кодировку символов на <code> ISO-8859-1 </code>, например (набор символов для латинского алфавита), рендеринг вашей страницы может выглядеть неправильно: </p> <p> </p> <p> <strong> Примечание </strong>: Некоторые браузеры (например, Chrome) автоматически исправляют неправильные кодировки, поэтому в зависимости от того, какой браузер вы используете, вы можете не увидеть эту проблему.Вы все равно должны установить кодировку <code> utf-8 </code> на своей странице, чтобы избежать каких-либо потенциальных проблем в других браузерах. </p> <h4><span class="ez-toc-section" id="i-57"> Активное обучение: поэкспериментируйте с кодировкой символов </span></h4> <p> Чтобы попробовать это, вернитесь к простому шаблону HTML, полученному в предыдущем разделе на <code> <title> </code> (страница title-example.html), попробуйте изменить значение мета-кодировки на <code> ISO-8859-1 </code>, и добавьте японский язык на свою страницу. Это код, который мы использовали: </p> <pre> <code> <p> Японский пример: ご 飯 が 熱 い。 </p> </code> </pre> <h4><span class="ez-toc-section" id="i-58"> Добавление автора и описания </span></h4> <p> Многие элементы <code> <meta> </code> включают <code> name </code> и <code> content </code> attributes: </p> <ul> <li> <code> имя </code> указывает тип метаэлемента; какую информацию он содержит.</li> <li> <code> содержимое </code> указывает фактическое мета-содержимое. </li> </ul> <p> Два таких метаэлемента, которые полезно включить на вашу страницу, определяют автора страницы и предоставляют краткое описание страницы. Давайте посмотрим на пример: </p> <pre> <code> <meta name = "author" content = "Chris Mills"> <meta name = "description" content = "Область обучения веб-документации MDN предоставляет полные новички в Интернете со всем, что им нужно знать, чтобы получить начал с разработки веб-сайтов и приложений."> </code> </pre> <p> Указание автора полезно во многих отношениях: полезно понимать, кто написал страницу, если у вас есть какие-либо вопросы по содержанию, и вы хотели бы с ними связаться. Некоторые системы управления контентом имеют средства для автоматического извлечения информации об авторе страницы и предоставления ее для этих целей. </p> <p> Указание описания, включающего ключевые слова, относящиеся к содержанию вашей страницы, полезно, поскольку оно может повысить позицию вашей страницы при релевантном поиске, выполняемом в поисковых системах (такие действия называются поисковой оптимизацией или SEO.) </p> <h4><span class="ez-toc-section" id="i-59"> Активное обучение: использование описания в поисковых системах </span></h4> <p> Описание также используется на страницах результатов поисковых систем. Давайте рассмотрим упражнение, чтобы изучить этот </p> <ol> <li> Перейдите на главную страницу сети разработчиков Mozilla. </li> <li> Просмотр исходного кода страницы (вправо / <kbd> Ctrl </kbd> + щелкните страницу, выберите <em> Просмотреть исходный код страницы </em> в контекстном меню.) </li> <li> Найдите метатег описания. Это будет выглядеть примерно так (хотя со временем может измениться): <pre> <code> <meta name = "description" content = "Сайт веб-документов MDN предоставляет информацию об открытых веб-технологиях включая HTML, CSS и API для веб-сайтов и прогрессивные веб-приложения."> </code> </pre> </li> <li> Теперь поищите «MDN Web Docs» в своей любимой поисковой системе (мы использовали Google). Вы заметите содержание элемента description <code> <meta> </code> и <code> <title> </code>, используемое в результатах поиска — определенно стоит иметь! <p> </p> </li> </ol> <p> <strong> Примечание </strong>: В Google вы увидите некоторые релевантные подстраницы веб-документов MDN, перечисленные под основной ссылкой на главную страницу — они называются дополнительными ссылками, и их можно настроить в инструментах Google для веб-мастеров — способ улучшить результаты поиска вашего сайта в Google. поисковый движок.</p> <p> <strong> Примечание </strong>: Многие функции <code> <meta> </code> просто больше не используются. Например, ключевое слово <code> <meta> </code> element (<code> <meta name = "keywords" content = "fill, in, your, keywords, here"> </code>), которое должно предоставлять ключевые слова для поисковых систем для определения релевантности эта страница для различных поисковых запросов — игнорируется поисковыми системами, потому что спамеры просто заполняли список ключевых слов сотнями ключевых слов, искажая результаты.</p> <h4><span class="ez-toc-section" id="i-60"> Другие типы метаданных </span></h4> <p> Путешествуя по сети, вы найдете и другие типы метаданных. Многие функции, которые вы увидите на веб-сайтах, являются проприетарными разработками, разработанными для предоставления определенным сайтам (например, сайтам социальных сетей) определенной информации, которую они могут использовать. </p> <p> Например, Open Graph Data — это протокол метаданных, который Facebook изобрел для предоставления более подробных метаданных для веб-сайтов. В исходном коде MDN Web Docs вы найдете это: </p> <pre> <code> <meta property = "og: image" content = "https: // разработчик.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png "> <meta property = "og: description" content = "Сеть разработчиков Mozilla (MDN) предоставляет информация об открытых веб-технологиях, включая HTML, CSS и API для обоих веб-сайтов и приложения HTML5. Он также документирует продукты Mozilla, такие как Firefox OS. "> <meta property = "og: title" content = "Сеть разработчиков Mozilla"> </code> </pre> <p> Одним из следствий этого является то, что когда вы ссылаетесь на MDN Web Docs на facebook, ссылка появляется вместе с изображением и описанием: более широкий опыт для пользователей.</p> <p> </p> <p> Twitter также имеет свои собственные аналогичные проприетарные метаданные, называемые Twitter Cards, которые имеют аналогичный эффект, когда URL-адрес сайта отображается на twitter.com. Например: </p> <pre> <code> <meta name = "twitter: title" content = "Mozilla Developer Network"> </code> </pre> <p> Чтобы еще больше обогатить дизайн вашего сайта, вы можете добавить ссылки на пользовательские значки в свои метаданные, и они будут отображаться в определенных контекстах. Наиболее часто используемый из них — это значок <strong> favicon </strong> (сокращение от «значок избранного», относящийся к его использованию в списках «избранного» или «закладок» в браузерах).</p> <p> Этот скромный значок существует уже много лет. Это первая иконка такого типа: квадратная иконка размером 16 пикселей, используемая в нескольких местах. Вы можете видеть (в зависимости от браузера) значки, отображаемые на вкладке браузера, содержащей каждую открытую страницу, и рядом со страницами, отмеченными закладками на панели закладок. </p> <p> Значок может быть добавлен на вашу страницу с помощью: </p> <ol> <li> Сохранение его в том же каталоге, что и индексная страница сайта, в формате <code> .ico </code> (большинство браузеров будут поддерживать значки в более распространенных форматах, таких как <code>.gif </code> или <code> .png </code>, но использование формата ICO гарантирует, что он будет работать еще в Internet Explorer 6.) </li> <li> Добавление следующей строки в блок HTML <code> <head> </code> для ссылки на него: <pre> <code> <link rel = "shortcut icon" href = "favicon.ico" type = "image / x-icon"> </code> </pre> </li> </ol> <p> Вот пример значка на панели закладок: </p> <p> </p> <p> В наши дни есть много других типов значков.Например, вы найдете это в исходном коде домашней страницы MDN Web Docs: </p> <pre> <code> <link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> <link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> <link rel = "apple-touch-icon-precomposed" href = "https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <link rel = "apple-touch-icon-precomposed" href = "https: // разработчик.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png "> <link rel = "shortcut icon" href = "https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"> </code> </pre> <p> Комментарии объясняют, для чего используется каждый значок — эти элементы охватывают такие вещи, как предоставление красивого значка с высоким разрешением для использования при сохранении веб-сайта на главном экране iPad. </p> <p> Не беспокойтесь о реализации всех этих типов значков прямо сейчас — это довольно продвинутая функция, и от вас не ожидается, что вы будете знать об этом, чтобы продвигаться по курсу.Основная цель здесь — сообщить вам, что это такое, на случай, если вы столкнетесь с ними при просмотре исходного кода других веб-сайтов. </p> <p> <strong> Примечание: </strong> Если ваш сайт использует политику безопасности контента (CSP) для повышения своей безопасности, политика применяется к значку. Если вы столкнулись с проблемами, когда значок не загружается, убедитесь, что директива <code> img-src </code> заголовка <code> Content-Security-Policy </code> не препятствует доступу к нему. </p> <p> Практически все веб-сайты, которые вы будете использовать в наши дни, будут использовать CSS, чтобы они выглядели круто, и JavaScript для поддержки интерактивных функций, таких как видеоплееры, карты, игры и многое другое.Чаще всего они применяются к веб-странице с использованием элемента <code> <link> </code> и элемента <code> <script> </code> соответственно. </p> <ul> <li> <p> Элемент <code> <link> </code> всегда должен находиться в заголовке вашего документа. Это принимает два атрибута: <code> rel = "stylesheet" </code>, который указывает, что это таблица стилей документа, и <code> href </code>, который содержит путь к файлу таблицы стилей: </p> <pre> <code> <link rel = "stylesheet" href = "my-css-file.css "> </code> </pre> </li> <li> <p> Элемент <code> <script> </code> также должен идти в заголовок и должен включать атрибут <code> src </code>, содержащий путь к JavaScript, который вы хотите загрузить, и <code> defer </code>, который в основном инструктирует браузер загружать JavaScript в в то же время, что и HTML страницы. Это полезно, так как гарантирует, что весь HTML-код загружен до запуска JavaScript, так что вы не получите ошибок в результате попытки JavaScript получить доступ к элементу HTML, которого еще нет на странице.На самом деле существует несколько способов обработать загрузку JavaScript на вашей странице, но это наиболее надежный способ использовать для современных браузеров (для других см. Стратегии загрузки сценариев). </p> <pre> <code> <script src = "my-js-file.js" defer> </script> </code> </pre> <p> <strong> Примечание </strong>: Элемент <code> <script> </code> может выглядеть как пустой элемент, но это не так, поэтому ему нужен закрывающий тег. Вместо того, чтобы указывать на внешний файл сценария, вы также можете поместить свой сценарий внутри элемента <code> <script> </code>.</p> </li> </ul> <h4><span class="ez-toc-section" id="_CSS_JavaScript"> Активное обучение: применение CSS и JavaScript к странице </span></h4> <ol> <li> Чтобы начать это активное обучение, возьмите копию наших файлов meta-example.html, script.js и style.css и сохраните их на локальном компьютере в папке тот же каталог. Убедитесь, что они сохранены с правильными именами и расширениями файлов. </li> <li> Откройте файл HTML как в браузере, так и в текстовом редакторе. </li> <li> Следуя приведенной выше информации, добавьте элементы <code> <link> </code> и <code> <script> </code> в ваш HTML, чтобы ваши CSS и JavaScript были применены к вашему HTML.</li> </ol> <p> Если все сделано правильно, при сохранении HTML и обновлении браузера вы увидите, что все изменилось: </p> <p> </p> <ul> <li> JavaScript добавил на страницу пустой список. Теперь, когда вы щелкнете в любом месте списка, появится диалоговое окно с просьбой ввести текст для нового элемента списка. Когда вы нажимаете кнопку OK, новый элемент списка будет добавлен к списку, содержащему текст. Когда вы щелкаете по существующему элементу списка, появляется диалоговое окно, позволяющее изменить текст элемента.</li> <li> Из-за CSS фон стал зеленым, а текст стал больше. Он также стилизовал часть содержимого, которое JavaScript добавил на страницу (красная полоса с черной рамкой - это стиль, который CSS добавил в список, сгенерированный JS). </li> </ul> <p> <strong> Примечание </strong>: Если вы застряли в этом упражнении и не можете применить CSS / JS, попробуйте просмотреть нашу страницу с примерами css-and-js.html. </p> <p> Наконец, стоит упомянуть, что вы можете (и действительно должны) установить язык своей страницы.Это можно сделать, добавив атрибут lang к открывающему тегу HTML (как показано в meta-example.html и показано ниже). </p> <pre> <code> <html lang = "en-US"> </code> </pre> <p> Это полезно во многих отношениях. Ваш HTML-документ будет более эффективно проиндексирован поисковыми системами, если установлен его язык (например, что позволяет ему правильно отображаться в результатах для конкретного языка), и он полезен для людей с нарушениями зрения, использующих программы чтения с экрана (например, слово «шесть» существует и во французском, и в английском, но произносится по-разному.) </p> <p> Вы также можете настроить распознавание подразделов документа на разных языках. Например, мы могли бы настроить раздел японского языка так, чтобы он распознавался как японский, например: </p> <pre> <code> <p> Пример на японском языке: <span lang = "ja"> ご 飯 が 熱 い。 </span>. </p> </code> </pre> <p> Эти коды определены стандартом ISO 639-1. Вы можете найти больше о них в языковых тегах в HTML и XML.<div class='yarpp-related yarpp-related-none'> <p>No related posts.</p> </div> </div><!--/.entry--> </div><!--/.post-content--> <div class="post-sharrre group"> <div id="twitter" data-url="https://ylianova.ru/raznoe-2/teg-meta-description-nothing-found-for-ru-kak-pravilno-napisat-meta-tegi-title-description-keywords-menu_item3.html" data-text="Тег meta description: Nothing found for Ru Kak Pravilno Napisat Meta Tegi Title Description Keywords %23Menu_Item3" data-title="Tweet"></div> <div id="facebook" data-url="https://ylianova.ru/raznoe-2/teg-meta-description-nothing-found-for-ru-kak-pravilno-napisat-meta-tegi-title-description-keywords-menu_item3.html" data-text="Тег meta description: Nothing found for Ru Kak Pravilno Napisat Meta Tegi Title Description Keywords %23Menu_Item3" data-title="Like"></div> <div id="googleplus" data-url="https://ylianova.ru/raznoe-2/teg-meta-description-nothing-found-for-ru-kak-pravilno-napisat-meta-tegi-title-description-keywords-menu_item3.html" data-text="Тег meta description: Nothing found for Ru Kak Pravilno Napisat Meta Tegi Title Description Keywords %23Menu_Item3" data-title="+1"></div> <div id="pinterest" data-url="https://ylianova.ru/raznoe-2/teg-meta-description-nothing-found-for-ru-kak-pravilno-napisat-meta-tegi-title-description-keywords-menu_item3.html" data-text="Тег meta description: Nothing found for Ru Kak Pravilno Napisat Meta Tegi Title Description Keywords %23Menu_Item3" data-title="Pin It"></div> </div><!--/.post-sharrre--> <script type="text/javascript"> // Sharrre jQuery(document).ready(function(){ jQuery('#twitter').sharrre({ share: { twitter: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-twitter"></i></div></a>', enableHover: false, enableTracking: true, buttons: { twitter: {via: ''}}, click: function(api, options){ api.simulateClick(); api.openPopup('twitter'); } }); jQuery('#facebook').sharrre({ share: { facebook: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-facebook-square"></i></div></a>', enableHover: false, enableTracking: true, click: function(api, options){ api.simulateClick(); api.openPopup('facebook'); } }); jQuery('#googleplus').sharrre({ share: { googlePlus: true }, template: '<a class="box group" href="#"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-google-plus-square"></i></div></a>', enableHover: false, enableTracking: true, urlCurl: 'https://ylianova.ru/wp-content/themes/anew/js/sharrre.php', click: function(api, options){ api.simulateClick(); api.openPopup('googlePlus'); } }); jQuery('#pinterest').sharrre({ share: { pinterest: true }, template: '<a class="box group" href="#" rel="nofollow"><div class="count" href="#">{total}</div><div class="share"><i class="fa fa-pinterest"></i></div></a>', enableHover: false, enableTracking: true, buttons: { pinterest: { description: 'Тег meta description: Nothing found for Ru Kak Pravilno Napisat Meta Tegi Title Description Keywords %23Menu_Item3' } }, click: function(api, options){ api.simulateClick(); api.openPopup('pinterest'); } }); }); </script> </div><!--/.post-inner--> </article><!--/.post--> <ul class="post-nav group"> <li class="next"><a href="https://ylianova.ru/raznoe-2/skript-menyu-dlya-mobilnoj-versii-glavnoe-menyu-dlya-mobilnoj-versii-sajta.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Скрипт меню для мобильной версии: Главное меню для мобильной версии сайта</span></a></li> <li class="previous"><a href="https://ylianova.ru/raznoe-2/kak-vklyuchit-bukvy-na-klaviature-kompyutera-klaviatura-kompyutera-noutbuka-foto-i-opisanie-klavish.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Как включить буквы на клавиатуре компьютера: Клавиатура компьютера (ноутбука): фото и описание клавиш</span></a></li> </ul> <section id="comments" class="themeform"> <!-- comments open, no comments --> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/teg-meta-description-nothing-found-for-ru-kak-pravilno-napisat-meta-tegi-title-description-keywords-menu_item3.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='8124' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </section><!--/#comments--> </div><!--/.pad--> </section><!--/.content--> <div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a> <div class="sidebar-content"> <div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"> <div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /> </div> </form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li> <li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li> <li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li> <li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li> <li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li> <li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li> <li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li> <li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li> <li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li> <li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li> <li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li> <li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li> <li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li> </ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3> <ul> <li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a> </li> <li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a> </li> <li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a> </li> <li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a> </li> <li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a> </li> <li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a> </li> <li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a> </li> <li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a> </li> <li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a> </li> <li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a> </li> <li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a> </li> <li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a> </li> <li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a> </li> <li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a> </li> <li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a> </li> </ul> </div><div id="custom_html-21" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script></div></div> </div><!--/.sidebar-content--> </div><!--/.sidebar--> </div><!--/.main--> </div><!--/.container-inner--> <footer id="footer"> <section id="footer-bottom"> <div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a> <div class="pad group"> <div class="grid one-half"> <div id="copyright"> <p>Блог сумасшедшего сисадмина © 2021. Все права защищены.</p> </div><!--/#copyright--> <div id="credit"> <p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a> </p> </div><!--/#credit--> </div> <div class="grid one-half last"> </div> </div><!--/.pad--> </div><!--/.container--> </section><!--/#footer-bottom--> </footer><!--/#footer--> </div><!--/#wrapper--> <style type="text/css"> .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://ylianova.ru/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.7' type='text/css' media='all' /> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://ylianova.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.7' type='text/css' media='all' /> <script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.jplayer.min.js?ver=5.7' id='jplayer-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/scripts.js?ver=5.7' id='scripts-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/themes/anew/js/jquery.sharrre.min.js?ver=5.7' id='sharrre-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-includes/js/comment-reply.min.js?ver=5.7' id='comment-reply-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-includes/js/wp-embed.min.js?ver=5.7' id='wp-embed-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://ylianova.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> <!--[if lt IE 9]> <script src="https://ylianova.ru/wp-content/themes/anew/js/ie/respond.js"></script> <![endif]--> </body> </html>