Html мета описание: Мета-теги для сайта — что такое мета теги, какие бывают, для чего прописывать ключевые слова в мета-теги | Дропшиппинг

Содержание

Тег | HTML справочник

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

Описание

HTML тег <meta> является пустым элементом и располагается внутри элемента <head>. Он используется для предоставления дополнительной информации (метаданных) о HTML-документе, используемой браузерами и поисковыми системами.

Обычно на одной странице располагается по несколько элементов <meta>, но с различными атрибутами, которые используются например для определения описания страницы, ключевых слов, указания автора документа, последнего изменения, указания кодировки HTML-документа и т.д.

Примечание: содержимое элементов <meta> не отображается на веб-странице.

Атрибуты

charset:

Указывает кодировку символов для текущего HTML-документа. Чаще всего используется кодировка UTF-8.

Тег <meta> с атрибутом charset лучше всего располагать в качестве первого дочернего элемента внутри элемента <head>.

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

content:

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

http-equiv:

Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте.

Возможные значения атрибута:

default-style: указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей.

refresh: указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «;url=адрес_страницы»:



<!-- обновление страницы через 10 секунд -->
<meta http-equiv="refresh" content="10">

<!-- Перенаправление на другую страницу через 10 секунд -->
<meta http-equiv="refresh" content="10;url=httр://www.puzzleweb.ru">

name:

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

Примечание: атрибут name не должен использоваться в элементе, если в нём уже установлен атрибут http-equiv или charset.

Возможные значения атрибута:

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

robots: определяет поведение поисковых роботов на странице.

Значения атрибута content для <meta name=»robots»>:
Значение	Описание	Поисковик
index	разрешает роботу индексировать страницу	все
noindex	запрещает роботу индексировать страницу	все
follow	позволяет роботу переходить по ссылкам на странице	все
nofollow	запрещает роботу переходить по ссылкам на странице	все
noodp	запрещает использование общего описания сайта из каталога DMOZ, если таковое имеется, к описанию данной страницы на странице результата поиска	google, yahoo, bing
noarchive	предотвращает кэширование страницы поисковой системой	google, yahoo
nosnippet	предотвращает отображение любого описания страницы на странице результатов поиска	google
nocache	синоним значения noarchive	bing

viewport: позволяет определить размер и/или масштаб области просмотра веб-страницы в мобильных браузерах. Параметры для области просмотра указываются в атрибуте content через запятую:


<meta name="viewport" content="width=device-width, height=device-height,
 initial-scale=1.0">

Значения атрибута content для <meta name=»viewport»>:
Значение	Пример значения	Допустимые значения	Описание
width	width=device-width width=320	положительное целое число от 1 до 10000 или device-width	Определяет ширину в пикселях. Специальное значение device-width указывает, что ширина области просмотра будет равна ширине экрана устройства.
height	height=device-height height=640	положительное целое число от 1 до 10000 или device-height	Определяет высоту в пикселях. Специальное значение device-height указывает, что высота области просмотра будет равна высоте экрана устройства.
initial-scale	initial-scale=2.0	положительное число от 0.0 до 10.0	Задает масштаб страницы при ее первоначальном просмотре.
maximum-scale	maximum-scale=2.5	положительное число от 0.0 до 10.0	Задает предел увеличения веб-страницы.
minimum-scale	minimum-scale=0.5	положительное число от 0.0 до 10.0	Задает предел уменьшения веб-страницы.
user-scalable	user-scalable=no	булево значение (yes или no)	При использовании значения no, пользователь не сможет масштабировать веб-страницу. Значение по умолчанию — yes.

Тег <meta> так же поддерживает Глобальные атрибуты

Стиль по умолчанию

Нет.

Пример


<head>
  <meta charset="UTF-8">
  <meta name="description" content="Портал для Web разработчиков">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="author" content="Автор Я">
</head>

<body>
  Содержимое страницы
</body>

Результат данного примера в окне браузера:

Meta теги. Учебник html

Глава 10

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

<html> — начало документа
<head> — начало головы
</head> — закрытие головы
<body> — начало тела
</body> — закрытие тела
</html> — конец документа

Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.

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

<meta> тег имеет следующие атрибуты:

http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
name — информационное имя. (применяется в паре с атрибутом content)
content — информационное содержание, связанное с мета именем (name)

Теперь на примерах будем вникать в суть дела.

Пример (очень нужный и важный):

<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>

Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.

Теперь разберём по «слогам» нашу запись:
<meta http-equiv=»Content-Type» — указываем что в этом мета теге мы будем заниматься Content-Type

— типом содержания
Content=»text/html; — а именно его текстом
Charset=Windows-1251″> — документ для Windows — Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252

В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8

То есть писать в голове документа вот так:

<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>

Пример:

<meta http-equiv=»Content-Language» Content=»ru»>

В этой строчке говорится о том что язык Language документа является русским Content=»ru»

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

Пример:

<meta name=»author» Content=»Остап Бендер»>

<meta name=»copyright» Content=»»Рога и копыта» Остап Бендер»>

Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=»author» указывает имя автора страницы, а name=»copyright» авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду…

Пример:

<meta name =»Generator» Content=»Microsoft Notepad»>

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

Пример:

<meta name=»description» Content=»Производим закупку по выгодным ценам рогов и копыт!»>

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

Пример:

<meta name=»keywords» Content =»рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене»>

Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.

Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта 🙂 Какие слова и фразы Вы будите вводить в строке «Поиск»? ну наверно что то типа: «Где продать коровьи рога?» или «Реализовать копыта по выгодной цене» Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.

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

Пример:

<meta name=»Publisher-Email» Content=»Ваш[email protected]сервер.домен»>
<meta name=»Publisher-URL» Content=»http://www.Ваш_сайт/»>

Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL

Пример:

<meta name =»revisit-after» Content=»15 days»>

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

Пример:

<meta http-equiv=»expires» content=»Sun, 24 jan 2010 12:28:36 GMT+03:00″>

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

Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.

Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели

Месяцы:	От Английского:	Сокращения:
Январь	January	Jan
Февраль	February	Feb
Март	March	Mar
Апрель	April	Apr
Май	May	May
Июнь	June	Jun
Июль	July	Jul
Август	August	Aug
Сентябрь	September	Sep
Октябрь	October	Oct
Ноябрь	November	Nov
Декабрь	December	Dec

Дни недели:	От Английского:	Сокращения:
Понедельник	Monday	Mon
Вторник	Tuesday	Tue
Среда	Wednesday	Wed
Четверг	Thursday	Thu
Пятница	Friday	Fri
Суббота	Saturday	Sat
Воскресенье	Sunday	Sun

Атрибуту content можно присвоить значение «0» <meta http-equiv=»Expires» content=»0″> в этом случае страница всегда будет загружаться с сервера.

И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..

Пример:

<meta http-equiv=»pragma» content=»no-cache»>

А такая запись вовсе запретит браузеру кэшировать данную страницу.

Пример:

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

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

Список возможных команд роботу:

Index — индексировать страницу
Noindex — не индексировать страницу
Follow — прослеживать гиперссылки на странице
Nofollow — не прослеживать гиперссылки на странице
All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
None — не индексировать страницу и не прослеживать гиперссылки на странице

Пример:

<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>

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

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
<title>Переадресация</title>
</head>
<body>
<font size=»+1″>
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href=»http://www.mysite.ru/index.html»><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href=»http://www.mysite.ru/index.html»>здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>

Разберём и осмыслим строчку из примера:

<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>

meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content=»10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.

Пример:

<meta http-equiv=»Refresh» content=»30″>

А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.

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

Пример:

<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=0)»>
<meta http-equiv =»Page- Exit » Content=»RevealTrans(Duration=3.0, Transition=23)»>

Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.

Page-Enter — Эффект появления страницы
Page- Exit — Эффект исчезновения страницы

В которых:

Duration — время действия эффекта в секундах
Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:

Номер	Описание эффекта	Номер	Описание эффекта
0	Прямоугольники внутрь	12	Растворение
1	Прямоугольники наружу	13	Вертикальная панорама внутрь
2	Круг внутрь	14	Вертикальная панорама наружу
3	Круг наружу	15	Горизонтальная панорама внутрь
4	Наплыв наверх	16	Горизонтальная панорама наружу
5	Наплыв вниз	17	Уголки влево — вниз
6	Наплыв вправо	18	Уголки влево — вверх
7	Наплыв влево	19	Уголки вправо – вниз
8	Вертикальные жалюзи	20	Уголки вправо – вверх
9	Горизонтальные жалюзи	21	Случайные горизонтальные полосы
10	Шажки горизонтальные	22	Случайные вертикальные полосы
11	Шажки вертикальные	23	Случайный выбор эффекта

Пример:

Файл page1.html

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=12)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c5ffa0″>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page2.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>

Файл page2.html

<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=2.0, Transition=23)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c0e4ff»>
<center>
<h3>На заметку:</h3>
<font size=»+1″>Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок «назад» «вперёд». <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page1.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>

Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!

Тег meta

Пример

Опишите метаданные в документе HTML:

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

Метаданные — это данные (информация) о данных.

Тег <meta> содержит метаданные о документе HTML. Метаданные не будут отображаться на странице, но будут проанализированы машиной.

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

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

HTML5 ввел метод, позволяющий веб-дизайнерам управлять окном просмотра (видимой областью пользователя веб-страницы), через — <meta> тег (уидеть «Setting The Viewport» Пример ниже).

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

Элемент
<meta>	Да	Да	Да	Да	Да

Советы и примечания

Примечание: <meta> Теги всегда заходят внутрь элемента <head>.

Примечание: Метаданные всегда передаются в виде пар «имя-значение».

Примечание: Атрибут content должен быть определен, если определено имя или атрибут HTTP-EQUIV. Если ни один из них не определен, атрибут Content не может быть определен.

Настройка видового экрана

В HTML5 появился метод, позволяющий веб-дизайнерам управлять окном просмотра через тег <meta>.

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

На всех веб-страницах необходимо включить следующий элемент <meta> видового экрана:

Элемент <meta> видовой экран предоставляет браузеру инструкции по управлению размерами страницы и масштабированию.

Ширина = устройство-ширина часть задает ширину страницы, чтобы следовать ширине экрана устройства (который будет варьироваться в зависимости от устройства).

Элемент начального масштаба = 1.0 задает начальный уровень масштабирования при первой загрузке страницы обозревателем.

Вот пример веб-страницы Без мета-тег видового экрана и та же веб-страница С мета-тег видового экрана:

Совет: Если вы просматриваете эту страницу с телефоном или планшетом, вы можете нажать на две ссылки ниже, чтобы увидеть разницу.

Вы можете прочитать больше о видовом экране в нашем Адаптивный веб-дизайн — учебник по видовому экрану.

Различия между HTML 4,01 и HTML5

Атрибут scheme-навестить поддерживается в HTML5.

HTML5 имеет новый атрибут, кодировку, что облегчает определение кодировки:

HTML 4.01: <meta http-equiv=»content-type» content=»text/html; charset=UTF-8″>
HTML5: <meta charset=»UTF-8″>

Различия между HTML и XHTML

В HTML тег <meta> не имеет конечного тега.

В XHTML тег <meta> должен быть правильно закрыт.

Примеры

Пример 1 — определение ключевых слов для поисковых систем:

Пример 2 — Определите описание веб-страницы:

Пример 3 — Определите автора страницы:

