• Мета-теги страницы. Что такое метатеги? Как правильно заполнять метатег Title, Description, Keywords Мега тэг

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

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

    Теги и атрибуты как составные части языка HTML

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

    Теги задают каркас страницы, атрибуты расширяют или модифицируют действия тегов. Они описываются внутри открывающего тега в виде коллекции «имя="значение"». Например: .

    Существует два типа тегов: парные и одиночные. Парные (или контейнерные) теги состоят из пары — открывающий и закрывающий тег <...>.... Одиночные теги состоят лишь из одного открывающего тега. Например, тег .

    Стандартно структура HTML-документа содержит такие элементы:

    Название документа

    Заголовок страницы

    Отображаемый на странице контент

    • указывает на тип текущего документа. В нашем случае HTML;
    • тег отмечает границы документа, в нем содержатся обязательные теги и ;
    • тег — контейнер, в него помещается информация для браузеров и поисковых систем. Содержимое тега не отображается напрямую на веб-странице, за исключением тега , с помощью которого устанавливают заголовок вкладки браузера;</li> <li>тег <body> определяет видимую часть документа, которая отображается в окне браузера. К такой информации относится текст, изображения, результат работы скриптов и другое.</li> </ul><p>Сперва рассмотрим набор тегов, помещающихся в блоке <head>. Они наиболее значимы для специалиста по поисковой оптимизации.</p> <h2>Что такое тег <title></h2> <h4>Пример кода:</h4> <meta name="description" content="Метатег description - это информативное и продуманное описание страницы. Мы расскажем, как сделать его привлекательным для пользователя и привлечь посетителей на ваш сайт." /> <p><img src='https://i0.wp.com/images.netpeak.net/blog/tak-vygladit-description.png' align="center" width="100%" loading=lazy></p> <h3>Meta robots</h3> <p>Метатег robots служит для указания правил индексирования конкретных страниц сайта и позволяет следовать по гиперссылкам с данных страниц.</p> <h4>Пример кода:</h4> <meta name="robots" content="index, follow"> <p>Значение атрибута «name» указывает, что директива актуальна для всех роботов. Вы также можете закрыть доступ только одному из них. Для этого в атрибуте «name» следует указать нужного робота, например, основного робота Google — «googlebot» или Яндекса — «yandex».</p> <h4>Основные значения атрибута content:</h4> <ul><li>index — страница доступна для индексации;</li> <li>noindex — запрет добавления страницы в индекс;</li> <li>follow — ссылки на странице доступны к индексации и открыты для передачи ссылочного веса;</li> <li>nofollow — сигнализирует роботу о том, что переходить по ссылкам и передавать ссылочный вес запрещено;</li> <li>all — инструкция, аналогичная «index, follow», противоположная настройка: «none».</li> </ul><p>Наличие метатега robots в коде сайта не обязательно. Если meta robots отсутствует, страница открыта для индексации и переходить по ссылкам разрешено.</p> <h3>Meta charset</h3> <p>Метатег с атрибутом «charset» указывает на тип кодировки документа. Он применяется для правильного отображения текста страницы браузером. Для операционной системы Windows и кириллицы используют значения атрибута «utf-8» или «windows-1251». Этот метатег следует размещать в самом начале блока <head> до элементов, которые содержат текст, включая тег <title>.</p> <p><b>Пример кода: </b></p><p> <meta charset="UTF-8"> </p><p>Многие браузеры научились распознавать кодировку документа автоматически, но все же рекомендуется прописать короткую строку, чтобы избежать возможных проблем с выводом информации на странице.</p> <h3>Meta viewport</h3> <p>Метатег «viewport» сообщает браузеру, как следует обрабатывать размеры страницы, изменять ее масштаб под ширину экрана устройства, с которого выполнен переход. Meta viewport — один из пунктов внедрения адаптивного дизайна, когда для всех устройств используется один код с корректировкой по размеру экрана. Для корректного отображения контента сайта на любом устройстве, на всех страницах следует разместить следующий фрагмент кода:</p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </p><p>Если этот элемент отсутствует, мобильные браузеры по умолчанию используют версию страниц для компьютера и пытаются оптимизировать контент собственными силами, подгоняя содержимое под размер экрана. Из-за этого контент страницы может выглядеть непропорционально, и посетителям сайта придется выполнять лишние действия, чтобы прочитать описание товара, посмотреть картинку, видео. Поисковые системы считают такой сайт не адаптированным для мобильных устройств и будут понижать его в результатах поиска.</p> <h3>Meta keywords</h3> <p>Правильно составленный метатег keywords должен содержать 5-7 ключевых слов, описывающих основное содержание страницы. Раньше он сильно влиял на ранжирование по заданным в нем ключевым словам, но утратил значимость из-за действий недобросовестных вебмастеров и постоянного развития поисковых систем. Тем не менее, для метатега keywords еще не все потеряно. Так, в отчете «Яндекс и Google: факторы ранжирования в 2017 году » от «Ашманов и партнеры» представлен вывод о влиянии метатега на продвижение в Google.</p> <h4>Пример кода:</h4> <meta name="keywords" content="HTML, тег, атрибут, поисковая оптимизация, SEO"> <h2>Когда использовать теги link</h2> <p>В блоке <head> также располагаются теги <link>, которые устанавливают связь данного документа с другими веб-страницами. Рассмотрим такие атрибуты тега «link»: «canonical», «next / prev», «alternate».</p> <h3>Атрибут canonical</h3> <h3>Атрибут alternate</h3> <h2>Выводы</h2> <ol><li>Теги и атрибуты — это основа языка HTML. Оптимизация сайта немыслима без базового знания языка гипертекстовой разметки.</li> <li>Основной фронт работ SEO-специалиста связан с оптимизацией тегов из блока <head> HTML-документа, ведь именно там располагается информация для браузеров и поисковых систем. В контейнере <head> помещаются тег <title>, метатеги, теги <link>. В них содержится информация о документе, помогающая поисковым системам понять о чем страница и как следует ее интерпретировать.</li> <li>Не менее важна оптимизация тегов и атрибутов, расположенных в <body>, поскольку информацию именно из этого блока видят на странице пользователи. Контент должен быть структурирован, а код валидным, что служит залогом правильного отображения сайта в любом браузере.</li> <li>Нельзя сказать, что тот или иной элемент HTML-кода важнее других. Каждый тег и атрибут выполняет свою функцию и неправильное применение любого их них может привести к печальным последствиям. Главное — понять, как и зачем их нужно использовать. И делать контент в первую очередь для людей, а не для поисковых роботов.</li> </ol> <p>Мета тег <meta> HTML определяет информацию о веб странице. Теги группы meta называют мета тегами, а содержимое мета тега - метаданными. Метаданные указывают различную техническую информацию о документе, в основном для браузеров и поисковых систем и не видны пользователю на сайте.</p> <p>Часто используются meta-теги: <i>author </i>, <i>description </i>, <i>keywords </i>, <i>viewport </i>, <i>charset </i>.</p> <p>Мета теги находятся в области <head> HTML документа (). Вставить или, как говорят, прописать мета теги можно в любом порядке и количестве.</p> <p>Использовать meta теги не обязательно, но мы рекомендуем заполнять хотя бы мета теги description , viewport , charset . Это будет плюсом для внутренней оптимизации сайта.</p> <h2>Синтаксис</h2> <meta атрибут="значение" атрибут="значение"> <h2>Примеры использования <meta> в HTML коде</h2> <html><br> <head><br> <meta charset="UTF-8"><br> <meta name="description" content="Мета теги в HTML документе. Описание популярных мета тегов, примеры использования на веб странице"><br> <meta name="author" content="Ivan Ivanov"><br> </head><br></html> <h2>Основные мета теги</h2> <p>Ниже приведены несколько основных тегов <meta> с комментариями по применению и примерами использования.</p> <h3>Meta-тег description</h3> <p>Краткое описание документа (страницы сайта). Поисковые системы могут использовать содержимое мета тега description для вывода в сниппете поисковой выдачи.</p> <h4>Пример использования мета тега description</h4> <meta name="description" content="Краткое описание страницы"> <h3>Meta-тег keywords</h3> <p>Ключевые слова страницы. Ранее использовался для указания поисковым системам основные смысловые фразы веб-страницы. На данный момент существуют разные мнения как правильно и стоит ли заполнять мета тег keywords .</p> <h4>Пример заполнения мета тега keywords</h4> <meta name="keywords" content="ключевое слово 1, ключевое слово 2, ключевое слово 3"> <h3>Meta-тег viewport</h3> <p>Задает некоторые параметры окна просмотра в браузере. Атрибут <i>width </i> указывает ширину окна просмотра (вьюпорта), <i>initial-scale </i> - коэффициент масштабирования при первом открытии страницы.</p> <h4>Пример использования мета тега viewport</h4> <p>Мета тег для адаптивного сайта: указывает, что ширина вьюпорта подгоняется под размеры устройства:</p><p> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </p><h3>Meta-тег charset</h3> <p>Кодировка веб страницы. Наиболее частое значение: "UTF-8".</p> <h4>Пример использования мета тега кодировки charset</h4> <meta charset="UTF-8"> <h3>Meta тег refresh</h3> <p>Мета тег с атрибутом указывает время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом указанным в <i>content </i> атрибуте. Значение указывается в секундах.</p> <h4>Пример использования meta http refresh</h4> <meta content="45"> <!-- Обновление страницы каждые 45 секунд --> <h2>Поддержка браузерами</h2> <table class="browser_support"><tbody><tr><td>Тег </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr><tr><td><meta> </td> <td>Да </td> <td>Да </td> <td>Да </td> <td>Да </td> <td>Да </td> </tr></tbody></table><h2>Атрибуты</h2> <table><tbody><tr><th>Атрибут </th> <th>Значения </th> <th>Описание </th> </tr><tr><td>charset </td> <td> <p><i>character_set </i></p> </td> <td> <p>Указывает кодировку HTML документа.</p> </td> </tr><tr><td>content </td> <td> <p>тестовое значение</p> </td> <td> <p>Основное содержимое мета тега. Зависит от других атрибутов. Используется вместе с <i>http-equiv </i> или <i>name </i>.</p> </td> </tr><tr><td>http-equiv </td> <td> <p>content-type<br> default-style<br> refresh</p> </td> <td> <p>Устанавливает HTTP заголовок для атрибута <i>content </i>.</p> <p><i>Сontent-type </i> - Кодировка. Устаревшее значение, в HTML5 используйте <i>charset </i> (см. пример выше).<br><i>Default-style </i> - Предпочтительная таблица стилей.<br><i>Refresh </i> - Интервал автообновления страницы.</p> </td> </tr><tr><td>name </td> <td> <p>application-name<br> author<br> description<br> generator<br> keywords<br> viewport</p> </td> <td> <p>Имя мета тега. Как и <i>http-equiv </i> определяет суть мета тега.</p> <p><i>Application-name </i> - имя веб приложения, которое представляет страница.<br><i>Author </i> - имя автора веб страницы.<br><i>Description </i> - краткое описание страницы.<br><i>Generator </i> - Указывает на программное обеспечение, использованное для создания страницы (для не рукописных страниц).<br><i>Keywords </i> - ключевые слова страницы.<br><i>Viewport </i> - некоторые параметры области просмотра страницы.</p> </td> </tr></tbody></table> <p><b><i>Изучив статью, вы поймете: </i> </b></p> <i> </i><p>В этом материале я собрала информацию из более 10 авторитетных ресурсов, изучила мнение продвинутых блогеров + добавила личное видение вопроса, основанное на 5-летнем опыте копирайтера и активного пользователя интернета.</p> <h2>Что такое мета-теги?</h2> <p><b><i>Прежде чем перейти к правилам заполнения мета-тегов title, description и keywords, давайте определимся с этими понятиями: </i> </b></p> <p><b>Title (тайтл) </b> – заголовок веб-страницы, который отражается в поисковой выдаче (рис. 1) и во вкладке браузера (рис. 2).</p> <p><i>Рисунок №1 </i></p> <p><i>Рисунок №2 </i></p> <p><b>Description (дескрипшн) </b> – это мета-тег, который кратко описывает содержание данной веб-страницы.</p> <p><b>Keywords (кейвордс) </b> – это ключевые слова или словосочетания, которые используются на данной веб-странице и являются для нее главными (т.е. раскрывают тему и содержание).</p> <p>Разобравшись с определениями мета-тег title, description и keywords, логично выяснить вопрос, стоит ли вообще их заполнять? Зачем они нужны и какую роль играют в «жизни» сайта?</p> <h2><br><img src='https://i0.wp.com/textum.com.ua/wp-content/uploads/meta-teg-4-min-e1513001475688.png' align="center" width="100%" loading=lazy></h2> <h2>Нужны ли мета-теги?</h2> <p>Важно сразу сказать, что мета-теги не являются обязательными составляющими HTML-страницы, но их составление напрямую связано с оптимизацией сайта. Поэтому, если вы хотите, чтобы раскрутка веб-проекта прошла успешно, игнорировать создание тайтла, дескрипшна и кейвордс нельзя.</p> <p><i><b>Правильные мета-теги помогают добиться таких результатов: </b> </i></p> <ul><li><b>Высокое ранжирование </b>. Мета-теги (заголовок, описание, ключевые слова) помогают поисковикам понять, какая информация содержится на ресурсе. Зная главную тему страницы, поисковые системы будут предлагать ее пользователям в числе ПЕРВЫХ. То есть шансы, что ваш сайт заметят среди «океана» аналогичных, существенно увеличиваются.</li> <li><b>Грамотно оформленный сниппет </b>. Чтобы предоставить пользователям больше информации о сайте, поисковики добавляют после названия ресурса небольшое описание, которое и называется сниппетом. Он берется непосредственно из мета-тега description или наугад выбирается отрезок из текста с ключевым словом. Вырванный из контекста текст, как правило, несет минимум полезной информации и не привлекает внимание, так как выглядит неинтересно и оборвано. Сравните сами. Ниже представлены примеры 2-х ресурсов: где для сайта мета-тег дескрипшн не прописывался (рис. 1); второй – с грамотно заполненным description (рис. 2).</li> </ul><p><i>Рисунок №1 </i></p> <p><img src='https://i1.wp.com/textum.com.ua/wp-content/uploads/meta-teg-5-min-e1513001582119.png' align="center" width="100%" loading=lazy></p> <p><i>Рисунок №2 </i></p> <p><img src='https://i0.wp.com/textum.com.ua/wp-content/uploads/meta-teg-6-min-e1513001634700.png' align="center" width="100%" loading=lazy></p> <ul><li><b>Повышение кликабельности и популярности </b>. С помощью мета-тег можно быстро и просто познакомить пользователей с главными «фишками» и предложениями ресурса, прописав их в тайтле и дескрипшне. Например, если для меня важно, чтобы товар привезли мне «до двери», то я обязательно зайду на сайт, в описании которого есть пометка «доставка курьером».</li> </ul><p>Правильные мета-теги title, description и keywords мгновенно захватывают внимание, убеждая пользователей интернета выбрать среди конкурентов именно этот сайт. Итак, давайте же разберемся, как грамотно прописать мета-теги для сайта.</p> <p><img src='https://i2.wp.com/textum.com.ua/wp-content/uploads/meta-teg-7-min-e1513001707353.png' width="100%" loading=lazy></p> <h2>Заполняем мета-тег TITLE</h2> <p><b>Тайтл </b> я смело называю самой значимой фигурой среди этой троицы, так как он является важным как для поисковиков, так и для людей. Его можно сравнить с вывеской в обычном магазине: чем ярче и привлекательней она, тем больше шансов, что мимо заведения не пройдут. Итак, переходим непосредственно к рассмотрению вопроса, как правильно прописать мета-тег title.</p> <p><i><b>Если вы хотите создать цепляющий и эффективный тайтл, обратите внимание на такие моменты </b>: </i></p> <h3>Ключевые слова:</h3> <ul><li><b>Используйте тематические ключи </b>, которые соответствуют теме страницы. Например, если здесь продаются китайские смартфоны, то логично, что мета-тег title будет с запросом «китайский смартфон». В противном случае (если используемые слова будут не совсем отвечать содержанию страницы) Google и Яндекс могут не использовать тайтл в качестве заголовка.</li> <li><b>Располагайте ключевые слова вначале </b> предложения, так как поисковики считают более значимыми запросы, стоящие в начале заголовка, чем в конце.</li> <li><b>Комбинируйте ключи </b>: высокочастотные + низкочастотные (узнать частотность можно через Яндекс Вордстат). Зачем это нужно? Популярный запрос – это большая конкуренция, «пробиться» через которую достаточно сложно и долго. А менее модные ключи практически сразу приведут к вам первых посетителей. Например, запрос «диван малютка» является высокочастотным (1886), а «купить диван малютку цена» — низкочастотным (28).</li> </ul><p>Объединяем в один мета-тег:</p> <p><i><b>Title </b>: Купить диван-малютку по цене производителя </i></p> <ul><li><b>На забывайте про переспам </b>. Здесь важно не переусердствовать, т.е. придерживаться «золотой середины». Ключи должны быть, но немного (1-3 не более).</li> </ul><p>Помните, title, как и другие мета-теги, прежде всего создаются для людей.</p> <p><img src='https://i1.wp.com/textum.com.ua/wp-content/uploads/meta-teg-8-min-e1513001951451.png' width="100%" loading=lazy></p> <h3>Стиль изложения:</h3> <ul><li><b>Пишите для страницы «цепляющие» заголовки </b>. Более интересным и интригующим выглядит мета-тег с использованием: цифр и процентов; прилагательных и наречий.</li> </ul><p>Например:<br><i><b>Title с цифрами </b>: 10 лучших способов утеплить квартиру </i><br><i><b>Title с процентами </b>: Скидка 50-70% на женские платья </i><br><i><b>Title с прилагательным, наречием </b>: Купить натуральный деревянный стол недорого </i></p> <ul><li><b>Не используйте сложные и «пустые» слова, стоп-символы </b>. Лучше не брать слова, состоящие из более, чем 3-х слогов, а также не распространенные. Такие мета-теги тяжело читать и, если не понятен смысл, не хочется на него кликать (например, «высококачественный», «променад», «транспортировка»). Запрет также относится к стоп-символам (/|()+=?) и «пустышкам», т.е. к словам, которые «крадут» объем, но при этом не несут никакой смысловой нагрузки (например, союзы, местоимения, междометия).</li> <li><b>Создавайте уникальные заголовки. </b> Важно для каждой страницы сайта прописывать свой title (это касается также и других мета-тег). Тогда поисковики будут расценивать каждую страницу как уникальную, что гарантированно поднимет ее значимость и, соответственно, рейтинг в поисковой выдаче. Необходимо также следить, чтобы тайтл и H1 были разными. И, конечно, при наполнении сайта не должно быть никакого рерайта – только уникальные тексты .</li> </ul><p><img src='https://i2.wp.com/textum.com.ua/wp-content/uploads/meta-teg-9-min-e1513002117150.png' width="100%" loading=lazy></p> <p><i>Делаем промежуточный вывод </i>: </span> заголовки должны быть написаны грамотно, красиво и понятно (никаких «корявых» предложений типа: «Купить кровать в Москве, цена дешево, оптом, с транспортировкой по стране»). Никакого обмана и недостоверной информации.</p> <h3>Объем</h3> <p>Оптимальной длиной мета-тега title считается примерно <b>40-65 </b> знаков с пробелами (максимум — 80). На мой взгляд, это идеальный вариант, так как при таком объеме пользователям виден весь заголовок (рис. 1), а не его фрагмент (рис. 2).</p> <p><i>Рисунок №1 </i></p> <p><i>Рисунок №2 </i></p> <p>Если вы все-таки решите не создавать мета-тег title, будьте готовы к тому, что эта страница может вообще не попасть в поисковую выдачу. А если сделаете «на скорую руку» (просто перечислив ключевики) – вероятнее всего, попадете на санкции от поисковиков.</p> <p><img src='https://i2.wp.com/textum.com.ua/wp-content/uploads/meta-teg-12-min-e1513002338871.png' width="100%" loading=lazy></p> <h2>Как правильно написать мета-тег DESCRIPTION?</h2> <p>По значимости описание занимает второе место после заголовка. Мета-тег <b>description </b> (также как и тайтл) способен как привлечь, так и оттолкнуть пользователей в случае, если заполнен некорректно.</p> <p><b><i>Правила, следование которым поможет создать эффективное и красивое описание: </i> </b></p> <ul><li><b>Объем </b>. Важное нововведение от Google – увеличение длины сниппета. Если раньше максимальный объем был равен 160 символам, то теперь эта цифра возросла <b>до 230 </b> (и даже больше – 300+). Зачем спросите вы? Все для удобства пользователей. Гугл решил, чем длиннее описание, тем понятнее для вас, что предлагает данный сайт. Используйте по максимуму это новшество и прописывайте побольше преимуществ веб-страницы.</li> </ul><p><img src='https://i1.wp.com/textum.com.ua/wp-content/uploads/meta-teg-13-min-e1513002422765.png' align="center" width="100%" loading=lazy></p> <ul><li><b>Информативность </b>. Правильный мета-тег description – это своего рода дополнительная реклама для сайта. Постарайтесь здесь прописать как можно больше «цепляющих фишек» сайта и предложений, от которых сложно отказаться. Например, «скидки до 80%», «распродажа», «доставка за 1 день», «опт, розница», «цена производителя», «на заказ», «гарантия 1 год» и т.д.</li> <li><b>Уникальность </b>. Также как и тайтл, для каждой страницы нужно писать свой мета-тег description, то есть каждый раз новый текст.</li> <li><b>Ключевые запросы </b>. Для дескрипшна советуют выбирать только высокочастотные запросы. Самый популярный ключ желательно использовать 2 раза: 1 раз в точном вхождении, 2 – разбавленный.</li> <li><b>Призыв. </b> Чтобы дескрипшн был эффективным и выглядел законченным, в конце описания делайте призыв к действию. Для этого можно использовать такие слова: звоните, заказывайте, получите, узнайте, переходите и т.д.</li> </ul><p><img src='https://i0.wp.com/textum.com.ua/wp-content/uploads/meta-teg-14-min.png' align="center" width="100%" loading=lazy></p> <p>После того, как вы правильно пропишете мета-теги description, можно разбавить содержание специальными символами: ✖ ➜ ➢ ➣ ➤ ➔ ⬅ ⬆ ⬇ ⬤ Ꙭ ➔ ✈ (см. пример). Но при использовании таких знаков необходимо проверить, как они будут отражаться на сайте (для этого можно использовать специальный сервисы по генерации сниппетов для Google и Яндекс)</p> <p>Запомните, если поискам не понравится ваше описание, они заполнят сниппет «выдерганными» из текста фразами.</p> <p><img src='https://i0.wp.com/textum.com.ua/wp-content/uploads/meta-teg-15-min-e1513002561303.png' width="100%" loading=lazy></p> <h2>Мета-тег KEYWORDS: нужно ли заполнять?</h2> <p>Чтобы понять, следует ли тратить время на прописывание <b>ключевых слов </b>, давайте совершим небольшой экскурс в историю. Раньше (в 90-х и начале 2000-х) заполнение мета-тега keywords являлось гарантом, что сайт молниеносно попадет в ТОП. То есть достаточно было перечислить необходимые для продвижения запросы и ресурс уже «восседает» на первых позициях в поисковых выдачах.</p> <p>Сейчас поисковики создают «умные» алгоритмы, постоянно совершенствуя их, с которыми такое заполнение данного мета-тега не пройдет. Более того, переизбыток ключевых слов может расцениваться машиной, как манипуляция, что неизменно приведет к санкциям. Так может вообще отказаться от создания списка ключевиков?</p> <p>Вовсе нет. Здесь, также как и при прописывании других мета-тег, важно достичь баланса. То есть можно использовать 1-2 запроса (через ЗАПЯТУЮ) и поисковые системы отреагируют на них адекватно.</p> <p><img src='https://i0.wp.com/textum.com.ua/wp-content/uploads/meta-teg-16-min-e1513002625917.png' width="100%" loading=lazy></p> <h2>Общие правила для всех мета-тег</h2> <p><b><i>Есть несколько нюансов, которые относятся к title, description и частично к keywords: </i> </b></p> <ul><li>использование больших прописных букв в мета-тегах («ИНТЕРНЕТ-МАГАЗИН ОБУВИ») может быть расценено поисковыми системами как СПАМ;</li> <li>при написании основных мета-тег (заголовка, описания, ключевых слов) ТОЧКА в конце не ставится;</li> <li>информация в мета-тегах тайтл и дескрипшн должна быть разной, таким образом пользователь получает по максимуму данных о сайте;</li> <li>ключевые запросы следует использовать в мета-тегах title и description разные, не дублировать;</li> <li>не нужно прописывать в meta tags названия компаний, если только они не являются знаменитыми и популярными.</li> </ul><p>ВАЖНЫЙ совет «на закуску», как правильно прописать мета-теги для сайта. Перед заполнением, введите интересующий вас запрос в поисковую строку Google, Яндекс или другой системы. Проанализируйте, как поставили мета-теги сайты, находящиеся в ТОПе, и сделайте по примеру оптимизацию своего заголовка и описания.</p> <p><b><i>Задание </i> </b> </span>. Чтобы проверить, как правильно заполненные мета-теги (title, description, keywords) влияют на популярность сайта, проанализируйте его позицию в поисковиках и количество просмотров сейчас и ПОСЛЕ усовершенствования/создания грамотных meta tags.</p> <p><i>Остались вопросы или есть предложения, как можно улучшить или дополнить данный материал? Пишите комментарии! С удовольствием поделюсь опытом и буду благодарна за советы! </i></p> <p>Метатеги (от англ. meta tags) - это элементы HTML-разметки страниц для поисковых роботов, чтобы они корректно “прочли” и обработали представленную информацию. Большая часть тегов размещаются в блоке <head> HTML-документа:</p><p> <!DOCTYPE HTML><br> <html><br> <head><br> <meta charset="utf-8"><br> <title>Заголовок страницы для поисковых систем


      …


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


      Текст документа


      …

      Для поискового продвижения важна оптимизация ресурса, но многие не знают, как правильно прописывать основные SEO-теги: title, description, keywords и заголовок h1

      Наиболее важные html-теги, связанные в ранжированием сайта в поисковых системах, это теги:

      • title;
      • description;
      • keywords;
      • заголовки h1, h2, h3.

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

      Для чего нужен мета-тег title?

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

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

      1. Тег title должен быть уникальным для каждой страницы

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

      Пример:

      • Входная металлическая дверь "Название" - двухстворчатая
      • Входная металлическая дверь "Название" - с терморазрывом
      • Гравировка внутри стекла на ракушке
      • Гравировка внутри стекла на шаре

      2. Тег title должен быть отличным от тегов description и h1

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

      Тег h1 – это видимый пользователю заголовок, расположенный вверху страницы раздела или товара. Тег h1 должен кратко и четко описывать товар: наименование, производитель, модель и т.д. К примеру, если в заголовке

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

      Пример:

      • Гравировка на флешке из дерева

      • Заказать гравировку на флешке из дерева в подарок
      • < meta name="Description" content=" Заказать гравировку на флешке из дерева подарок на день рождения. Большой выбор эксклюзивных подарков с доставкой. ">

      3. Тег title должен быть оптимизирован под соответствующие страницы и товары

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

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

      1. Купить входную металлическую дверь в Красноярске недорого;
      2. Купить эксклюзивный подарок на день рождения (город);
      3. Купить путевку с перелетом "все включено" в Турцию.

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

      Пример:

      • Купить входную дверь Витязь (модель) в Красноярске
      • Купить горящую путевку в Турцию от (цена)

      4. Тег title должен отражать реальное содержимое страницы

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

      5. Тег title должен иметь структуру законченного предложения

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

      1. Нельзя перечислить все ключевые слова по запросу через запятую : дверь, купить дверь, купить входную дверь недорого и т.д .
      2. Нужно грамотно составлять предложения : Купить входную дверь в (город) недорого .
      3. Нельзя допускать несогласованных предложений с перечислением ключевиков : купить недорого дверь входную.

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

      Обратите внимание : при формирования метатега title нельзя использовать «.» !

      6. Тег title должен быть составлен грамотно

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

      1. Не допускайте ошибок в написании слов;
      2. Не используйте жаргонизмы и "блотные" слова;
      3. Не злоупотребляйте спецсимволами, восклицательными знаками и заглавными буквами;
      4. Не используйте точки и кавычки, так как они разбивают содержимое тега на пассажи;
      5. Используйте кавычки и скобки, если этого требуют правила;
      6. Используйте написание брендов кириллицей и латинкой.

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

      7. Тег title должен содержать не более 70 символов

      В результатах поиска отображается не более 70 символов, нотя написать можно и 90.

      • 50–57 символов для Google ;
      • 65–70 символов для Яндекс .

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

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

      Пример:

      • Купить в Красноярске недорого входную дверь

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

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

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

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

      Достоверно известно:

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

        - содержание данного тега может использоваться в сниппетах (описаниях сайтов на странице результатов поиска);

        В некоторых «волшебных» случаях, даже при наличии этого тега в выдаче поисков в качестве описания страницы используется текст из неё. И это не всегда лид-абзац (первый на странице).
      • Эффективная учитываемая длина содержимого у разных поисковиков - разная, на то они и разные поисковики.
      • Содержимое тега влияет на оценку релевантности, но как именно, сегодня, пожалуй, не скажут даже сами разработчики, в силу того, что для расчета релевантности во всех поисковиках используется множество разных и сложных алгоритмов. Поэтому разработчики во множестве статей и блогов, чуть не хором, сообщают, что нет, не влияет никак.
      • Указывать этот тег все-равно надо, об этом имеются указания в системах помощи веб-мастерам всех крупных поисковых систем.

      Как правильно прописывать Description?

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

      Не нужно использовать такие Дескрипшены: «Купить входные двери у нас, потому что мы самые лучшие».

      Как правильно заполнить тег H1 для страниц товаров и магазина?

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

      TEXT

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

      -

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

      • Как правильно прописывать метатеги для Seo-оптимизации сайта?

      • Зачем прописывать теги: title, description, keywords и h1?

      • Как правильно прописать тег title для страниц сайта?

      1. H1 - заголовок страницы (один!)
        1. H2 - заголовок второго уровня
          1. H3 - заголовок третьего уровня
          2. H3 - заголовок третьего уровня
        2. H2 - заголовок второго уровня
        3. H2 - заголовок второго уровня

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

      -

      .

      Правила расстановки тега H1 на странице

      • Тег должен встречаться на странице Один раз.
      • Тег должен быть уникальным.
      • Должен быть информативным.
      • Отсутствие тега

        является ошибкой.

      • В теге

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

      • Рекомендуемая длина тега не более 70 символов (не более 7-8 слов).
      • Для товаров желательно указать в теге

        самые главные характеристики товара (длина, ширина, цвет, модель).

      Для чего нужен тег Keywords?

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

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

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

      Если вы решили заполнять keywords, учитывайте синтаксис:

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

      Как правильно прописывать keywords?

      • Тег должен содержать ключевые запросы страницы;
      • Использовать не больше 5-6 слов;
      • Можно использовать не более 3-х повторов;
      • Не стоит использовать союзы, предлоги, междометия;
      • Тег лучше формировать из существительных;
      • Не стоит использовать никакие знаки препинания, кроме запятой.

      К чему приводит не правильная оптимизация ресурса?

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

      1. Уменьшение или превышение оптимальной длины тегов;
      2. Отсутствие точных вхождений ключевиков;
      3. Повтор ключевых фраз в одном теге;
      4. Грамматические и синтаксические ошибки;
      5. Дубли на нескольких страницах сайта.

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

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

    Читать еще: