Html description

META-тег Description и описание страницы сайта

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

Сниппет и описание сайта meta description

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


Вот так description выглядит в Яндексе:

А вот так description выглядит в Google:

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

Синтаксис html meta description

Мета-тег description размещается в html сайта внутри тега <head>.

Пример:

<html>  <head>  <meta name="description" content="Описание страницы сайта." />  </head> </html>

Пример meta description:

<meta name="description" content="Агентство интернет-маркетинга и интернет-рекламы ConvertMonster: создание Landing Page, настройка контекстной рекламы, SEO-анализ, эффективный email-маркетинг." />

Что писать в meta description

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

Как правильно заполнять meta description:


  1. Точность мета-описания. Description должен соответствовать конкретной веб-странице, а не всему сайту. Он должен отражать текущее, актуальное состояние страницы.
  2. Уникальные описания. Старайтесь создавать различные описания для каждой конкретной страницы и не использовать шаблоны для description. Или, по крайней мере, заполнять description оригинальным описанием на важных, ключевых страницах сайта.
  3. Минимальная длина мета description. Мета-описание не должно быть слишком коротким, из нескольких слов.
  4. Максимальная длина meta description. Размер meta description не должен превышать 100-140 символов. На вопрос нет однозначного ответа. Существуют различные точки зрения о верхней границе длины мета тега description: средние 160 символов или от 120 до 250 знаков. Большинство людей плохо воспринимают текстовую информацию длиной более 120-140 символов (вспомним тот же Twitter).
  5. Форма meta name description. Мета-описание может быть написано как в форме одного (с точкой или без точки на конце) или нескольких предложений, так и в форме перечисления важных параметров, ценных для пользователя.
  6. Содержимое тега meta description. Мета-описание должно соответствовать языку страницы сайта, быть кратким, емким, но при этом содержательным. Необходимо коротко и ясно выразить суть содержимого страницы. Размещайте наиболее важную часть описания ближе к началу текста.
  7. Человекопонятный мета дескрипшен. Мета-описание должно быть простым, понятным без чрезмерного употребления ключевых слов/фраз, заглавных букв, рекламных слоганов, лишних символов (для «украшения») и восклицательных знаков.

Яндекс и meta description

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

Google и meta description

А вот как Гугл использует meta description:

Цитата:

В Google используется множество методов выбора текстовых описаний. Самым простым способом контроля содержания описаний является использование мета-тега "description" (англ. описание) для каждой страницы.

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

Что в итоге:

Содержимое meta description может быть использовано для формирования части описания сайта в сниппете в результатах поиска Яндекс, Google или другой поисковой системы. Description должен содержать краткое, емкое и актуальное описание страницы в виде предложений или перечисления важных параметров. Длина мета description не должна быть короче трех-четырех слов и не длиннее 140-160 символов. Не стоит превращать дескрипшн в перечисление ключевых слов.


Главная польза для SEO сайта от meta description — возможность задать привлекательное описание страницы сайта в результатах поиска. Правильный мета description может позитивно отразиться на поведенческих факторах сайта через повышение кликабельности сниппета сайта в поиске. Влияет ли meta description на релевантность сайта напрямую? Делитесь аргументами в комментариях.

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

convertmonster.ru

Метатеги для поисковых механизмов

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

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

Некоторые принципы, относящиеся к метатегам:


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

description

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

Пример 1. Использование Description

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <title>description</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="description" content="Сайт об HTML и создании сайтов">   </head>   <body>   <p>...</p>  </body> </html>    

keywords

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

Пример 2. Использование Keywords

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <title>keywords</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta name="Keywords" content="HTML, META, метатег, тег, поисковая система">   </head>  <body>   <p>...</p>  </body> </html>

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

Автозагрузка страниц

Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкция http-equiv="refresh" (пример 3).

Пример 3. Автозагрузка страницы

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <title>Автозагрузка</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru">   </head>  <body>   <p>...</p>  </body> </html>    

Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.

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