Пример 4 — обновление документа каждые 30 секунд:

Пример 5 — Настройка видового экрана, чтобы сделать ваш сайт хорошо выглядел на всех устройствах:

Атрибуты

= Новиный в HTML5.

Атрибут	Значение	Описание
charset	character_set	Задает кодировку символов для HTML-документа
content	text	Дает значение, связанное с атрибутом http-equiv или Name
http-equiv	content-type default-style refresh	Предоставляет заголовок HTTP для информации/значения атрибута Content
name	application-name author description generator keywords viewport	Задает имя для метаданных
scheme	format/URI	Не поддерживается в HTML5. Задает схему, используемую для интерпретации значения атрибута Content

Глобальные атрибуты

Тег <meta> также поддерживает Глобальные атрибуты в HTML.

Параметры CSS по умолчанию

Нет.

Мета-теги в HTML — Руководство для начинающих

В этой статье мы покажем вам, как работать с метатегами в HTML5.

Что такое метатег в HTML

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

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

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

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

В HTML доступны сотни и сотни метатегов, с которыми мы можем работать.

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

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

Итак, все метатеги должны находиться внутри раздела заголовка, то есть внутри тегов <head><head>.

Мета-теги заголовка

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

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

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

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

Итак, давайте посмотрим, как задать заголовок веб-странице.

Мета-тег заголовка немного отличается от других метатегов. Вместо метатега вы должны использовать тег Title, это <title></title>. Итак, это немного отличается от других метатегов.

Чтобы установить заголовок, нам просто нужно поместить заголовок страницы внутри этого тега, как в примере кода ниже:

<title>Борис, пес!</title>

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

Предостережения относительно мета-тегов Title

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

Идеальное количество символов – от 30 до 35. Только не переусердствуйте.

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

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

Для Google рекомендуется не перекрывать 30 или 35 символов в заголовке.

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

Meta Тег Description является одним из наиболее важных для веб-сайта.

Для вас просто необходимо показать поисковым системам, таким как Google, как индексировать и как описывать свой веб-сайт. Итак, тег Meta Description должен содержать описание вашей веб-страницы.

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

<meta name="description" content="Веб-страница о Борисе, собаке!">

Но помните, мета-описание не может быть таким длинным. Затем он должен быть ограничен 150 или 160 символами.

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

Синяя часть – это тег заголовка, содержимое тега заголовка. Ниже мы видим описание, которое является метаописанием. Если кто-то просто поместит описание более 150 символов, вы увидите в конце трехточечное.

Страница без описания метатега

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

Но на самом деле это не очень хорошо, поскольку Google отдает приоритет страницам с правильно установленными метаописаниями.

Имея правильное и точное метаописание, вы просто сообщаете Google или поисковым системам, что ваша страница соответствует тому ключевому слову, которое вы ищете. Другими словами, отличное мета-описание сильно влияет на ваше SEO. А сайты с отличным SEO привлекают много посетителей.

Тест ваших мета-тегов

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

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

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

В браузере Firefox вы можете щелкнуть правой кнопкой мыши. После этого нажмите «просмотреть информацию о странице».

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

Но если вы сделаете первый тег: метатег описания, вы увидите, как выглядит метатег.

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

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

Мета-теги ключевых слов

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

Помните, что «ключевые слова» употребляются во множественном числе. Таким образом, ключевые слова метатега выглядят точно так же, как и описание. У нас должны быть атрибуты name и content. Как в примере ниже:

<meta name="keywords" content="">

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

В нашем примере ниже у нас есть имя «ключевые слова», всегда во множественном числе. И содержание: «собака», «Борис», так зовут собаку, «Йоркшир», «Домашние животные».

<meta name="keywords" content="собака, Борис, Йоркшир, Домашние животные">

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

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

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

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

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

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

Итак, в примере кода ниже вы можете увидеть, как выглядит метатег «robots».

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

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

Нет индексных роботов

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

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

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

Атрибут Follow

Если бы у вас была одна или несколько ссылок, Google перешел бы по этим ссылкам. Он ползет по всем этим ссылкам.

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

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

Мета-теги области просмотра

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

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

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

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

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

Проверка адаптивного макета

В Firefox, а также в Google Chrome и некоторых других браузерах есть способ имитации мобильного телефона. В Firefox и Chrome вы можете нажать ctrl + shift + i, чтобы увидеть эти параметры. Таким образом, вы можете видеть веб-страницу точно так же, как на мобильном телефоне или в другом размере.

Теперь в мобильном симуляторе мы можем просто выбрать модель мобильного. В приведенном ниже примере мы будем тестировать мобильный телефон iPhone X.

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

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

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

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

Обновить мета-теги

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

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

<meta http-Equiv="refresh" content="2">

Как видите, этот тег немного отличается от других. Итак, в этом метатеге мы использовали «http-Equiv» вместо «name». Http-Equiv означает имитацию заголовка ответа на стороне сервера. Это стандарт для мета-тегов мета-обновления и мета-контента.

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

Еще одна важная конфигурация этого метатега – размещение URL-адреса. Итак, попробуйте установить время обновления 20 секунд и URL, равный «https://andreyex.ru».

<мета http-Equiv="refresh" content="20; URL: https://andreyex.ru">

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

Вывод

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

Если у вас есть вопросы, напишите нам, оставьте комментарий своим вопросом.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

HTML метатеги, которые по-настоящему важны – Сей-Хай

Если Google скажет что-то сделать, лучше это сделать.

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

И когда дело доходит до использования HTML метатегов для SEO, никто из нас не должен тратить время в пустую.

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

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

Заголовок веб-страницы содержит много информации о найденном там контенте. Здесь вы найдете HTML метатеги вместе со ссылками на CSS или JavaScript, которые применимы к странице.

Вы можете найти несколько важных деталей о странице только из этого фрагмента:

(Мета) заголовок
Мета описание
Тип мета-содержимого и область просмотра

Это все метатеги. В большинстве случаев они написаны на HTML в виде пары названий/значений. Например:

<meta property="og:title" content="15 Best CSS Libraries for 2019 | Webdesigner Depot" />

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

Какие метатеги нужно использовать?

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

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

Title

HTML пример

<title>5 Ways to Beef Up Your WordPress Security Today</title>

Что он делает?

Тег <title> указывает на название страницы.

Действительно ли он необходим?

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

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

How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend

(Как заработать шестизначную зарплату, не имея ничего, кроме ноутбука, паспорта и лучшего друга)

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

<title>Earn 6 Figures with Your Laptop, Passport, and Your Best Friend</title>

Это 56 символов, теперь заголовок вписывается в лимиты Google, и работает так же хорошо, как оригинал.

Description

HTML пример

<meta name="description" content="Tired of running on the hourly wage treadmill? Learn how to become a travel writer and influencer and make a six-figure salary today.">

Что он делает?

Это краткое изложение того, что можно найти на странице. В поиске это описание страницы, которое появляется под заголовком и URL страницы.

Действительно ли он необходим?

Да, это еще один важный метатег.

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

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

Character Set (Набор символов)

HTML пример

<meta charset="UTF-8">

Что он делает?

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

Действительно ли он необходим?

UTF-8 – не единственный набор символов и не является универсально приемлемым. Итак, убедитесь, что вы определили набор символов для сайта по умолчанию, используя этот метатег.

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

Hreflang

HTML пример

<link rel="alternate" href="http://mywebsite.com/en-au/" hreflang="en-au" />

Что он делает?

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

Действительно ли он необходим?

Есть несколько причин использовать этот метатег:

Когда вы создали международный веб-сайт с разными переведенными версиями;
Когда вы написали контент на определенном диалекте, например, en-us или en-gb;
Когда ваша страница содержит смесь языков или диалектов, и вы хотите, чтобы каждый из них был обнаружен.

Viewport

HTML пример

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

Что он делает?

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

Действительно ли он необходим?

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

Вот почему Google рекомендует каждый раз устанавливать для контента значение width = device-width, initial-scale = 1. Если вы попытаетесь ввести такие переменные, как минимальный масштаб, вы можете испортить внешний вид вашего веб-сайта. Это происходит потому, что он трансформируется, например, из портретной ориентации в горизонтальную.

Canonical Link

HTML пример

<link rel="canonical" href="https://mywebsite.com/blog/7-ways-to-beef-up-wordpress-security" />

Что он делает?

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

Действительно ли он необходим?

Google не принимает дубликаты контента. Но допустим, что ваша статья «5 способов повысить безопасность WordPress сегодня» – это рерайт статьи под названием «7 способов повышения безопасности WordPress» от 2015 года.

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

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

Robots

HTML пример

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

Или же:

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

Что он делает?

Мета-теги “robots” всем поисковым ботам (роботам) или определенным ботам-обходчикам («googlebot», «bingbot», «duckduckbot» и т. д.), как обрабатывать страницу. Обычно это связано с тем, как должна быть проиндексирована страница.

Действительно ли он необходим?

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

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

noindex: используйте этот тег, если вы хотите скрыть страницу от поиска. (Не полагайтесь на это в целях безопасности. Помните, это всего лишь техническое решение.)
nofollow: это полезно для блогов, которые принимают контент от авторов, но не проверяют его. Таким образом, если партнерские ссылки будут размещены на странице, Google не будет следовать им.
nosnippet или max-snippet: управляет отображением вашего текста, изображения или фрагмента видео в поиске.
noarchive: если существуют более старые кэшированные версии страницы, используйте этот тег, чтобы запретить поисковым системам показывать их.
unavailable_after:[date]: это хороший вариант для ограниченного продвижения, например, в период продаж в Черную пятницу. Если вы, захотите привлечь трафик на страницу с октября по декабрь, возможно, имеет смысл убрать все из поиска после завершения праздников и прекращения действия сделок.

Google Site Verification

HTML пример

<meta name="google-site-verification" content="https://mywebsite.com" />

Что он делает?

Это один из методов, которые вы можете использовать, чтобы подтвердить свое право собственности на сайт для Google Search Console.

Действительно ли он необходим?

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

Twitter Cards и Open Graph (Социальные сети)

Образец HTML

Что он делает?

Метатеги Open Graph (например, в приведенном выше фрагменте) сообщают Facebook и LinkedIn, как отображать метаданные для страницы или публикации, публикуемой в этих социальных сетях.

Метатеги Twitter Card делают то же самое, за исключением того, что обычно также запрашивают дескриптор (@).

Действительно ли он необходим?

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

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

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

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

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

Превью: Florian Olivo

HTML и CSS с примерами кода

Тег <meta> (от англ. meta information — мета информация) определяет данные (они называются ещё метатеги), которые используются для хранения информации, предназначенной для браузеров и поисковых систем.

Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», имена которых определяются ключевыми словами content, name или http-equiv.

Метаданные документа

Синтаксис

Закрывающий тег не требуется.

Атрибуты

charset: Задаёт кодировку документа.
content: Устанавливает значение атрибута, заданного с помощью name или http-equiv.
http-equiv: Предназначен для конвертирования метатега в заголовок HTTP.
name: Имя метатега, также косвенно устанавливает его предназначение.

charset

Указывает кодировку документа. Атрибут введён в HTML5 и предназначен для сокращения формы <meta>, которая задавала кодировку в предыдущих версиях HTML и XHTML.

Синтаксис

<meta charset="<кодировка>" />

Значения

Название кодировки, например UTF-8.