Кодировка

Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо установить параметр <meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">. Для операционной системы Windows и кириллицы charset обычно принимает значение utf-8 или windows-1251 (пример 4).

Пример 4. Выбор текущей кодировки

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>  <head>  <title>Кодировка</title>  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">  </head>  <body>   <p>Кириллица</p>  </body> </html>    

Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда указание кодировки может принести определенный вред. Например, веб-сервер автоматически использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251, переводит текст в кодировку Windows. Получается двойное изменение символов, прочитать такой текст не просто. К счастью, подобная проблема уже отходит в прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне сервера.

htmlbook.ru

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

Если ты не забыл, то должен знать, что метатеги должны находиться в заголовке html-страницы в тегах <HEAD> и </HEAD>. Они не выводятся на страницу, кроме заголовка (title). Мета-тегов заголовка существует большое количество, но я напишу лишь о самых главных:

  • title — текст в данном теге виден в заголовке окна браузера. Его еще называют заголовком html-страницы;
  • meta — метатег, в котором содержатся атрибуты с различными параметрами, которые помогуют серверам и поисковым системам.

Разберем первый очень важный тег <TITLE></TITLE>. Ни один сайт не может нормально существовать без него. Применять его нужно абсолютно на всех страницах твоего сайта. Кроме того, что его текст отображается в заголовке браузера, он еще и будет выводится в результатах поисковой выдаче. Пример HTML-кода:

  <html>   <head>   <title>Заголовок страницы (название страницы)</title>   </head>   <body>Содержимое твоего сайта.</body>  </html>

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

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

Метатег (<META>) служит для определения служебных данных об html-странице. Атрибуты метатега можно разделить на два вида: HTTP-EQUIV (HTTP-эквиваленты) и NAME. Хотя данных атрибутов большое количество, я напишу лишь основные, которые тебе надо для создания сайта. Начну с HTTP-EQUIV.


content-type — тип документа и его кодировка. Служит для правильного отображения символов в окне браузера. HTML-код:

  <head>   <meta http-equiv="content-type" content="text/html; charset=utf-8">  </head>

content-language — указание языка документа. Значение этого атрибута используется как поисковыми роботами, так и web-серверами. HTML-код:

  <meta http-equiv="content-language" content="ru">

refresh — время (в секундах), через которое будет обновление страницы или переход на другую html-страницу или сайт. HTML-код для обновления страницы через 20 секунд:

  <meta http-equiv="refresh" content="20">

Если ты хочешь, чтобы через 10 секунд посетитель перешел, например, на страницу https://1seo.by, пиши вот так:

  <meta http-equiv="refresh" content="10; https://1seo.by/">

Далее расскажу про группу метатегов NAME:

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

  <meta name="description" content="Описание документа до 100 символов">

keywords — ключевые слова документа. Думаю тут все понятно — ты пишешь тут все ключевые слова через запятую, которые связаны с данной страницей. HTML-код:

  <meta name="keywords" content="ключевые слова">

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

  <head>   <meta http-equiv="content-type" content="Тип документа и кодировка">   <meta name="keywords" content="Ключевые слова документа">   <meta name="description" content="Описание страницы">   <title>Заголовок страницы</title>  </head>

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

← Создание таблиц в HTML Безопасные цвета в HTML (Web-палитра) →

Дата публикации: 15 мая, 2012

1seo.by

Структура веб-страницы

  • Содержание:
  • 1. Структура HTML-документа
  • 1.1. Элемент <html>
  • 1.2. Элемент <head>
  • 1.2.1. Элемент <title>
  • 1.2.2. Элемент <meta>
  • 1.2.3. Элемент <style>
  • 1.2.4. Элемент <link>
  • 1.2.5. Элемент <script>
  • 1.3. Элемент <body>

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

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