Значение по умолчанию

Нет.

content

content устанавливает значение атрибута, заданного с помощью name или http-equiv. Атрибут content может содержать более одного значения, в этом случае они разделяются запятыми или точкой с запятой.

Некоторые значения атрибута content для <meta name="robots">, предназначенных для поисковых роботов, приведены в табл. 1.

Табл. 1. Значения для `meta name="robots"`
Значение	Описание
`index`	Разрешает роботу индексировать данную страницу.
`noindex`	Запрещает роботу индексировать текущую страницу. Она не попадает в базу поисковика и её невозможно будет найти через поисковую систему.
`follow`	Разрешает роботу переходить по ссылкам на данной странице.
`nofollow`	Запрещает роботу переходить по ссылкам на данной странице. При этом всем ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PagePank.
`noarchive`	Запрещает роботу кэшировать данную страницу.

Допустимые значения атрибута content для <meta name="viewport">, которые предназначены для управления просмотром сайта на мобильных устройствах, приведены в табл. 2.

Табл. 2. Значения для `meta name="viewport"`
Значение	Допустимые значения	Описание
`width`	device-width или целое положительное число	Устанавливает ширину области просмотра в пикселях.
`height`	device-height или целое положительное число	Устанавливает высоту области просмотра в пикселях.
`initial-scale`	Число от 0.0 до 10.0	Устанавливает соотношение между шириной устройства (device-width в портретном режиме или device-height в ландшафтном режиме) и размером области просмотра.
`maximum-scale`	Число от 0.0 до 10.0	Задаёт максимальное значение масштаба. Должно быть больше или равно minimum-scale, в противном случае игнорируется.
`minimum-scale`	Число от 0.0 до 10.0	Задаёт минимальное значение масштаба. Должно быть меньше или равно maximum-scale, в противном случае игнорируется.
`user-scalable`	yes или no	Если указано no, то пользователь не сможет масштабировать веб-страницу. По умолчанию используется yes.

Синтаксис

Значения

Строка символов, которую надо взять в одинарные или двойные кавычки.

Значение по умолчанию

Нет.

http-equiv

Браузеры преобразовывают значение атрибута http-equiv, заданное с помощью content, в формат заголовка ответа HTTP и обрабатывают их, как будто они прибыли непосредственно от сервера.

Синтаксис

<meta http-equiv="<значение>" />

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута http-equiv.

Content-Type: Тип кодировки документа.

expires Устанавливает дату и время, после которой информация в документе будет считаться устаревшей.

pragma Способ кэширования документа.

refresh: Загружает другой документ в текущее окно браузера.

Значение по умолчанию

Нет.

name

Устанавливает идентификатор метатега для пары «имя=значение». Одновременно использовать атрибуты name и http-equiv не допускается.

Синтаксис

<meta name="<значение>" />

Значения

Любой подходящий идентификатор. Ниже приведены некоторые допустимые значения атрибута name.

author: Имя автора документа.
description: Описание текущего документа.
keywords: Список ключевых слов, встречающихся на странице.
viewport: Управляет просмотром сайта на мобильных устройствах.

Значение по умолчанию

Нет.

Спецификации

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <title>META</title>
    <meta charset="utf-8" />
    <meta
      name="GENERATOR"
      content="Microsoft FrontPage 4.0"
    />
    <meta
      name="ProgId"
      content="FrontPage.Editor.Document"
    />
  </head>
  <body>
    <p>...</p>
  </body>
</html>

Ссылки

Какие мета-теги для сайта HTML нужно добавлять и что они дают?

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

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

Да, это выходит за рамки SEO.

Поисковые системы массово используют метатеги. Но на сегодняшний день существуют специализированные метатеги и для социальных сетей, таких как Facebook, Twitter и LinkedIn.

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

Ниже приводится список метатегов, которые нужно добавить на сайт, чтобы успешно работать в Сети:

Title и description;
Мета теги для html сайта, связанные с Google;
Теги верификации;
Социальные метатеги;
Schema.org для описания контента.

Каждая страница сайта должна содержать метатеги title и description. Поместите их в раздел <head> HTML-страницы.

Например:

<!DOCTYPE html>
<html>
    <head>
        <!—- Тайтл страницы заключается в тег <title> -->
        <title>Это тайтл вашей страницы</title>
        <!—Описание страницы определяется в мета формате -->
        <meta name="description" content="Это описание вашей страницы">
    </head>

    <body>
        <!—Содержимое страницы... -->
    </body>
</html>

<title> не отображается в формате <meta> тегов, но о нем практически всегда говорят, как о метатеге.

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

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

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

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

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

Оно также может использоваться в качестве описания на страницах социальных сетей.

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

Google и другие поисковые системы отображают ограниченное количество символов в результатах поиска. Давайте рассмотрим следующий пример:

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

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

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

Google обычно отображает 50-60 символов из заголовка и около 150-160 из описания. Остальная часть информации, содержащейся в этих тегах, не будет отображаться на странице результатов поиска.

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

Есть еще несколько метатегов, которые нужно добавлять на все веб-страницы в разделе <head>:

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

http-viewport задает видимую пользователю область веб-страницы. Этот метатег был введен в адаптивном веб-дизайне. Он позволяет контролировать начальные размеры окна просмотра и их изменение при загрузке страницы.

Давайте расширим наш предыдущий пример:

<!DOCTYPE html>
<html>
    <head>
        <!—Кодировка символов UTF8 -->
        <meta charset="utf-8">
        <!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!—Тайтл страницы заключается в тег <title> -->
        <title>Это тайтл вашей страницы</title>
        <!—Описание страницы определяется в мета-формате -->
        <meta name="description" content="Это описание вашей страницы">
    </head>

    <body>
        <!—Содержимое страницы... -->
    </body>
</html>

Существуют и другие менее используемые мета теги для сайта интернет магазина. Наиболее важные из них: robots, google и http-equiv. Мы должны упомянуть еще одну важную часть метаинформации, хотя она не задается в виде тега. Атрибут изображений alt описывает содержимое картинок на сайте.

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

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

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

Позвольте мне объяснить.

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

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

Самый простой вариант доказать право собственности на сайт — это метатег. Коды верификации предоставляются Google Search Console, Pinterest и т.д.

Добавим в наш пример использования мета-теги для сайта, код в котором значение поля Content является кодом верификации, предоставляемым Google Search Console:

<!DOCTYPE html>
<html>
    <head>
        <!—Кодировка символов UTF8 -->
        <meta charset="utf-8">
        <!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!—Тайтл страницы заключается в тег <title> -->
        <title>Это тайтл вашей страницы</title>
        <!—Описание страницы определяется в мета-формате -->
        <meta name="description" content="Это описание вашей страницы">
<!—Верификация сайта в Google -->
        <meta name="google-site-verification" content="59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" />

    </head>

    <body>
        <!—Содержимое страницы... -->
    </body>
</html>

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

Большинство социальных ресурсов поддерживают протокол Open Graph для считывания полезной информации о веб-странице.

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

Зададим набор тегов Open Graph для Facebook, Google + и LinkedIn. Я также добавил заголовок для Twitter:

<!DOCTYPE html>
<html>
    <head>
        <!—Кодировка символов UTF8 -->
        <meta charset="utf-8">
        <!—Установка ширины страницы на ширину для устройства с масштабом 1 -->
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!—Тайтл страницы заключается в тег <title> -->
        <title>Это тайтл вашей страницы</title>
        <!—Описание страницы определяется в мета-формате -->
        <meta name="description" content="Это описание вашей страницы">
<!—Верификация сайта в Google -->
        <meta name="google-site-verification" content="59408yhfuhfjskdlhfasdhfuoyHJHLJHK__Random__BLAH_BLAH" />
<!—Данные Open Graph -->
        <meta property="og:title" content="Это тайтл вашей страницы<" />
        <meta property="twitter:title" content="Это тайтл вашей страницы<" />
        <meta property="og:description" content="Это описание вашей страницы ">
        <meta property="og:image" content="http://yourtsite.com/yourimagedir/yourthumbnail.jpg" />

    </head>

    <body>
        <!—Содержимое страницы... -->
    </body>
</html>

Если у вас возникнут проблемы с метатегами Open Graph, произведите отладку с помощью Open Graph отладчика Facebook.

Schema.org предоставляет схемы для структурированных данных в Интернете.

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

Рассмотрим пример статьи в блоге:

<article itemscope itemtype="http://schema.org/BlogPosting">
    <meta itemprop="image" content="http://yoursite.com/image.jpg">
    <img src="http://yoursite.com/image.jpg">

    <h2 itemprop="name headline">Тайтл статьи</h2>

    <p>
        <time datetime="date_to_xmlschema" itemprop="datePublished">Apr 4, 2016</time>

        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
            <span itemprop="name">Имя автора статьи</span>
        </span>
    </p>

    <div itemprop="articleBody">
        <!—Тело статьи -->
    </div>
</article>

Используйте атрибут itemscope, чтобы обозначить начало нового объекта schema.org. itemtype определяет тип элемента, начинающегося с itemscope. Используйте атрибут itemprop в пределах открывающегося и закрывающегося тегов элемента с атрибутом itemscope.

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

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

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

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

Данная публикация является переводом статьи «What HTML meta tags to add to your site and what do they do» , подготовленная редакцией проекта.

Напишите идеальное метаописание (Рекомендации 2021 года!)

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

В этом руководстве мы покажем вам все, что вам нужно знать!

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

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

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

Вы можете редактировать свое мета-описание в HTML-коде вашего сайта или с помощью такого плагина, как Yoast с WordPress.

Какова оптимальная длина метаописания?

Оптимальная длина метаописания составляет 100–150 символов. Google часто отсекает метаописания, которые выходят далеко за пределы 150 символов.

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

Как писать идеальные метаописания

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

Вот что вы должны учитывать при написании:

Написать убедительную копию

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

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

Используйте целевые и дополнительные ключевые слова

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

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

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

Вот несколько примеров метаописаний из высокорейтинговых результатов поиска.

Пример: дешевые авиабилеты

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

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

В этом примере campaignmonitor.com описывает, какие преимущества получит пользователь, а также включает их целевые ключевые слова.

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

В этом примере wiki how задает пользователям вопросы, чтобы подтвердить их ситуацию, и включает их целевые ключевые слова.

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

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

В плагине Yoast для этого есть еще одно поле:

Что такое заголовки страниц и метаописания? [РАЗЪЯСНЕНИЕ]

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

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

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

Заголовки страниц и метаописания невероятно важны для SEO-кампании вашего сайта.

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

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

Что такое метаданные?

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

Существует множество примеров метаданных, и в Википедии их полдюжины.

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

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

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

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

Что такое заголовки страниц?

Заголовки страниц или «Теги заголовков» — это небольшие фрагменты HTML-кода, которые вы можете найти в исходном коде веб-страниц.

Выглядят они так:

Это заголовок

Если вы используете браузер Chrome, вы можете найти исходный код этой страницы, нажав «Ctrl + U» или следуя этим инструкциям.

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

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

Если в теге страницы содержится текст «Как добраться до Парижа поездом (с ограниченным бюджетом)», можно с уверенностью предположить, что на странице, на которую есть ссылка, содержится информация о том, как добраться до Парижа по дешевым ценам. </p> <p> От того, насколько хорошо вы оптимизируете этот текст, зависит, насколько вероятно, что человек щелкнет ссылку на вашу страницу.Чем выше вероятность того, что это произойдет, тем выше вероятность получить много трафика на эту страницу из поисковых систем. </p> <p> Заголовки страниц должны быть короткими, чтобы Google не урезал заголовок и не пропустил его наиболее важные части. Заголовки также должны быть точным описанием страницы, на которую указывает ссылка — в противном случае посетители с большей вероятностью покинут страницу, как только поймут, что содержание не соответствует их потребностям. </p> <h4><span class="ez-toc-section" id="i-39"> Примеры хороших заголовков страниц </span></h4> <p> Ниже приведены примеры хороших заголовков страниц.Весьма вероятно, что они были оптимизированы для SEO и, как следствие, получают большое количество посетителей на каждой странице. </p> <p> </p> <p> </p> <p> </p> <p> </p> <h4><span class="ez-toc-section" id="i-40"> Примеры неправильного заголовка страницы </span></h4> <p> Ниже приведены примеры неправильных заголовков страниц. Они, вероятно, получат очень мало кликов по сравнению с их более близкими, лучше оптимизированными соседями. </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> Метаописания — это небольшие фрагменты HTML-кода, которые предоставляют описание или сводку страницы, к которой они относятся.Подобно рекламному объявлению к книге или резюме к фильму, оно должно описывать содержание страницы, к которой оно относится. Этот код должен быть найден в исходном коде. </p> <p> Выглядят они так: </p> <p> <code> <meta name = "description" content = "Это метаописание страницы"> </code> </p> <p> Вы можете найти метаописание для этой страницы, нажав «Ctrl + U», чтобы открыть исходный код HTML. </p> <p> Метаописание для каждой страницы будет выбрано автором содержания или веб-мастером.Это описание можно увидеть только на страницах результатов поисковой системы или когда страница опубликована в социальных сетях. </p> <p> Как и в случае с заголовками страниц, качество метаописания может повлиять на вероятность того, что кто-то щелкнет по указанной ссылке и посетит страницу. Если описание недостаточно оптимизировано или в некоторых случаях полностью отсутствует, то вероятность того, что страница будет нажата, уменьшается. </p> <p> В случае, если на странице нет метатега описания, Google может использовать текст, который он нашел на странице, который часто может быть просто словами, найденными в главном меню страницы, что приводит к бессмысленным описаниям страниц.</p> <p> Как и в случае с заголовками страниц, метаописания должны быть короткими, чтобы Google не усекал их. </p> <h4><span class="ez-toc-section" id="i-41"> Хорошие примеры мета-описания </span></h4> <p> </p> <p> </p> <p> </p> <h4><span class="ez-toc-section" id="i-42"> Примеры неверного мета-описания </span></h4> <p> </p> <p> </p> <p> </p> <p> </p> <h3><span class="ez-toc-section" id="i-43"> Почему важны заголовки страниц и мета-описания? </span></h3> <p> Недооптимизированные заголовки страниц и метаописания часто получают меньше кликов от пользователей поисковых систем, чем их хорошо оптимизированные аналоги.</p> <p> Вы бы щелкнули по ссылке для этой страницы, если бы заголовок страницы был просто «Заголовки и описания страниц»? Может быть, но <strong>, вероятно, не </strong>. </p> <p> «Что такое названия страниц и метаописания?» дает более высокий уровень уверенности в том, что ссылка на страницу дает ответ на вопрос. </p> <p> Точно так же, если бы метаописание для этой страницы конвертера валют было просто «Обменяй свои деньги на иностранную валюту», соблазнились бы вы щелкнуть ссылку? Может быть, но <strong>, вероятно, не </strong>.</p> <p> </p> <p> Привлекает ваше внимание преимущество возможности рассчитать обмен валюты «в реальном времени», что означает, что вы получаете простой метод определения наилучшего обменного курса для ваших денег. <strong> прямо сейчас </strong>. </p> <p> Сравните это с альтернативной страницей с недостаточно оптимизированным заголовком. </p> <p> </p> <p> Насколько велика вероятность того, что вы достаточно заботитесь о том, кто предоставляет свои услуги по обмену валюты, что вы увидите это описание и сразу <strong> привлечете </strong>, чтобы щелкнуть ссылку? <strong> Очень маловероятно </strong>.</p> <p> <strong> Неверные заголовки страниц и метаописания приводят к потере трафика на ваш сайт </strong>. </p> <p> Если вы преуспеете в повышении рейтинга своего веб-сайта и попадете на первую страницу, все эти усилия будут напрасными, если <strong> никто </strong> не будет нажимать на вашу ссылку. </p> <p> С этого момента считайте заголовок страницы и мета-описание всех ваших страниц как <strong> рекламу вашего бизнеса </strong>. Метаданные каждой страницы должны быть хорошо продуманными и привлекательными для вашей целевой аудитории.</p> <h3><span class="ez-toc-section" id="i-44"> Являются ли заголовки страниц и метаописания фактором ранжирования? </span></h3> <p> Заголовки страниц и метаописания не являются фактором ранжирования. Google подтвердил это еще в 2009 году — однако не удивляйтесь, если вы обнаружите противоречивую информацию по этому поводу. </p> В руководстве <p> Moz по факторам ранжирования на странице теги заголовков указаны как «второй по важности фактор на странице для SEO», а в руководстве Backlinko «200 факторов ранжирования» от Google указано использование ключевых слов в тегах заголовков в качестве фактора ранжирования.</p> <p> Хотя мы считаем, что теги заголовков и метаописания <strong> являются </strong> важной частью оптимизации веб-сайта для поисковых систем, мы считаем, что наиболее важным аспектом, который следует учитывать, является то, насколько хорошо оптимизированы теги заголовков и метаописания <strong> для кликов </strong>. </p> <p> Чем лучше оптимизированы теги заголовков и метаописания, тем выше вероятность нажатия на них. </p> <p> Иногда улучшение метаданных URL-адреса, который уже имеет хороший рейтинг, — это все, что нужно для увеличения количества посещений страницы в несколько раз.</p> <p> Также утверждается, что Google записывает, какие URL-адреса получают наибольшее количество кликов и удерживают наибольшее количество пользователей. Если пользователь нажимает на ссылку, уходит, а затем нажимает другую ссылку, мы называем это «pogoing». Google отрицает, что это фактор ранжирования, но мы полагаем, что вполне возможно, что он отслеживается и учитывается при ранжировании в некоторой степени. </p> <h3><span class="ez-toc-section" id="i-45"> Какой длины должны быть заголовки страниц и метаописания? </span></h3> <p> Важно не переусердствовать при написании заголовков страниц и метаописаний.Вы можете сказать много хорошего об оптимизируемой странице, но очень вероятно, что многое из того, что вы написали, никто не увидит. </p> <p> Если теги заголовка страницы или мета-теги описания слишком длинные, они обрезаются. В случае Google. Заголовки страниц обычно укорачиваются от 55 до 70 символов (или 600 пикселей). </p> <p> Нет точной точки, как вы можете видеть из диапазона выше, поскольку усечение обычно зависит от длины слов в теге заголовка или от типа <strong> используемого поискового запроса </strong>.</p> <p> Из-за этих переменных мы рекомендуем писать заголовки страниц длиной примерно 60 символов, но также изучать, как заголовки отображаются для вашего целевого поискового запроса (или «ключевой фразы»), чтобы вы могли оптимизировать свой заголовок в соответствии с требованиями Google. этого поискового запроса. </p> <p> Длина метаописания сильно варьируется, опять же, в зависимости от запроса. Мета-описания также могут быть усечены, поэтому мы рекомендуем писать их до предельного значения от 120 до 155 символов.</p> <p> Мета-описания на мобильных устройствах часто короче из-за ограничений по размеру экрана, поэтому мы предпочитаем писать мета-описания длиной 120–130 символов. Затем мы можем добавить еще 25-35-символьное предложение, такое как Уникальное торговое предложение (УТП), чтобы использовать эту дополнительную видимость при поиске на рабочем столе. </p> <p> Google изменял длину заголовков страниц и метаописаний несколько раз за последние несколько лет, включая период времени, когда длина метаописаний составляла 300 символов, а через несколько месяцев она вернулась к 155 символам.По этой причине мы советуем не только писать более короткие заголовки и описания страниц, но также часто проверять, как ваши страницы выглядят в результатах поиска Google, чтобы увидеть, как отображаются ваши метаданные. </p> <p> Вы можете найти руководство по написанию заголовков страниц и метаописаний для последней длины символа в нашем отдельном руководстве «Как писать заголовки страниц и метаописания для SEO». </p> <p> Мы также рекомендуем убедиться, что заголовки ваших страниц содержат не менее <strong>, </strong> из 30 символов, а ваши метаописания — не менее <strong>, </strong> из 70 символов.</p> <p> Чтобы не выходить за пределы длины, мы рекомендуем вам проверять свои метаданные с помощью инструмента заголовка страницы и мета-описания — наш личный фаворит от Пола Шапиро — так как он также включает проверку длины в пикселях. </p> <p> Если вы работаете с длинным списком метаданных, вы также можете записать их в электронную таблицу и использовать формулу LEN (формула для Google Таблиц, формула для Excel) для измерения количества символов. </p> <table> <tbody> <tr> <th rowspan="2"/> <th colspan="3"> мобильный </th> <th colspan="3"> Настольный </th> </tr> <tr> <td> Мин.Персонажи </td> <td> Макс. Персонажи </td> <td> Макс. Пиксели </td> <td> мин. Персонажи </td> <td> Макс. Персонажи </td> <td> Макс. Пиксели </td> </tr> <tr> <td> <strong> Название страницы </strong> </td> <td> 30 </td> <td> 60 </td> <td> 530 </td> <td> 30 </td> <td> 70 </td> <td> 600 </td> </tr> <tr> <td> <strong> Мета-описание </strong> </td> <td> 70 </td> <td> 130 </td> <td> 730 </td> <td> 70 </td> <td> 155 </td> <td> 928 </td> </tr> </tbody> </table> <p> </p> <h3><span class="ez-toc-section" id="_SEO"> Как писать заголовки страниц для SEO </span></h3> <p> Наше руководство «Как писать заголовки страниц и метаописания для SEO» включает самую свежую информацию о том, как писать заголовки страниц для SEO, но основы остаются неизменными независимо от ограничений по символам.</p> <ul> <li> Заголовки страниц должны быть короткими (см. Последние ограничения на длину символов) </li> <li> Они должны включать самые популярные ключевые фразы для страницы </li> <li> Они должны использовать поисковые «модификаторы», такие как «купить», «цены», «лучшее» и «руководство», чтобы соответствовать намерениям искателя </li> <li> Им следует использовать ваши уникальные точки продажи (где позволяет место) </li> </ul> <p> Важно стараться следовать всем вышеперечисленным рекомендациям, но, что важнее всего, очень важно видеть, как Google уже показывает заголовки для похожих запросов.Весьма вероятно, что другие веб-сайты уже тестировали то, что работает, поэтому не бойтесь следовать рекомендациям. </p> <p> Вам также следует отслеживать количество кликов, которые вы получаете по заголовкам новых страниц, чтобы видеть, работают ли они лучше или хуже, чем заголовки ваших предыдущих страниц. Вы можете сделать это, отслеживая свои клики в Google Search Console. </p> <p> Дополнительную информацию о написании заголовков страниц для SEO можно найти в нашем обновленном руководстве. </p> <table> <tbody> <tr> <th> Информационная </th> <th> Коммерческий </th> <th> транзакционный </th> <th> Навигация </th> </tr> <tr> <td> это </td> <td> лучшее </td> <td> книга </td> <td> «торговая марка» </td> </tr> <tr> <td> банка </td> <td> бюджет </td> <td> купить </td> <td> «торговая марка» войти в </td> </tr> <tr> <td> курс </td> <td> дешево </td> <td> демо </td> <td> приложение </td> </tr> <tr> <td> демонстраций </td> <td> по сравнению с </td> <td> аренда </td> <td> сайт </td> </tr> <tr> <td> примеры </td> <td> цена </td> <td> заказать </td> <td/> </tr> <tr> <td> направляющая </td> <td> верх </td> <td> покупка </td> <td/> </tr> <tr> <td> как </td> <td/> <td> аренда </td> <td/> </tr> <tr> <td> если </td> <td/> <td> резерв </td> <td/> </tr> <tr> <td> улучшить </td> <td/> <td> тест </td> <td/> </tr> <tr> <td> информация </td> <td/> <td> испытание </td> <td/> </tr> <tr> <td> узнать </td> <td/> <td/> <td/> </tr> <tr> <td> ресурс </td> <td/> <td/> <td/> </tr> <tr> <td> обзор </td> <td/> <td/> <td/> </tr> <tr> <td> характеристика </td> <td/> <td/> <td/> </tr> <tr> <td> подсказок </td> <td/> <td/> <td/> </tr> <tr> <td> уловок </td> <td/> <td/> <td/> </tr> <tr> <td> учебник </td> <td/> <td/> <td/> </tr> <tr> <td> какой </td> <td/> <td/> <td/> </tr> <tr> <td> где </td> <td/> <td/> <td/> </tr> <tr> <td> кто </td> <td/> <td/> <td/> </tr> <tr> <td> почему </td> <td/> <td/> <td/> </tr> </tbody> </table> <p> </p> <h3><span class="ez-toc-section" id="_SEO-2"> Как писать метаописания для SEO </span></h3> <p> Написание метаописания похоже на написание рекламы для вашего веб-сайта.Оно должно быть кратким и по существу, с максимально кратким выделением ваших уникальных торговых точек (УТП). У вас есть всего миллисекунды, чтобы привлечь внимание человека, поэтому вы должны быть краткими. </p> <p> Ограничения по символам также существуют для метаописаний, и они различаются между поисковыми запросами на мобильных устройствах и компьютерами. По этой причине мы предлагаем составить ваше метаописание из двух частей — первой для мобильного поиска и второй части для поиска на компьютере. </p> <ul> <li> Метаописания должны быть короткими (см. Последние ограничения на длину символов) </li> <li> Они должны подчеркнуть ваши уникальные точки продажи </li> <li> Они должны точно резюмировать содержание </li> </ul> <p> Дополнительные рекомендации по написанию метаописаний для SEO см. В нашем обновленном руководстве.</p> <h3><span class="ez-toc-section" id="i-46"> Какие названия страниц и метаописания следует оптимизировать в первую очередь </span></h3> <p> Если вы водопроводчик и имеете веб-сайт с 15 страницами, не имеет значения, в каком порядке вы пишете заголовки новых страниц и метаописания, но если вы владеете или управляете магазином электронной коммерции, у вас могут быть тысячи страниц метаданных для записывать. </p> <p> Лучший подход — составить список всех URL-адресов вашего веб-сайта и трафика, который каждый из них получает (что вы можете сделать с помощью Google Analytics API в Screaming Frog).Затем вы можете отсортировать этот список по наибольшему количеству посещений или сеансов на странице. Теперь у вас есть список ваших самых важных страниц. </p> <p> Начните с просмотра и переписывания заголовков страниц и метаописаний для первых 10 страниц, затем просмотрите их через несколько дней или недель после изменения и посмотрите, увеличились или уменьшились ваши клики и органический трафик на страницу. </p> <p> В качестве альтернативы, с тем же списком страниц, вы можете посмотреть количество поисков наилучшего поискового запроса для каждой страницы (путем исследования ключевых слов) и начать с написания новых метаданных, основанных на наиболее прибыльных запросах.</p> <h3><span class="ez-toc-section" id="i-47"> Как мне добавить заголовки страниц и метаописания на мой веб-сайт? </span></h3> <p> HTML-теги для заголовков страниц (HTML-тег заголовка) и мета-описаний (HTML-метатег) легко написать. Для их написания вам понадобится только программа заметок на рабочем столе вашего компьютера, но их установка может быть сложной (в зависимости от системы, в которой построен ваш веб-сайт). </p> <p> Каждая система управления контентом (CMS) имеет разные методы добавления метаданных. WordPress, например, требует дополнительного плагина, чтобы упростить добавление заголовков страниц и метаописаний.Shopify, с другой стороны, имеет встроенные опции для легкого добавления метаданных на каждую страницу продукта. </p> <p> Если ваш веб-сайт построен с использованием WordPress, плагин Yoast SEO является самым простым в установке и использовании, хотя новичок Rank Math впечатлил многих SEO-специалистов своим простым в использовании плагином. </p> <p> Ниже приведены руководства для наиболее часто используемых CMS: </p> <h3><span class="ez-toc-section" id="_Google"> Почему Google не использует заголовок моей страницы или метаописание? </span></h3> <p> Бывают случаи, когда Google не может использовать новый заголовок страницы или метаописание, которое вы загрузили.Это обычное дело, так что не будьте слишком забиты. </p> <p> Есть несколько причин, почему это может быть так, но наиболее типичная из них заключается в том, что Google определил, что содержимое страницы содержит информацию, которую ищет человек, но заголовок страницы или мета-описание для нее не подходят. достаточно, чтобы заработать клик. </p> <p> Google использует доступное содержимое этой страницы для динамического создания нового заголовка страницы и метаописания, которое, по его мнению, с большей вероятностью получит клик от посетителя, чтобы он посетил эту страницу.</p> <p> Первая причина, по которой это может происходить, заключается в том, что заголовок страницы или метаописание недостаточно оптимизированы. Вторая причина заключается в том, что страница может содержать множество разных тем или несколько ответов на несколько вопросов, поэтому поисковая система создает новые метаданные для <strong> этой конкретной части страницы </strong>. </p> <p> По этой причине мы рекомендуем просматривать поисковые запросы для каждой страницы, чтобы узнать, есть ли другие ключевые фразы, по которым появляется страница, и, если они есть, просмотреть свои метаданные и соответственно использовать ключевые слова в заголовке или описании.</p> <p> Другая причина, по которой Google может не использовать ваш новый заголовок страницы или метаописание, может заключаться в том, что он не сканировал страницу повторно с момента последнего обновления. Это очень распространено для крупных веб-сайтов, где некоторые страницы не сканируются ежедневно, еженедельно или даже ежемесячно. </p> <p> Лучшее, что можно сделать, — это заставить Google повторно сканировать URL-адрес с помощью Google Search Console. Затем метаданные должны обновиться в результатах поиска Google. Если это не так, возможно, стоит поговорить со специалистом по SEO, чтобы определить, есть ли в исходном коде страницы что-либо, что может препятствовать использованию правильных метаданных.</p> <h2><span class="ez-toc-section" id="_SEO-3"> Метаописаний | Как использовать метаописания для SEO </span></h2> <ol> <li> WooRank </li> <li> Руководства по SEO </li> <li> Как использовать метаописания для SEO </li> </ol> <p> В старые времена Интернета поисковые системы использовали текст мета-описания при ранжировании страниц по запросам.Фактически, китайская поисковая система Baidu до сих пор делает это. Однако в современном SEO очевидно, что это уже не так. </p> <p> Итак, какую роль сегодня играют метаописания в SEO? </p> <p> В этой статье мы рассмотрим то, что вам нужно знать, чтобы извлечь максимальную пользу из описаний и повысить эффективность SEO: </p> <p> Метаописания — это теги HTML, которые появляются в разделе заголовка веб-страницы. Содержимое тега содержит описание страницы и ее содержимого.В контексте SEO метаописания должны иметь длину около 160 символов. </p> <p> Правильно реализованное метаописание в HTML <code> <head> </code> выглядит так: </p> <pre> <code> <meta name = ”description” content = ”Краткое описание того, о чем ваша страница. Будьте как можно более информативными, оставаясь краткими ».> </code> </pre> <p> Вы можете просмотреть описание страницы, щелкнув страницу правой кнопкой мыши и выбрав «Просмотреть источник». Вот как выглядит мета-тег описания для этой страницы: </p> <p> </p> <h4><span class="ez-toc-section" id="i-48"> Что делают метаописания? </span></h4> <p> Google использует метаописания при отображении страницы в результатах поиска.Он объединяет описание, заголовок страницы и URL-адрес из поискового фрагмента страницы. </p> <p> Вот что дает описание в действии в Google: </p> <p> </p> <p> А в поисковой выдаче Bing: </p> <p> </p> <p> Помните, что содержание вашего тега описания на самом деле является всего лишь предложением для Google. Google будет отображать во фрагменте контент, который, по его мнению, наиболее релевантен и полезен для поискового намерения пользователя на основе его запроса. </p> <p> Иногда это означает ваше мета-описание, иногда это означает части содержимого вашей страницы.</p> <p> Мета-описания не влияют напрямую на рейтинг страницы в результатах поиска, но все же могут иметь большое влияние на поисковую оптимизацию. Google действительно немного полагается на описания, чтобы определить релевантность страницы запросу. Тем не менее, самая большая роль, которую они играют, — это <strong>, поощряя переход по ссылкам и время ожидания </strong> для пользователей. </p> <h4><span class="ez-toc-section" id="_CTR"> Повысьте CTR с помощью метаописаний </span></h4> <p> Поскольку метаописания часто включаются в поисковый фрагмент, это первое взаимодействие человека с вашей страницей и ваша возможность побудить его перейти по ссылке на вашу страницу.</p> <p> Думайте о своем поисковом фрагменте как о цифровом рекламном щите для вашего сайта. Они побуждают пользователей перейти на ваш сайт и, в зависимости от того, соответствует ли пользовательский опыт ожиданиям, установленным в описаниях, помогает им оставаться там. </p> <p> Существует множество конкретных передовых практик для написания метаописаний, но общие рекомендации включают: </p> <ol> <li> <p> <strong> Ключевые слова: </strong> Google выделяет жирным шрифтом слова в метаописаниях, которые соответствуют словам, использованным в запросе пользователя.Использование ключевых слов в ваших метаописаниях убедит пользователей, что ваш контент содержит информацию, которую они ищут, и поможет привлечь внимание к вашему сниппету. </p> </li> <li> <p> <strong> Сообщите свою ценность: </strong> Думайте об этом как о написании текста объявления для обычного поиска. Используйте привлекательную описательную копию, чтобы побудить пользователей перейти на ваш сайт. Для некоммерческих запросов ответьте на целевой вопрос в описании, чтобы он появился в поисковой выдаче. </p> <p> <strong> Примечание. </strong> Если вы оптимизируете страницы для конверсии или иным образом нацеливаетесь на заинтересованных пользователей, попробуйте использовать такие слова, как «предложения», «дешево» или «бесплатная доставка», чтобы стимулировать клики.Это может показаться вам спамом, но на самом деле поможет. Просто убедитесь, что вы действительно предлагаете те предложения, которые рекламируете. </p> </li> <li> <p> <strong> Используйте интерактивный язык: </strong> Используйте контент, предназначенный для поощрения пользователей к щелчку. Это не обязательно означает добавление «щелкните здесь сейчас» к вашему описанию, а скорее описывает цель, которую будет достигать пользователь. Что-то вроде «узнайте, что такое метаописания, почему они важны и как их использовать» или «купите лучший ветрозащитный зонт». </p> </li> </ol> <h4><span class="ez-toc-section" id="i-49"> Предотвращение высоких показателей отказов с помощью точных метаописаний </span></h4> <p> Хорошо написанное метаописание расскажет человеку, о чем страница и что он на ней получит. <em> до того, как </em> нажмет.Повышение CTR вашей страницы полезно, но не так полезно, если весь этот новый трафик думает, что нажимает на страницу для чего-то еще. </p> <p> Таким образом, хотя ваши метаописания должны быть убедительными и действенными, они также должны быть точными <em> </em>. </p> <p> Если вы не предлагаете бесплатную доставку или специальные скидки, или если ваш контент не отвечает на определенный вопрос, не указывайте иное в своих описаниях. Кроме того, если вы солгаете своим пользователям, они не только быстро покинут вашу страницу, но и, вероятно, потеряют к вам доверие и никогда не вернутся.</p> <p> Кроме того, если Google считает, что ваше метаописание не точно отражает содержание страницы или не имеет отношения к запросу, он просто заменит ваше описание своим собственным во фрагменте. Таким образом, создание точных описаний повышает вероятность того, что Google выберет то, что вам нужно. </p> <p> Изменение метаописаний будет зависеть от используемой вами системы управления контентом. Поскольку WordPress в настоящее время используется примерно на 25% всех веб-сайтов в Интернете, мы рассмотрим, как изменить метаописания для ваших страниц с помощью этой CMS.</p> <h4><span class="ez-toc-section" id="_WordPress"> Добавление метаописаний в WordPress </span></h4> <p> По умолчанию WordPress не включает метатеги на вашем сайте. Причина этого в том, что каждое метаописание будет уникальным, то есть каждый тег метаописания будет отличаться. </p> <p> Есть два способа добавить метаописания на ваши страницы WordPress: </p> <ul> <li> Плагин (плагин Yoast SEO — отличный вариант). Это рекомендуется. </li> <li> Отредактируйте файл шаблона <code> header.php </code> в своей теме WordPress.</li> </ul> <p> После установки плагина Yoast SEO выполните следующие действия, чтобы отредактировать метаописания для своих страниц: </p> <ol> <li> <p> Создайте новую страницу или сообщение на своем веб-сайте. </p> </li> <li> <p> После создания сообщения прокрутите страницу вниз до плагина Yoast SEO </p> </li> <li> <p> Нажмите кнопку «Изменить фрагмент» под фрагментом предварительного просмотра страницы: </p> </li> <li> <p> Напишите свое описание в поле мета-описания. Оптимизируйте свои метаописания с помощью ключевых слов в соответствии с лучшими практиками SEO.</p> </li> </ol> <h4><span class="ez-toc-section" id="i-50"> Добавление метаописаний без плагина </span></h4> <p> Можно добавить метаописания на ваш сайт WordPress без использования плагина. Однако это не рекомендуется, потому что этот метод не позволяет настраивать метаописания для каждой страницы — проблема, которая может быть отмечена поисковыми системами как повторяющееся содержание. </p> <p> По этой причине мы не рекомендуем использовать этот метод для добавления метаописаний на ваш сайт WordPress. </p> <p> Есть еще одна причина, по которой вы должны приложить усилия к своим метаописаниям: социальные сети.Большинство платформ социальных сетей используют тег заголовка и метаописания при отображении страниц, которыми пользуются пользователи. </p> <p> </p> <p> На самом деле это не повлияет на ваш рейтинг, но хорошие метаописания могут стимулировать взаимодействие пользователей и посещения вашего веб-сайта, как и в результатах поиска. Итак, как видите, написание хорошего метаописания для ваших страниц поможет улучшить трафик по нескольким маркетинговым каналам и улучшить поведение пользователей на странице. </p> <h2><span class="ez-toc-section" id="-_Sitebulb"> Мета-описание пусто | Sitebulb </span></h2> <p> Низкий Этот совет имеет самое низкое значение, и к нему следует обращаться только в том случае, если нет более серьезных проблем, которые не были решены.Возможная проблема Этот совет вряд ли повлияет на сайт в данный момент, но его следует изучить, поскольку он может вызвать проблемы в будущем. </p> <p> Это означает, что у рассматриваемого URL есть пустое метаописание. </p> <h3><span class="ez-toc-section" id="i-51"> Почему это важно? </span></h3> <p> Метаописание считается важным, чтобы помочь пользователям быстро понять, какой контент они могут ожидать найти на странице при переходе со страницы результатов поисковой системы. Хорошо написанные метаописания обычно обеспечивают более высокий рейтинг кликов.</p> <p> Если метаописание пусто, это означает упущенную возможность оптимизации. Кроме того, это означает, что поисковые системы напишут за вас метаописание, иногда с довольно плачевными результатами (в примере ниже показана страница на нашем сайте без установленного метаописания …). </p> <p> </p> <h3><span class="ez-toc-section" id="i-52"> Что проверяет подсказка? </span></h3> <p> Эта подсказка сработает для любого внутреннего URL-адреса, имеющего метаописание, но не имеющего значения. </p> <h4><span class="ez-toc-section" id="i-53"> Примеры, запускающие этот совет </span></h4> <p> Этот совет будет срабатывать для любого URL-адреса, у которого есть пустое метаописание в <head>: </p> <pre> <! Doctype html> <br/> <html lang = "en"> <br/> <head> <br/> <meta name = "description" content = ""> <br/>... <br/> </head> <br/> <body> ... </body> <br/> </html> </pre> <h3><span class="ez-toc-section" id="i-54"> Почему эта подсказка помечена как «Возможная проблема»? </span></h3> <p> Этот совет является «потенциальной проблемой», что означает, что он вряд ли повлияет на сайт в данный момент, но его следует изучить, так как это может вызвать проблемы в будущем. </p> <p> Метаописания не влияют на SEO, однако они влияют на CTR результатов поиска, поэтому в целом рекомендуется их устанавливать. </p> <p> Однако в некоторых ситуациях или для определенных наборов страниц вам может показаться, что написание метаописания для каждой отдельной страницы — не лучшее использование ресурсов.</p> <h3><span class="ez-toc-section" id="i-55"> Дополнительная литература </span></h3> <h2><span class="ez-toc-section" id="i-56"> Что такое метатеги — и как их оптимизировать </span></h2> <p> <strong> Определение </strong>: Мета-теги — это форма метаданных, которые описывают содержимое веб-страницы для поисковых систем в ее исходном коде. Важные метатеги для веб-сайтов электронной коммерции включают мета-заголовок и мета-описание, которые видны на страницах результатов поисковой системы (SERP) и влияют на органический рейтинг. </p> <h5><span class="ez-toc-section" id="i-57"> Расположение мета-тегов </span></h5> <p> Основное различие между тегами, используемыми в сообщениях блога, и метатегами — это расположение.Мета-теги всегда существуют строго внутри HTML-тегов, обычно в верхней части страницы. </p> <h5><span class="ez-toc-section" id="i-58"> Мета-теги, как они появляются в исходном коде </span></h5> <p> Примером метатегов, как они появляются в исходном коде, является следующее: <meta name = "keywords" content = "france, francais, french, la poisson, european union" > </p> <h5><span class="ez-toc-section" id="i-59"> Важные метатеги для онлайн-бизнеса </span></h5> <p> Чтобы узнать, использует ли какая-либо конкретная веб-страница метатеги, щелкните страницу правой кнопкой мыши. Выберите «Просмотр источника страницы».Заголовок страницы показывает, используются ли какие-либо метатеги. </p> <p> Существует четыре основных типа: </p> <ul> <li> <strong> Тег заголовка </strong> представляет информацию, которую люди видят в верхней части браузера и на страницах результатов поисковой системы. <strong> Рекомендации по использованию тегов заголовков: </strong> <ul> <li> Включено целевое ключевое слово, желательно ближе к первой половине заголовка </li> <li> Заканчивается на название бренда </li> <li> Ключевые слова, разделенные двоеточием «:», тире «-» или вертикальной чертой «|» </li> <li> Длина заголовка не должна превышать 60-70 символов.Алгоритм Google отсекает заголовки в зависимости от размера пикселей, что делает невозможным определение точного ограничения на количество символов из-за разного размера букв. </li> </ul> </li> <li> <strong> Мета-описание Атрибут </strong> — это краткое описание страницы, которое появляется под заголовком в поисковой выдаче. Хотя это не влияет на рейтинг, метаописания могут влиять на рейтинг кликов. <strong> Эффективные метаописания: </strong> <ul> <li> Естественно включает целевое ключевое слово и побуждает пользователей переходить по ссылке.</li> <li> Не отнимают много времени от имени продавца, поскольку <strong> Google не гарантирует использование мета-описания в поисковой выдаче </strong>. Поисковая система иногда алгоритмически использует текст на странице вместо заранее написанного описания. Напишите хорошо написанные описания, которые имеют отношение к целевым запросам, чтобы максимально увеличить вероятность того, что Google будет использовать их в поисковой выдаче. </li> </ul> </li> <li> <strong> Атрибуты </strong> мета-роботов сообщают курс действий поисковым роботам (также известным как «пауки»).Необходимо знать две основные ценности: <ul> <li> <strong> «noindex» </strong> — Указывает поисковым системам не индексировать страницу, чтобы она не отображалась в обычных результатах поиска. Это часто делается для незавершенных страниц, содержащих дублированный контент, </li> <li> <strong> «nofollow» — </strong> Эти страницы проиндексированы, но не имеют значения страницы (в просторечии называемой «ссылочной массой») для связанной страницы. Атрибут <em> nofollow </em> используется для партнерских кампаний, обширных внутренних ссылок и любых других типов платных ссылок.</li> </ul> </li> </ul> <p> <strong> Кто угодно может создавать эффективные метатеги </strong> </p> <p> Мета-теги часто контролируются экспертом по SEO, но их может заполнить любой, кто твердо разбирается в передовых методах работы с веб-сайтом. Как только «шаблон» установлен — как отображается название бренда и как определять основные ключевые слова — его может заполнить любой, кто работает с онлайн-бизнесом. Системы управления контентом (CMS) и платформы электронной коммерции делают изменение метатегов особенно простым, с полями ввода для установки и стандартизации метатегов в интернет-магазине.</p> <p> <em> <strong> Узнайте больше об оптимизации мета-тегов и их изменении в магазине BigCommerce от наших специалистов службы поддержки: </strong> </em> <strong> Использование заголовков страниц и метаописаний </strong> </p> <h2><span class="ez-toc-section" id="i-60"> Когда (и когда нет) писать метаописания </span></h2> <p> Много Старое обсуждение SEO было потрачено на метаописания — длину, содержание, использование ключевых слов и т. д. </p> <p> Теперь вопрос в том, важны ли метаописания? И влияет ли изменение метаописаний на SEO? </p> <p> Вы провели аудит сайта со сканированием, используя свой любимый инструмент SEO.Все выглядело хорошо, но затем вы получаете предупреждение о том, что на сотнях, тысячах или миллионах страниц рассматриваемого веб-сайта отсутствуют метаописания. </p> <p> Вы паникуете? </p> <p> Вы можете сказать своему менеджеру, что в следующем месяце вы должны потратить голову вниз на написание 155-символьных описаний для каждой веб-страницы на сайте. Но действительно ли это лучшее использование вашего времени? </p> <p> Некоторым веб-страницам не нужно метаописание. Вот почему. </p> <h3><span class="ez-toc-section" id="5"> 5 причин, по которым вы не можете писать это метаописание </span></h3> <h4><span class="ez-toc-section" id="Google"> Google постоянно тестирует и меняет способ отображения результатов поиска </span></h4> <p> Ограничение на отображение метаописаний менялось несколько раз.От ~ 150–165 символов до 260–275 символов, затем обратно до 165 символов. В индустрии SEO появились лучшие практики в отношении того, как долго должны быть метаописания. </p> <p> Объявление </p> <p> Продолжить чтение ниже </p> <p> Эти изменения привели к тому, что многие результаты, которые были оптимизированы для предыдущей более короткой версии, выглядели неоптимальными. Затем, как только люди изменили метаописания на новую длину, ну… Google вернул его обратно. </p> <p> Оптимизация этих изменений требует значительного количества времени, и для большинства веб-сайтов было бы лучше в течение этого периода тестирования без метаописания, чем с слишком длинным или слишком коротким.</p> <h4><span class="ez-toc-section" id="i-61"> Организации имеют ограниченные ресурсы </span></h4> <p> Хотя Google рекомендует вам «Убедитесь, что каждая страница на вашем сайте имеет мета-описание», они также заявляют, что они используют тег при создании страниц результатов поиска в лучшем случае нечасто. </p> <blockquote> <p> «Google иногда будет использовать тег описания <meta> со страницы для создания фрагмента результатов поиска, если мы думаем, что он дает пользователям более точное описание, чем это было бы возможно только на основе содержимого страницы». </p> </blockquote> <p> «Иногда» там много работы.</p> <p> Лучше ли вам потратить время на оптимизацию метаописаний, которые только иногда используются поисковыми системами, или на оптимизацию контента, который всегда используется поисковыми системами и пользователями? </p> <p> Объявление </p> <p> Продолжить чтение ниже </p> <p> Метаописания — это то, на чем нужно сфокусироваться выборочно. Это означает, что иногда их тоже можно выборочно игнорировать. </p> <h4><span class="ez-toc-section" id="Google-2"> Google обычно пишет свой собственный фрагмент описания </span></h4> <p> Google почти всегда создает свой собственный фрагмент описания, даже если вы предоставляете мета-описание.</p> <p> Исследование Yoast, сравнивавшее до и после изменения длины описания Google, показало, что в двух третях случаев Google использовал слова из первого абзаца контента на странице для создания описания для фрагмента. </p> <p> Ваше время может быть лучше потрачено на оптимизацию первого абзаца, а не на оптимизацию мета-тегов описания, если цель состоит в том, чтобы повлиять на фрагменты описания. </p> <h4><span class="ez-toc-section" id="_Google-2"> Принуждение Google к созданию фрагментов описания часто является большим делом </span></h4> <p> Ваше мета-описание, преобразованное в слова, включенные во фрагмент в поисковой выдаче, имеет столько же шансов оттолкнуть посетителя, сколько приветствует его.</p> <p> Джон Мюллер из Google сказал, что одна из причин, по которой они переписывают метаописания, заключается в том, что они хотят точно сопоставить поисковый запрос со страницей. </p> <p> Чем больше вы скажете во фрагменте, тем больше шансов уменьшить загадку того, что стоит за кликом, хорошо, но часто плохо. </p> <p> Многие сообщения в блогах, например, основаны на большом количестве длинных ключевых слов и отвечают на множество очень разных вопросов в рамках содержания одного сообщения. </p> <p> Допустим, вы пишете статью о яблоках, в которой также есть хорошее описание апельсинов.Ваше метаописание посвящено яблокам, и пользователи, которые ищут информацию об апельсинах, будут думать, что на вашем сайте такой информации нет. </p> <p> Имея статическое описание, фрагмент результата поиска с меньшей вероятностью будет содержать ключевые слова, которые использовал поисковик. Это рискует оказаться менее актуальным, чем фрагмент кода, созданный Google. </p> <h4><span class="ez-toc-section" id="_SEO-4"> Не все страницы одинаково важны для SEO </span></h4> <p> На крупных веб-сайтах часто есть тысячи или миллионы страниц, которые никогда не будут обеспечивать значительный объем естественного поискового трафика.Подумайте о своей политике конфиденциальности — сколько обычных посетителей у вас там? </p> <p> Реклама </p> <p> Продолжить чтение ниже </p> <p> Поддерживать вручную или даже программно метаописания на веб-страницах, которые не имеют потенциала для ранжирования, — пустая трата времени. </p> <p> Не позволяйте консультанту или набору инструментов обмануть вас; вам не нужно метаописание на каждой странице или даже рядом с каждой страницей. </p> <p> Помните, что все содержимое требует обслуживания в будущем. Было бы гораздо лучше не иметь метаописания, чем плохое или устаревшее.</p> <p> Проверяя свой сайт на предмет метаописаний, различите те страницы, которые в них нуждаются, и не нуждаетесь в них, и поддерживайте только те, которые необходимы. </p> <p> Итак, когда вам нужно метаописание? </p> <h3><span class="ez-toc-section" id="4"> 4 раза, когда вам абсолютно необходимо предоставить метаописание </span></h3> <h4><span class="ez-toc-section" id="i-62"> Домашняя страница </span></h4> <p> Ваша домашняя страница, вероятно, является вашей самой важной веб-страницей, поэтому домашняя страница заслуживает отличного метаописания. </p> <p> Многие домашние страницы имеют навигационный характер, содержат больше изображений и элементов дизайна, а также меньше текста абзацев по сравнению с другими страницами сайта, что означает, что потребность в метаописании возрастает.Чем меньше текста на странице, тем больше вероятность, что ей понадобится метаописание. </p> <p> Реклама </p> <p> Продолжить чтение ниже </p> <p> Если вы управляете веб-сайтом известного бренда, метаописание домашней страницы дает возможность повлиять на восприятие компании непосредственно на странице результатов поиска. </p> <h4><span class="ez-toc-section" id="i-63"> Страницы продуктов и категорий </span></h4> <p> Если ваш веб-сайт создан для помощи вашей организации в продажах, ваши страницы продуктов и категорий, вероятно, являются наиболее важными страницами на вашем сайте для обслуживания интереса потенциальных клиентов на поздней стадии.</p> <p> Это самые важные страницы, на которых нужно работать правильно. Их определенно стоит потратить как можно больше времени на точную настройку. </p> <h4><span class="ez-toc-section" id="_Google-3"> Контент, который видят в Google </span></h4> <p> Если на вашем веб-сайте есть 2000 старых сообщений в блогах, но только 10% лучших привлекают значительный поисковый трафик, тогда сосредоточьтесь на них. </p> <p> Улучшение метаописания для старого контента, который не ранжируется (и никогда не будет ранжироваться в текущем состоянии) вообще не улучшит ваш трафик или сайт — хотя ваш инструмент SEO может сказать вам иное!</p> <p> Улучшите описания страниц, у которых много показов. </p> <h4><span class="ez-toc-section" id="i-64"> Страниц, найденных в обычном поиске, но без текстового содержимого </span></h4> <p> На многих веб-страницах, которые обслуживают встроенные видео, виджеты и приложения, отсутствует описательный текст, который Google мог бы использовать для описания. </p> <p> Реклама </p> <p> Продолжить чтение ниже </p> <p> Точно так же для страниц ресурсов и других страниц, которые в основном представляют собой просто список ссылок, Google не из чего извлечь, чтобы создать оптимальное описание.</p> <p> В этих случаях веб-сайт должен обязательно предоставлять метаописание для использования поисковыми системами. </p> <p> И снова золотое правило: чем меньше текста на странице, тем важнее становится мета-описание. </p> <h3> </h3><b> Знайте, когда игнорировать предупреждения, передовые методы и рекомендации </b> </h3> <p> В идеальном мире, где у специалиста по поисковой оптимизации есть столько членов команды, сколько необходимо, чтобы вручную создавать метаописания и изменять их на множестве страниц в одно мгновение В этом случае все веб-страницы должны иметь метаописания.</p> <p> Однако мы все ограничены во времени и должны выбирать, какая тактика имеет смысл. Важно еще раз подумать, стоит ли потратить на эти передовые методы время. </p> <p> Это спорно, но факт. Если вы не собираетесь ранжироваться на странице, метаописания просто не стоят усилий по обслуживанию. </p> <p> Реклама </p> <p> Продолжить чтение ниже </p> <p> Возможно, вам лучше будет поощрять Google создавать фрагменты описания. </p> <p> <strong> Дополнительные ресурсы: </strong> </p> <h2><span class="ez-toc-section" id="_SEO-5"> Добавьте заголовок SEO и мета-описание </span></h2> <p> В этом видео используется старый интерфейс.Скоро появится обновленная версия! </p> <p> SEO-заголовок и метаописание — это то, что обычно появляется, когда ваша страница появляется в Google или любой другой поисковой системе. Вы можете обновить <strong> настройки SEO </strong> для каждой страницы вашего проекта из <strong> Настройки страницы </strong>. После обновления информации о SEO не забудьте опубликовать проект, чтобы изменения вступили в силу. </p> <h5><span class="ez-toc-section" id="i-65"> В этом уроке </span></h5> <h3><span class="ez-toc-section" id="_SEO-6"> Настройки SEO </span></h3> <p> Откройте настройки <em> страницы </em> из панели <strong> Страницы </strong> и добавьте мета-заголовок и описание SEO в разделе <strong> Настройки SEO </strong>.</p> Настройки SEO для домашней страницы на панели настроек страниц <h3><span class="ez-toc-section" id="i-66"> Тег заголовка </span></h3> <p> Тег заголовка <strong> </strong> часто используется в качестве заголовка в результатах поиска. Рекомендуется сделать его короче 60 символов. </p> <h3><span class="ez-toc-section" id="i-67"> Мета-описание </span></h3> <p> Мета-описание не всегда используется в результатах. Иногда Google показывает фрагмент веб-страницы, содержащий поисковый запрос, введенный в Google. </p> <p> Но если ваше метаописание действительно появляется, оно действительно может помочь убедить людей перейти на вашу страницу, особенно если оно имеет отношение к содержанию вашей страницы.</p> <h5><span class="ez-toc-section" id="i-68"> Полезно знать </span></h5> <ul role="list"> <li> Стоит отметить, что, хотя здесь нет ограничения по длине, поисковые системы будут обрезать длинные заголовки и описания. </li> <li> Также важно противостоять желанию заполнить эти поля ключевыми словами, чтобы попытаться сфальсифицировать результаты поиска. <strong> Помните </strong>: Google игнорирует (а в некоторых случаях наказывает) обманные действия. </li> </ul> <h3><span class="ez-toc-section" id="_SEO-7"> Страница коллекции SEO-заголовок и описание </span></h3> <p> Для страниц коллекции вы определите шаблон, который все страницы в коллекции будут использовать для своего тега заголовка и мета-описания.Таким образом, все элементы коллекции будут автоматически извлекать свои настройки SEO из каждой коллекции в соответствии с заданным вами шаблоном. </p> <p> Чтобы определить свой шаблон, перейдите к настройкам шаблона <em> коллекции </em> на панели страниц <em> </em> и добавьте поля <em> коллекции </em>, которые вы хотите использовать для мета-заголовка <em> SEO и описания </em> в разделе <em> Настройки SEO </em>. </p> <h5><span class="ez-toc-section" id="i-69"> Пример </span></h5> <p> Вы можете использовать поле «name» в поле <strong> Title tag </strong>, чтобы вытащить его прямо из вашей коллекции «Сообщения блога».Теперь каждая страница сообщения в блоге будет иметь тег Title, соответствующий имени или заголовку этого сообщения в блоге. </p> <p> Что касается мета-описания, сделайте то же самое. Ссылайтесь на «краткое изложение» вашего сообщения в блоге. </p> <p> Вы также можете комбинировать поля и даже вводить произвольный текст для работы с этими полями — они похожи на переменные, между которыми вы можете переключаться, чтобы вы могли предварительно просмотреть все элементы вашей коллекции. </p> <blockquote> <strong> Полезно знать: </strong> После обновления информации о SEO не забудьте опубликовать свой проект, чтобы изменения вступили в силу. </div> <footer class="entry-footer"> <span><i class="fa fa-folder"></i> <a href="https://russia-dropshipping.ru/category/raznoe" rel="category tag">Разное</a></span><span><i class="fa fa-link"></i><a href="https://russia-dropshipping.ru/raznoe/html-meta-opisanie-meta-tegi-dlya-sajta-chto-takoe-meta-tegi-kakie-byvayut-dlya-chego-propisyvat-klyuchevye-slova-v-meta-tegi-2.html" rel="bookmark"> permalink</a></span> </footer> </article> <nav class="navigation post-navigation clearfix" role="navigation"> <h1 class="screen-reader-text">Post navigation</h1> <div class="nav-links"> <div class="nav-previous"><a href="https://russia-dropshipping.ru/raznoe/kak-prodvigat-meropriyatie-na-fb-sozdanie-reklamy-meropriyatiya-na-stranicze-facebook.html" rel="prev"><i class="fa fa-long-arrow-left"></i> Как продвигать мероприятие на фб: Создание рекламы мероприятия на Странице Facebook</a></div><div class="nav-next"><a href="https://russia-dropshipping.ru/raznoe/konkurs-v-instagram-random-vybor-pobeditelya-v-instagram-youtube-i-vkontakte-onlajn-randomajzer-%e2%84%961.html" rel="next">Конкурс в инстаграм рандом: Выбор победителя в Инстаграм, Youtube и Вконтакте. Онлайн рандомайзер №1 <i class="fa fa-long-arrow-right"></i></a></div> </div> </nav> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe/html-meta-opisanie-meta-tegi-dlya-sajta-chto-takoe-meta-tegi-kakie-byvayut-dlya-chego-propisyvat-klyuchevye-slova-v-meta-tegi-2.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://russia-dropshipping.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required='required' /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required='required' /></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" /></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='27869' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </div> </main> </div> <div id="secondary" class="widget-area" role="complementary"> <aside id="search-2" class="widget widget_search"><form role="search" method="get" class="search-form" action="https://russia-dropshipping.ru/"> <label> <span class="screen-reader-text">Найти:</span> <input type="search" class="search-field" placeholder="Поиск…" value="" name="s" /> </label> <input type="submit" class="search-submit" value="Поиск" /> </form></aside><aside id="custom_html-5" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="6943711592" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div></aside><aside id="categories-3" class="widget widget_categories"><h3 class="widget-title">Рубрики</h3> <ul> <li class="cat-item cat-item-7"><a href="https://russia-dropshipping.ru/category/seo">Seo</a> </li> <li class="cat-item cat-item-15"><a href="https://russia-dropshipping.ru/category/instrument-2">Инструмент</a> </li> <li class="cat-item cat-item-9"><a href="https://russia-dropshipping.ru/category/instrument">Инструменты</a> </li> <li class="cat-item cat-item-16"><a href="https://russia-dropshipping.ru/category/program-2">Програм</a> </li> <li class="cat-item cat-item-4"><a href="https://russia-dropshipping.ru/category/program">Программы</a> </li> <li class="cat-item cat-item-14"><a href="https://russia-dropshipping.ru/category/prodvizh-2">Продвиж</a> </li> <li class="cat-item cat-item-5"><a href="https://russia-dropshipping.ru/category/prodvizh">Продвижение</a> </li> <li class="cat-item cat-item-3"><a href="https://russia-dropshipping.ru/category/raznoe">Разное</a> </li> <li class="cat-item cat-item-13"><a href="https://russia-dropshipping.ru/category/semant-2">Семант</a> </li> <li class="cat-item cat-item-8"><a href="https://russia-dropshipping.ru/category/semant">Семантика</a> </li> <li class="cat-item cat-item-17"><a href="https://russia-dropshipping.ru/category/sovet-2">Совет</a> </li> <li class="cat-item cat-item-11"><a href="https://russia-dropshipping.ru/category/sovet">Советы</a> </li> <li class="cat-item cat-item-12"><a href="https://russia-dropshipping.ru/category/sozdan-2">Создан</a> </li> <li class="cat-item cat-item-6"><a href="https://russia-dropshipping.ru/category/sozdan">Создание</a> </li> <li class="cat-item cat-item-18"><a href="https://russia-dropshipping.ru/category/sxem-2">Схем</a> </li> <li class="cat-item cat-item-10"><a href="https://russia-dropshipping.ru/category/sxem">Схемы</a> </li> </ul> </aside><aside id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script type="text/javascript">jQuery(document).ready(function($){$('.mylink').replaceWith(function(){return'<a href="'+$(this).attr('data-url')+'" title="'+$(this).attr('title')+'">'+$(this).html()+'</a>'})});new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </div></aside><aside id="custom_html-4" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"> <div id="yandex_rtb_R-A-502625-6"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-502625-6", renderTo: "yandex_rtb_R-A-502625-6", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div></aside> </div> </div> <div id="sidebar-footer" class="footer-widget-area clearfix" role="complementary"> <div class="container"> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info"> <div class="container"> Copyright © 2021 <font style="text-align:left;font-size:15px;"><br> Дропшиппинг в России.<br> Сообщество поставщиков дропшипперов и интернет предпринимателей.<br>Все права защищены.<br>ИП Калмыков Семен Алексеевич. ОГРНИП: 313695209500032.<br>Адрес: ООО «Борец», г. Москва, ул. Складочная 6 к.4.<br>E-mail: mail@russia-dropshipping.ru. <span class="phone-none">Телефон: +7 (499) 348-21-17</span></font> </div> </div> </footer> </div> <style type="text/css"> .pgntn-page-pagination { text-align: left !important; } .pgntn-page-pagination-block { width: 60% !important; padding: 0 0 0 0; } .pgntn-page-pagination a { color: #1e14ca !important; background-color: #ffffff !important; text-decoration: none !important; border: 1px solid #cccccc !important; } .pgntn-page-pagination a:hover { color: #000 !important; } .pgntn-page-pagination-intro, .pgntn-page-pagination .current { background-color: #efefef !important; color: #000 !important; border: 1px solid #cccccc !important; } .archive #nav-above, .archive #nav-below, .search #nav-above, .search #nav-below, .blog #nav-below, .blog #nav-above, .navigation.paging-navigation, .navigation.pagination, .pagination.paging-pagination, .pagination.pagination, .pagination.loop-pagination, .bicubic-nav-link, #page-nav, .camp-paging, #reposter_nav-pages, .unity-post-pagination, .wordpost_content .nav_post_link,.page-link, .page-links,#comments .navigation, #comment-nav-above, #comment-nav-below, #nav-single, .navigation.comment-navigation, comment-pagination { display: none !important; } .single-gallery .pagination.gllrpr_pagination { display: block !important; } </style> <link rel='stylesheet' id='pgntn_stylesheet-css' href='https://russia-dropshipping.ru/wp-content/plugins/pagination/css/nav-style.css?ver=5.8' type='text/css' media='all' /> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/themes/solon1.0/js/navigation.js?ver=20120206' id='solon-navigation-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/themes/solon1.0/js/skip-link-focus-fix.js?ver=20130115' id='solon-skip-link-focus-fix-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-includes/js/comment-reply.min.js?ver=5.8' id='comment-reply-js'></script> <script type='text/javascript' id='q2w3_fixed_widget-js-extra'> /* <![CDATA[ */ var q2w3_sidebar_options = [{"sidebar":"sidebar-1","margin_top":10,"margin_bottom":0,"stop_id":"","screen_max_width":0,"screen_max_height":0,"width_inherit":false,"refresh_interval":1500,"window_load_hook":false,"disable_mo_api":false,"widgets":["custom_html-4"]}]; /* ]]> */ </script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.9' id='q2w3_fixed_widget-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-includes/js/wp-embed.min.js?ver=5.8' id='wp-embed-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/plugins/easy-table-of-contents/vendor/smooth-scroll/jquery.smooth-scroll.min.js?ver=1.5.5' id='jquery-smooth-scroll-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.0.3' id='js-cookie-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2' id='jquery-sticky-kit-js'></script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/plugins/easy-table-of-contents/vendor/waypoints/jquery.waypoints.min.js?ver=1.9.2' id='jquery-waypoints-js'></script> <script type='text/javascript' id='ez-toc-js-js-extra'> /* <![CDATA[ */ var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","width":"auto","scroll_offset":"30"}; /* ]]> */ </script> <script type='text/javascript' src='https://russia-dropshipping.ru/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=1.7' id='ez-toc-js-js'></script> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