<!DOCTYPE html> <!-- Объявление формата документа -->  <html>  <head> <!-- Техническая информация о документе -->  <meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->  <title>...</title> <!-- Задаем заголовок документа -->  <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->  <script src="script.js"></script> <!-- Подключаем сценарии -->  </head>  <body> <!-- Основная часть документа -->  </body>  </html>

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

DOM
Рис. 1. Простейшая структура веб-страницы

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

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p> являются между собой сестринскими.

1.1. Элемент <html>

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также ‎глобальные атрибуты.

Таблица 1. Атрибуты тега <html>
Атрибут Описание, принимаемое значение
manifest С помощью значения атрибута указывается путь к документу кэша манифеста, например:
<html manifest="about_company.appcache">

1.2. Элемент <head>

Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Для элемента доступны ‎глобальные атрибуты.

1.2.1. Элемент <title>

Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Для элемента доступны ‎глобальные атрибуты.

1.2.2. Элемент <meta>

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

<meta name="description" content="Описание содержимого страницы">  <meta name="keywords" content="Ключевые слова через запятую">

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

<meta name="description" lang="ru" content="Описание содержимого страницы">  <meta name="description" lang="en" content="Description">  <meta name="keywords" lang="ru" content="Ключевые слова через запятую">  <meta name="keywords" lang="en" content="Keywords">

С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Индексация и переход по ссылкам разрешены:

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

Индексация разрешена, переход по ссылкам запрещен:

<meta name="robots" content="index, nofollow">

Индексация и переход по ссылкам запрещены:

<meta name="robots" content="noindex, nofollow">

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

<meta http-equiv="refresh" content="30">

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты.

Таблица 2. Атрибуты тега <meta>
Атрибут Описание, принимаемое значение
charset Указывает кодировку символов для текущего HTML-документа: <meta charset="UTF-8">
content Содержит произвольный текст, который определяет значение, ассоциируемое с атрибутом http-equiv или name, в зависимости от их значения.
http-equiv Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте:
default-style указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы".
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
<meta http-equiv="refresh" content="30">
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:
<meta http-equiv="refresh" content="0; url=http://mail.ru/">
name Ассоциируется со значением, содержащемся в атрибуте content. Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv, charset или itemprop.
application-name указывает название веб-приложения, используемого на странице.
author указывает имя автора документа в свободном формате.
description определяет краткое описание к содержимому страницы, например:
<meta name="description" content="Описание содержимого страницы">
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:
<meta name="generator" content="WordPress 4.0"> .
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:
<meta name="keywords" content="Ключевые слова через запятую">.
Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator, googlebot, publisher, robots, slurp, viewport, хотя ни одно из них еще не было официально принято.

1.2.3. Элемент <style>

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

Для элемента доступны атрибуты media, scoped, type, а также ‎глобальные атрибуты.

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