Тег | HTML справочник

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

Описание

Атрибуты

Стиль по умолчанию

Пример

Meta теги. Учебник html

Тег meta

Пример

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

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

Советы и примечания

Различия между HTML 4,01 и HTML5

Различия между HTML и XHTML

Примеры

Атрибуты

Глобальные атрибуты

Похожие страницы

Параметры CSS по умолчанию

Мета-теги в HTML — Руководство для начинающих

Что такое метатег в HTML

Мета-теги заголовка

Предостережения относительно мета-тегов Title

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

Страница без описания метатега

Тест ваших мета-тегов

Мета-теги ключевых слов

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

Нет индексных роботов

Атрибут Follow

Мета-теги области просмотра

Проверка адаптивного макета

Обновить мета-теги

Вывод

HTML метатеги, которые по-настоящему важны – Сей-Хай

Twitter Cards и Open Graph (Социальные сети)

Читайте также:

HTML и CSS с примерами кода

Синтаксис

Атрибуты

charset

content

http-equiv

name

Спецификации

Описание и примеры

Ссылки

Какие мета-теги для сайта HTML нужно добавлять и что они дают?

Напишите идеальное метаописание (Рекомендации 2021 года!)

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

Какова оптимальная длина метаописания?

Как писать идеальные метаописания

Написать убедительную копию

Используйте целевые и дополнительные ключевые слова

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

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

Что такое заголовки страниц и метаописания? [РАЗЪЯСНЕНИЕ]

Что такое метаданные?

Что такое заголовки страниц?