<style type="text/css">  .paper {  width: 200px;  height: 300px;  background-color: #ef4444;  color: #666666;  }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

<div class="paper">  ...  </div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">
Таблица 3. Атрибуты тега <style>
Атрибут Описание, принимаемое значение
media Определяет, для какого типа устройства предназначены те или иные каскадные таблицы стилей. Внутри таблицы стилей CSS специфичные правила для определенных устройств прописываются с помощью media query.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
type Определяет MIME-тип подключаемого файла со стилями, в данном случае <style type="text/css">.

1.2.4. Элемент <link>

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

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

<!DOCTYPE html>  <html>  <head>  <style>  @import url(style.css);  </style>  <meta>  <title> </title>  </head>

с использованием элемента <link>. Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

<link rel="stylesheet" href="style.css" type="text/css">

Для элемента доступны атрибуты href, hreflang, media, rel, type, а также ‎глобальные атрибуты.

Таблица 4. Атрибуты тега <link>
Атрибут Описание, принимаемое значение
crossorigin Указывает, должен ли использоваться CORS (технология браузеров, которая позволяет предоставить веб-странице доступ к ресурсам другого домена) при извлечении изображения с сайта.
anonymous — в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, содержащий имя домена, с которого осуществлён запрос. Если сервер не ответит CORS-заголовком Access-Control-Allow-Origin: * (или имя домена вместо звёздочки), то загрузка изображения будет заблокирована.
use-credentials — если сервер не предоставляет учётные данные с помощью Access-Control-Allow-Credentials: true, то загрузка изображения будет заблокирована.
href Основной атрибут тега, в качестве значения выступает путь к файлу со стилями.
hreflang Определяет язык текста в документе, на который идет ссылка.
media Определяет тип устройства, к которым должен быть применен ресурс ссылки.
nonce Генерируемая случайным образом на сервере строковая переменная, которая устанавливает правила использования встроенных стилей с целью защиты контента. Значение атрибута — строка текста.
rel Атрибут определяет отношения между текущим документом и документом, на который идет ссылка.
alternate — ссылка на тот же документ, но в другом формате (например, страницы для печати, перевод, зеркало, лента в формате RSS или Atom),
<link rel="alternate stylesheet" type="text/css" title="small_font" href="small-font.css">.
<link rel="alternate" type="application/rss+xml" title="my_RSS" href="index.xml">
<link rel="alternate" type="application/atom+xml" title="News" href="/atom.xml?type=news">
archives — указывает на то, что документ по ссылке представляет исторический интерес. Ссылка может указывать на коллекцию записей, документов и других материалов.
author ссылка на страницу об авторе документа или на страницу с контактными данными автора.
bookmark ссылка на ближайшего предка статьи, являющегося связующим звеном, или на раздел статьи, наиболее тесно связанных с элементом, если нет предка.
external используется для указания того, что страница на которую ведет ссылка не являются частью данного сайта.
first указывает ссылку, ведущую на первый документ из последовательности документов.
help ссылка на документ со справкой.
icon определяет путь к иконке, которая будет использована для текущего документа.
last указывает ссылку, ведущую на последний документ в последовательности документов.
license ссылка на сведения об авторских правах для документа.
next указывает, что этот документ является частью серии, и что ссылка ведет на следующий документ в этой серии.
<link rel="next" href="/next.html" type="text/html" title="Следующая страница">
nofollow указывает на то, что ссылка не одобрена автором страницы или что ссылка носит коммерческий характер.
noreferrer указывает на то, что заголовок запроса клиента, содержащий url источника запроса, не должен передаваться при переходе по ссылке.
pingback указывает адрес пингбэк-сервера, что дает возможность для блога автоматически оповещать сайты, ссылающиеся на него.
prefetch указывает, что следует заранее кэшировать файл, на который ведет ссылка.
prev указывает, что этот документ является частью серии, и что ссылка ведет на предыдущий документ в этой серии.
<link rel="prev" href="/next.html" type="text/html" title="Предыдущая страница">
search указывает, что ссылаемый документ содержит интерфейс поиска и связанных с ним ресурсов.
sidebar указывает, что ссылаемый документ, если это возможно, будет показан в дополнительном контексте браузера, и некоторые браузеры при щелчке по гиперссылке открывают окно для добавления ссылки в панель закладок.
stylesheet ссылка на внешний файл, который будет использоваться в качестве таблицы стилей для данного документа.
tag указывает на то, что метка, на которую ведет гиперссылка, относится к данному документу.
up указывает, что страница является частью иерархической структуры, и что гиперссылка ведет на более высокий уровень ресурса в структуре.
sizes Указывает размер иконок для визуального отображения. Атрибут sizes используется только совместно с rel="icon", и может принимать следующий значения:
ширинахвысота — определяет список размеров, разделенных пробелами, каждый размер должен быть в формате — ширинахвысота (размеры иконки задаются в пикселях), например:
<link rel="icon" href="favicon.png" sizes="16x16 32х32" type="image/png">;
any — иконка может масштабироваться до любого размера.
title Определяет заголовок ссылки или название набора альтернативных таблиц стилей. Значение атрибута — текст.
type Определяет MIME-тип документа, на который идет ссылка. В данном случае он принимает значение "text/css".

1.2.5. Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

Таблица 5. Атрибуты тега <script>
Атрибут Описание, принимаемое значение
async Атрибут указывает на то, что сценарий будет выполняться асинхронно с остальной частью страницы (сценарий начнет выполняться одновременно с загрузкой страницы).
charset Определяет кодировку символов
crossorigin Определяет, будет ли использоваться CORS при загрузке внешних скриптов (с использованием атрибута src).
anonymous — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin, при этом не передаются параметры доступа (cookie, сертификат X.509, логин/пароль для базовой аутентификации по HTTP). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Origin: имя домена, скрипт не будет загружен.
use-credentials — перед загрузкой скрипта в кросс-доменный запрос браузер автоматически добавляет заголовок Origin с указанием параметров доступа (cookie, SSL-сертификат или пары логин/пароль). Если в ответе сервера отсутствует заголовок Access-Control-Allow-Credentials: true, скрипт не будет загружен.
defer Интерпретация сценариев откладывается до окончания отображения документа на устройстве пользователя.
nonce Обеспечивает безопасность, защищая от атак с внедрением межсайтового скриптинга (XSS, cross site scripting). Устанавливает правила использования встроенных скриптов с помощью nonce-значений и хэшей. Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Загрузка с ресурсов, не входящих в «белый список», блокируется.
src Указывает на месторасположение файла со сценарием, значение атрибута — это url файла, содержащего JavaScript-программу.
type Используются для объявления языка сценария, использованного при составлении содержимого тега.

1.3. Элемент <body>

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

Таблица 5. Атрибуты тега <body>
Атрибут Описание, принимаемое значение
onafterprint Событие, срабатывающее после отправки страницы на печать или после закрытия окна печати.
onbeforeprint Событие, срабатывающее перед отправкой страницы на печать.
onbeforeunload Событие срабатывает, когда посетитель инициировал переход на другую страницу или нажал «закрыть окно». Позволяет отображать сообщение в диалоговом окне подтверждения, чтобы сообщить пользователю, хочет ли он остаться или покинуть текущую страницу.
onhashchange Событие срабатывает, когда меняется hash-часть URL, например, когда пользователь перейдет с адреса example.domain/test.aspx#page1 на example.domain/test.aspx#page2.
onmessage Событие происходит, когда сообщение получено через источник события.
onoffline Событие вызывается браузером в том случае, когда браузер определит, что соединение с интернет пропало.
ononline Событие вызывается браузером в том случае, когда соединение с интернет возобновилось.
onpagehide Событие происходит, когда пользователь покидает страницу посредством навигации, например, нажав на ссылку, обновив страницу, заполнив форму и т.д.
onpageshow Событие происходит, когда пользователь переходит на веб-страницу, после события onload.
onunload Событие срабатывает если страница не загрузилась по каким-либо причинам, либо при закрытии окна браузера.

html5book.ru

Что такое мета Description?

Description — HTML-тег, содержащий краткое описание страницы для поисковых роботов (а также роботов некоторых каталогов и рубрикаторов). По своей сути он является продолжением тега Title, только более развернутым и подробным. В коде он располагается в блоке <head> и выглядит следующим образом:

<meta name="description" content="Краткое описание страницы.">

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

Мета теги description и keywords: как правильно заполнять?

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

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

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

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

Используйте конкретную информацию

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

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

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

Включайте основной ключевой запрос в метаописание

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

Придерживайтесь оптимального объема Description

Дабы донести до пользователя всю информацию, которую мы вкладывали в мета тег Description, стоит создавать его по объему таким, чтобы ничего на выходе не было обрезано. Для Яндекса максимальный выводимый объем Description в сниппете: 160-170, а в случае с Google — это 150-160 символов. Однако самым универсальным размером является 140-150 символов с учетом пробелов. Этого вполне хватит, чтобы включить 1-2 предложения рекламного характера, а также призыв к действию или конкретную информацию, о которой писалось выше.

Не делайте метаописание идентичным Title

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

Используйте расширенные сниппеты

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

Делайте мета описание привлекательным и читабельным

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

Мета теги description и keywords: как правильно заполнять?

Не допускайте дублирования Description внутри сайта

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

Не забывайте про тег noyaca

Если ваш сайт добавлен в Яндекс Каталог, то в большинстве случаев в SERP ваши страницы будут иметь один и тот же сниппет, который будет браться из описания сайта в каталоге. Это лишает нас возможности полноценно использовать данное направление. Поэтому, чтобы запретить использования описания из ЯК, нужно в <head>-блоке сайта добавить следующую строчку:

<meta name="robots" content="noyaca"/>

Упоминайте в Description регион сайта

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

Мета теги description и keywords: как правильно заполнять?

Что такое мета Keywords?

Keywords — HTML-тег для указания ключевых слов страницы. Данный тег является анахронизмом, пережитком прошлого. Яндекс и Google не учитывают его в ранжировании совсем. В коде Keywords, также как и Description, располагается в <head>-блоке документа и выглядит следующим образом:

<meta name="keywords" content="ключевые слова">

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

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

Не пишите слова, не относящиеся к странице

Тут всё просто — что вижу, о том и пишу. Если нет на странице цен, то и не пишите в мета Keywords «цена», если нет адреса, так и не надо об этом упоминать в данном теге.

Не повторяйте слов

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

Не пишите стоп-слова и знаки препинания

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

Не делайте мета keywords слишком длинным

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

Упоминайте регион

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

Вместо заключения

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

pingoblog.ru

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

Дескрипшен — это анонс страницы из 2 — 3 предложений. Он отображается в результатах поиска как сниппет после тайтла и ссылки.

Html description

Description — часть метаданных HTML-документа. Он вносится в блок <head> после <title> и считается атрибутом тега <meta>. Посетители сайта не увидят его в чистом виде. Этот атрибут считывается только браузерами и поисковыми роботами. Если информация в дескрипшене отвечает требованиям поисковиков, она учитывается при создании сниппета поисковой выдачи.

Html description

Без атрибута description страница нормально отображается, а вот продвигается сайт хуже.

Как description сказывается на ранжировании?

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

Html description

Description — визитная карточка страницы. Она должна кратко, объективно показывать суть, чтобы посетитель не сомневался в полезности контента. Привлекательное описание увеличивает трафик на 10 — 15 %.

Требования

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

Html description

Советы по заполнению мета-тега:

  1. Уникальность. Не пытайтесь продублировать одно описание для всех страниц. Вас ждет ухудшение ранжирования или просто игнор вашего мета-описания. Если у вас интернет-магазин с кучей страниц, постарайтесь хотя бы для самых ходовых, монетизированных страничек сделать уникальный анонс.
  2. Психологические крючки. Экспериментируйте с триггерами, чтобы вызвать у пользователя нужную эмоцию, удержать внимание.
  3. Читабельность. Я знаю, как вам хочется вставить побольше ключей. Но описание пишется не для роботов. На трафик, ранжирование влияет поведение людей, их заинтересованность. Естественность вызывает доверие, завораживает.
  4. Релевантность содержанию. Чтобы завлечь, некоторые авторы стараются написать заманчивое, а иногда даже шокирующее описание. Зря. Не пытайтесь описание превратить в дешевую рекламу. Люди не любят, когда их обманывают. Ранжирование ухудшится. Пишите заманчиво о контенте страницы, но по делу.
  5. Размер. Оптимальная длина для Гугл — 140 — 180 знаков без пробелов, а для Яндекса — 145 — 250 знаков без пробелов. Если вы напишите короткий дескрипшн, поисковик его не примет. А слишком объемные анонсы обрываются, остальное содержимое скрывается под многоточием.
  6. Ключевые фразы. Вписывайте 2 — 3 ключа. Один из них должен быть основным и находится в начале, а другие — равномерно распределяться по тексту.
  7. Призыв к действию. Подтолкните к прочтению вашей статьи. Напишите “прочитайте”, “узнайте дальше”, “загляните” и т. п.
  8. УТП для коммерческих сайтов. Уникальное торговое предложение поможет выделиться сайту среди конкурентов. Укажите на преимущества, выгоду, решение проблем ЦА и вы повысите конверсию. Простой пример: “Оформляем займ за 5 минут без поручителей и стопки документов”.
  9. Систематизируйте. Google советует указывать в description важные данные — это может быть имя автора, дата публикации или цена продукта. Так пользователь найдет необходимую информацию, получит сведения, которые разбросаны по всей странице.

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

В дескрипшн запрещено указывать:

  • контактные данные;
  • инструкцию по установке, сборке вещи.

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

Типичные ошибки

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

Html description

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

Пока я приведу вам примеры популярных ошибок, которыми грешат авторы:

  1. Перечисление ключей. Собрали семантическое ядро и давай все ключи через запятую вставлять. Получается: “Купить ноутбук недорого, ноутбук цена, Acer ноутбук, заказать ноутбук Москва” — тавтология и неразбериха, от которой кружится голова.
  2. Много воды. Авторы так стараются выделиться литературным слогом и вводными словами, что забывают о главном — краткости.
  3. Перепутали со вступительным абзацем. Description — не начало текста, а описание.
  4. Нет ключей. Естественность важна для мета-описания, но вставлять хоть бы главный ключ (необязательно в точном вхождении) — необходимость.
  5. Дублируется тайтл. Некоторые вставляют тайтл в первое предложение — это грубая ошибка. Снижается уникальность и привлекательность сайта для поисковой выдачи.
  6. Обещания превышают ожидания. Копирайтерам, вебмастерам так хочется привлечь внимание к странице, что они обещают лекарство от всех проблем в одной статье. Это приводит к понижению CTR.

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

Почему обрыв дескрипшена поисковиком бывает полезен?

Слишком большие анонсы обрезаются поисковиками. Неожиданный обрыв может заинтересовать пользователя.

Html description

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

Что будет, если поисковая система не одобрит ваш дескрипшн?

Иногда поисковые роботы могут проигнорировать ваше мета-описание, сгенерировав свое. Они выбирают кусочки из текста и объединяют их. Для описания берут:

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

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

Чем отличается правильный description от плохого: примеры

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

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

Html description

По запросу “Выучить японский язык” меня привлекло это мета-описание. Уложились в 3 предложения, сумели зацепить внимание первым предложением. Практически в самом начале вставлен главный ключ в прямом вхождении. Последнее предложение указывает на то, что статья про советы. Я бы кликнула, а вы?

Html description

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

Html description

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

Html description

Резюмируем — что такое правильный description, это:

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

Такое мета-описание понравится и поисковику, и обычному человеку.

Где прописывается дескрипшн в WordPress?

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

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

Html description

Как только вы установите плагин, ниже поля для статьи появятся 4 строки. Нас интересует Meta Description (англоязычная версия) и Метаописание (русскоязычная).

Html description

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

Автозаполнение дескрипшн

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

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

Плагины для автогенерации SEO-параметров на движке WordPress:

  • Meta Keywords Generator,
  • All in One SEO Pack,
  • Platinum SEO Pack.

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

Заключение

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

Соблюдение правил, практика, анализ работ профессионалов — формула успешного дескрипшена.

А как вы думаете, влияет ли на продвижение description? Или он нужен больше для юзабилити? Делитесь своими мыслями в комментариях.

Подписывайтесь и познавайте фриланс вместе с нами!

iklife.ru


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

Adblock
detector