что это такое, какие они бывают и зачем нужны поисковикам
Теги meta помогают людям находить ваш сайт в поисковых системах, влияют на его позиции в поисковой выдаче. Если правильно применять мета-теги – шанс того, что ваш сайт попадет в ТОП Yandex, Google, Rambler и других ПС значительно возрастает. Метатеги не являются обязательным атрибутом, и вы можете не использовать их. Поэтому стоит разобраться, насколько важны и зачем они нужны.
Мета-теги – это часть программного кода страницы. Они не видны обычному пользователю, и указываются в HTML коде страницы между открывающим и закрывающим тегом <head></head>.
Главные задачи мета-тегов:
- Влиять на режим отображения страницы в браузерах.
- Определять авторство контента, адрес страницы и частоту ее обновления.
- Направлять роботов поисковых систем в вопросах индексации, перехода по гиперссылкам.
Какие бывают мета-теги
Содержание статьи
Теги мета по функциям можно разделить на 2 основные группы:
- Для роботов поисковых систем (title, description, keywords) – используются для внутренней оптимизации ресурса.
- Технического характера – они позволяют правильно настроить отображение и индексацию страницы, указать информацию об авторе и документе.
Роботы поисковых систем – это специальная программа, которая перебирает все страницы из интернета и добавляет информацию из них в базу данных. Поисковый робот (веб-паук) анализирует страницы сайта, сохраняет и группирует контент по определенным критериям, после чего переходит по ссылке на следующую страницу и снова повторяет процесс.
Как правильно сформировать метатеги для ПС
Для составления title, description и keywords используются ключевые слова или фразы. Эти фразы важны, они подсказывают поисковым системам, какая тематика у статьи, и на какие вопросы она может ответить.
Ключевые слова – это фразы, которые пользователи вводят в поисковых системах, желая найти ответ на свой вопрос. Вебмастера стремятся
seoklub.ru
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 — Кириллица где
В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку 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=»Ваш_e-mail@сервер.домен»>
<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 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.
Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели
|
|
Атрибуту 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 (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!
www.webremeslo.ru
что это такое, как прописать и примеры в 2020
Привет! Я ещё очень давно написал текст про то, как правильно оптимизировать статьи, но каким-то невероятным образом упустил вопрос того, как прописывать метатеги на сайте: Title, Description, Keywords и h2. И вот спустя 4 года я исправляю это недоразумение.
Сразу скажу, что на теге Keywords останавливаться не будем, т.к. его поисковики не берут в расчёт уже несколько лет, просто забейте на данное поле, как на рудимент и не тратьте время на него.
Содержание статьи:
Что это такое – метатеги для сайта?
Наверняка вы сталкивались с таким понятием, как «мета-теги для продвижения сайта», но что это такое новичку разобраться не так-то просто. Но я помогу.
Метатеги – это специальные html-теги, которые призваны передать поисковым системам основную информацию о содержимом той страницы, на которой они прописаны.
Различают четыре основных мета-тега:
- Title.
- Description.
- Keywords (давно бесполезен с точки зрения SEO).
- h2 .
В данной статье я кратко рассмотрю два первых (Тайтл и Дескрипшн), а также дам ссылки на более подробные материалы по каждому из тегов, если этой информации будет недостаточно.
Тег h2 на сайте
Теги Title и Description в поисковой выдаче ЯндексаКак правильно заполнять мета-теги для продвижения сайта?
Meta tags – это один из важнейших текстовых факторов ранжирования страницы. От грамотно составленных Title и Description зависит, чуть ли не половина успеха. В этой связи очень важно научиться грамотно составлять и писать каждый из этих тегов.
Если коротко, то основные метатеги должны содержать ключевые слова и «хвосты», а в случае с интернет-магазинами или сайтами услуг ещё и гео-привязку с коммерческими словами. Причём чем ближе ключевое слово к левому краю, тем больше оно имеет «вес» в глазах поисковых роботов. Не стоит забывать, что ключевые запросы необходимо вписывать в читабельной форме, а не в том вхождение, в котором вам собрал КейКоллектор.
Итак, перейдём непосредственно к теории того, как правильно прописать мета теги для сайта. Стоит отметить, что в данной статье я только вкратце расскажу как писать мета-теги, а по каждому отдельному meta tag я сделаю ссылки на отдельные статьи, где будет подробный разбор Title, Description и h2.
Общие требования к мета-тегам
Для начала перечислю основные требования, которые применимы ко всем сайта и к информационным и к e-commerce:
- Читабельность мета-тегов, т.е. отсутствие спамных конструкций вида «пластиковые окна купить москва цена».
- Отсутствие повторения в точном вхождении несколько раз одного ключа.
- Дублирование мета-тегов друг относительно друга (Title =h2 или Title = Description) или одинаковые теги для разных карточек/статей. Т.е. вся meta должна быть уникальная.
- Сила ключей идёт слева направо, наиболее важный ключ нужно писать слева и потом по мере уменьшение их важности.
- Желательно соблюдение рекомендованных поисковиками размеров мета-тегов (Тайтл = 70 символов, Дескрипшн = 130 символов, Н1 = 50), но если ключей с хвостами много, то можно слегка принебречь данными лимитами.
Это общее, ну а теперь почему необходимо по-разному формировать теги для информационных и коммерческих сайтов. Давайте разберёмся в чём же состоят различия.
Информационные сайты
У информационных сайтов теги состоят только из основных ключей и их хвостов. Здесь особых уникальных требований нет. Все перечисленные выше пять пунктов применимы и к инфосайтам.
Коммерческие сайты
В отличие от инфосайтов во всех метатегах для интернет-магазинов или сайтов услуг должны присутствовать:
Артём Высоков
Автор блога о SEO и заработке на сайтах — Vysokoff.ru. Продвигаю информационные и коммерческие сайты с 2013 года.
Задать вопрос
Загрузка …- коммерческие фразы: купить, заказать, цена, недорого, доставка и подобные;
- гео-привязка: Москва, Спб, Колыма и т.д;
- бренд магазина (не путать с брендом, например, одежды, если у вас интернет-магазин одежды) обязателен в Дескрипшене, в Тайтле по желанию, в h2 не нужен;
- и естественно основные ключи и хвосты.
Главные страницы и остальные
Стоит отдельно упомянуть мета заголовки и мета описания для главных страниц. Здесь для инфо и коммерческих сайтов требования аналогичные описанным выше, разница только в том, что:
- заголовки главной должны содержать максимально высокочастотные фразы, которые закрывают вашу нишу полностью;
- описание главной – это по сути анонс вашего сайта в 2-3 предложения с вхождением ключевых слов (и коммерческих фраз, бренда и гео-привязки для магазинов).
Примеры метатегов
Для интернет-магазина по продаже мяса, который торгует в Москве:
<title> Купить мясо в Москве по низкой цене с доставкой </title>
<meta name=”description” content=”В интернет-магазине «Мясо 24» вы всегда можете недорого купить свежее мясо и мясные продукты. Доставка по Москве. “/>
<h2>Свежее мясо </h2>
Для информационного сайта о мясе:
<title> Всё о мясе: свинина, говядина, телятина – рецепты, польза и вред </title>
<meta name=”description” content=”На сайте «МяснойБлог» вы всегда найдёте полезные рецепты по приготовлению разного мяса: свинины, говядины и телятины. Статьи о пользе и вреде того или иного вида мяса. “/>
<h2>Всё о мясе </h2>
На этом вводная часть в тему мета-тегов окончена. Подробнее про каждый из трёх вы можете прочитать в следующих статьях:
- О мета-заголовке Title.
- О мета-описание Description.
- О заголовке h2.
vysokoff.ru
их важность для SEO, примеры и рекомендации
Что такое мета-теги?
Знаете ли вы другие мета-теги, помимо title и description? Небольшой список тегов поделенных на три категории (плохие, хорошие и нейтральные) поможет вам обновить свои знания и расставить приоритеты при оптимизации страниц.. Более того, прочитав эту статью до конца, вы поймете, что количество плохих тегов значительно превышает все остальные. Тем не менее, это не исчерпывающий список. Если нужно больше, вы всегда можете найти дополнительные данные с помощью этого источника – https://www.metatags.org/all_metatags.
Плохие
- Нельзя сказать, что эти теги плохо влияют на ваш сайт, но это всего лишь пустая трата вашего времени и лишний код на сайте.
- Тег автора – указывает, кто является автором страницы.
- Тег генератора – используется для обозначения программы, которая сгенерировала вашу страницу.
- Тег типа ресурса – указывает тип ресурса, на котором находится ваша страница.
- Тег повторения – указывает поисковым роботам, что им нужно вернуться на страницу еще раз через некоторое время, но большинство известных поисковых систем его не поддерживают.
- Тег рейтинга – помогает добавить ограничения по возрасту для вашего контента, но лучший способ справиться со взрослыми изображениями заключается в размещении их в изолированном каталоге, который находится вдали от обычных изображений, используемых на сайте, и уведомляет о них Google.
- Тег распределения – используется, когда нужно изменить доступность документа; в большинстве случаев он имеет «общий» режим по умолчанию, поэтому, если ваша страница открыта, значит, она открыта для всех.
- Тег резюме – используется, если следует добавить только резюме текста.
- Теги даты / истечения срока действия – дата указывает на точный день создания страницы, а срок её действия – когда он истекает. Гораздо полезнее удалять страницы, когда срок их действия истекает самому, и постоянно обновлять XML-карту сайта.
- Тег копирайта – если у вас он уже есть в разделе нижнего колонтитула, зачем его использовать еще раз?
- Тег управления кэшем – помогает контролировать период кеширования страницы в браузере, но более предпочтительно делать это в HTTP заголовке.
Хорошие
- «Хорошие» мета-теги должны использоваться на каждой странице. Конечно, это не полный их список, но вы должны применять хотя-бы следующие теги:
- Мета-тег Title – это очень важный элемент любой SEO оптимизации, поскольку он размещается в секции header и содержит самые важные данные. Самое важное правило, которого следует придерживаться, это создание уникальных заголовков для каждой отдельной страницы.
- Мета тег description – этот мета-элемент служит описанием страницы для различных поисковых запросов. Хотя он не влияет на ранжирование сайта в поисковой выдачи напрямую, но по-прежнему остается очень важным, поскольку помогает привлечь пользователей на ваш сайт.
- Тег типа контента (content type) – должен использоваться на каждой странице, так как он показывает тип набор символов страницы (кодировку), и его упущение может повлиять на отображение страницы браузером. Ниже приведено несколько вариантов, но опытный разработчик может самостоятельно выбрать лучший вариант для сайта.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- Область просмотра (Viewport) – в нашу техническую эпоху это очень важный элемент, если вы хотите, чтобы ваш сайт имел хороший мобильный интерфейс. Вы можете использовать такую программу, как Google PageSpeed Insights Tool, чтобы получить более подробную информацию. В противном случае, стандартный тег выглядит так:
<meta name=viewport content="width=device-width, initial-scale=1">
Нейтральные
- Эти теги не обязательно задействовать, и лучше избегать их использования, если не предвидится особых случаев, когда этого нельзя избежать.
- Социальные мета-теги – информация из Twitter и OpenGraph в большинстве случаев имеет ключевое значение, но не является обязательной.
- Тег языка – задействуйте его, если нужно указать определенный язык, который используется на странице.
- Тег для специальных ботов – служит для предоставления инструкций особым ботам, таким как noodp (говоря им, что данные списков DMOZ запрещены к использованию) и noydir (довольно похожий, но здесь предоставляются данные Yahoo).
- Тег Robots – некоторые специалисты уверены, что это обязательный мета-тег. Что касается индексации страниц, если вы не добавляете мета-тег роботс, поисковые системы будут считать, что страницу нужно индексировать. Но когда вы хотите запретить индексацию ссылок на странице, то нужно использовать этот элемент с параметром noindex.
<meta name="robots" content="noindex" />
- Тег обновления – это вариант редиректа, которого следует избегать в большинстве ситуаций. Лучший вариант – это старая переадресация с помощью 301 редиректа, даже если нужно предпринять меры как можно скорее.
- Ключевые слова – согласно многим SEO стратегиям, его не рекомендуется использовать, потому что вероятность хоть какого-то прока от него очень низкая. Таким образом, если он был автоматически использован при создании сайта, то оставьте его, но, если это не так, лучше не добавляйте.
- GEO тег – обрабатывается только при помощи поисковой системы Bing. Более того, он делится на три типа: регион, положение и топоним.
<META NAME="geo.position" CONTENT="latitude; longitude">
<META NAME="geo.region" CONTENT="Country Subdivision Code">
<META NAME="geo.placename" CONTENT="Place Name">
- Тег проверки сайта – иногда его необходимо использовать для авторизации сайта в Google. Вы также можете использовать внешний файл, DNS или просто ссылку на свой профиль Google Analytics. А если речь идет о Bing, то мета-тег и проверка файла XML возможны, но XML-код всегда предпочтительнее.
sitechecker.pro
Важные мета-теги для социальных сетей
Сегодня посетителей практически каждого сайта агитируют поделиться материалами в социальных сетях. И это неудивительно, так как обмен ссылками в социальных сетях представляет собой один из наиболее эффективных способов продвижения бизнеса и услуг. Для этого используются мета теги для сайта.
Когда пользователь решил кликнуть по одной из ссылок, задача веб-разработчика заключается в том, чтобы связанная со ссылкой страница выглядела привлекательно. Именно об этом мы сегодня и поговорим.
Facebook предлагает разработчикам различные параметры настройки того, как будут выглядеть веб-страницы в новостной ленте пользователей социальной сети. Все сайты по умолчанию относятся к типу контента под названием “Веб-ресурс”, и именно его мы используем в примере.
Предположим, что кто-то поделился главной страницей сайта турфирмы. В ленте Facebook результат будет выглядеть следующим образом:
Twitter также предлагает несколько способов форматирования веб-страниц, но сегодня мы рассмотрим пример, схожий с приведенным выше примером для Facebook. Такой формат в Twitter называется «Summary Card with Large Image»:
В каждом примере имеется несколько атрибутов:
- Большая картинка и заголовок;
- Описание;
- Домен.
Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс Facebook и Twitter извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.
Facebook использует meta-теги, используя протокол Open Graph. Это система классификации веб-страниц, которая на данный момент охватывает meta-теги, определенные в HTML5. Полный список доступных тегов можно просмотреть на сайте Open Graph. Но в работе пригодится всего четыре тега:
<meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm">
Как Facebook, так и Twitter дают рекомендации относительно использования упомянутых выше тегов. Учтите, что Facebook ссылается на публикуемую веб-страницу при помощи термина «объект» (object):
| Title (Заголовок). | Заголовок или название объекта. | Продуманный заголовок для связанного контента (максимально 70 символов). |
| Description (Описание). | Краткое описание или содержание объекта (2-4 предложения). | Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов). |
| Image (Картинка). | URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки | Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб. |
| URL | Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д. |
Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что Twitter позволяет заменять мета-теги Open Graph на собственные. К тому же за исключением необходимости определить формат отображения нам не понадобятся уникальные мета-теги Twitter. В результате мы получаем следующий код, который стоит рассматривать как самый минимум с точки зрения тегов, необходимых для того, чтобы репост сайта выглядел достойно:
<meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm"> <meta name="twitter:card" content="summary_large_image">
Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение Twitter в 1Мб.
Если у вас возникли сомнения относительно комбинирования мета тега description для сайта c другими тегами, то всегда можно воспользоваться специальными инструментами Facebook Sharing Debugger и Twitter Card Validator. Оба средства умеют извлекать любые веб-страницы с публичных серверов, используя релевантные мета-теги, и демонстрировать вам, как они будут смотреться при распространении в социальных сетях. Кроме этого они выводят список ошибок и дают советы. Как мы поступим с нашим примером? С Twitter, кажется, проблем не возникло, а вот проверка Facebook выдала предупреждение:
И это дает нам отличную тему для разговора.
Этой ошибкой Facebook указывает, что, если вы собираетесь использовать их аналитический инструмент Domain Insights, то нужно будет предоставить уникальный ID, привязанный к вашему аккаунту. Мета-тег должен выглядеть следующим образом:
<meta property="fb:app_id" content="your_app_id" />
У Twitter имеется нечто похожее — Twitter Card Analytics. Twitter рекомендует использовать следующий мета-тега, который должен содержать ваш логин в Twitter, привязанный к публикуемой веб-странице:
<meta name="twitter:site" content="@website-username">
Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта, и это никак не скажется на отображении публикуемой веб-страницы в хронике Facebook или ленте Twitter.
В документации Facebook есть еще одна рекомендация о дополнительном мета-теге. Он отвечает за название сайта:
<meta name="og:site_name" content="European Travel, Inc.">
Twitter рекомендует использовать другой мета-тег, но он также не обязателен:
<meta name="twitter:image:alt" content="Alt text for image">
Он позволяет указывать альтернативное описание картинки для людей с плохим зрением.
И на этом, пожалуй, все. Стоит отметить, что в документации Facebook и Twitter есть множество других мета тегов для HTML сайта, которые можно использовать для распространения контента другого типа. Но я считаю, что приведенного ниже кода будет вполне достаточно:
<!-- Essential META Tags --> <meta property="og:title" content="European Travel Destinations"> <meta property="og:description" content="Offering tour packages for individuals or groups."> <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg"> <meta property="og:url" content="http://euro-travel-example.com/index.htm"> <meta name="twitter:card" content="summary_large_image"> <!-- Non-Essential, But Recommended --> <meta name="og:site_name" content="European Travel, Inc."> <meta name="twitter:image:alt" content="Alt text for image"> <!-- Non-Essential, But Required for Analytics --> <meta property="fb:app_id" content="your_app_id" /> <meta name="twitter:site" content="@website-username">
Данная публикация представляет собой перевод статьи «The Essential Meta Tags for Social Media» , подготовленной дружной командой проекта Интернет-технологии.ру
www.internet-technologies.ru
Мета-теги — Вікіпедія
Мета-теги (англ. meta-tags) — (X) HTML-теги, призначені для надання структурованих метаданих про веб-сторінки. Зазвичай, вказуються в заголовку (X) HTML-документа.
Елемент meta приймає як мінімум чотири атрибута: content, http-equiv, name і scheme. З них обов’язковий лише атрибут content і виняток тег revisit.
Приклад використання елементу meta[ред. | ред. код]
Один з варіантів застосування тега meta — вказівка HTTP-заголовків, які повинні бути відправлені клієнту до відправки самої веб-сторінки. Наприклад:
<meta http-equiv="Content-Type" content="text/html" />
Такий запис вказує, що сторінка повинна бути відправлена разом з HTTP-заголовком Content-Type: text/html. Такий заголовок вказує браузеру або іншій програмі тип відправленого документа. Тим не менш, незважаючи на те, що спочатку передбачалося, що веб-сервери будуть зчитувати мета-теги всередині відправлених клієнту веб-сторінок, і формувати HTTP-заголовки в залежності від їх змісту, на практиці це не реалізовано в найбільш використовуваних веб-серверах, відповідно, веб-сервери не міняють відправлені клієнту HTTP-заголовки, а клієнт (веб-браузер) обробляє ці мета-теги самостійно[1] (зокрема, дані з мета-тегів можуть заміняти дані, що одержуються з HTTP-заголовків[2]).
Крім того, мета-теги можуть використовуватися для того, щоб повідомити браузеру інформацію про документ, коли HTTP-заголовки недоступні (наприклад, якщо сторінка відкривається локально з диска, а не завантажується з веб-сервера).
У загальній формі мета-дані записуються в такому вигляді: в тезі meta вказується атрибут name (ім’я) та пов’язаний з ним атрибут content (вміст), в якому описується будь-який аспект веб-сторінки, наприклад, ключові слова:
<meta name="keywords" content="вікіпедія, енциклопедія" />
Функції мета-тегів достатньо різноманітні, однак на цей момент не існує їх чіткої стандартизації. Тим не менш, можна виділити кілька основних напрямів використання мета-тегів:
- Мета-теги здатні ідентифікувати авторство Інтернет-сторінки, її адресу, частоту її оновлень;
- Мета-теги використовуються пошуковими системами для індексації та створення заголовків гіпертекстових документів;
- Не виводячись на екран, мета-теги впливають на режим відображення Інтернет-сторінок.
Мета-теги розділені на дві основні групи — NAME і HTTP-EQUIV. Група NAME відповідає за текстову інформацію про сторінку, її автора, а також — рекомендації для пошукових систем. HTTP-EQUIV фактично еквівалентні гіпертекстовим заголовкам, формують заголовок сторінки та визначають його обробку. Зазвичай, вони управляють діями браузерів та використовуються для формування інформації, що видається звичайними заголовками.
Група NAME[ред. | ред. код]
Мета-тег Author і Copyright[ред. | ред. код]
Ці теги, зазвичай, не використовуються одночасно. Функція тегів — ідентифікація автора або приналежності документа. Тег Author містить ім’я автора Інтернет-сторінки, в тому випадку, якщо сайт належить будь-якій організації, доцільніше використовувати тег Copyright. Виглядає цей тег таким чином:
<meta name="author" content="Богдан Хмельницький" />
Крім цього, теги Author і Copyright можуть містити додатковий атрибут «lang», що дозволяє визначити мову, що використовується при вказівці значення властивості:
<meta name="copyright" lang="uk" content="ПП Богдан Хмельницький" />
Мета-тег Description[ред. | ред. код]
Данний тег використовується при створенні короткого опису сторінки, використовується пошуковими системами для індексації, а також при створенні анотації у видачі за запитом. При відсутності тега пошукові системи видають в анотації перший рядок документа або уривок, який містить ключові слова. Відображається після посилання при пошуку сторінок в пошуковій системі.
<meta name="description" content="Метатеги у Вікіпедії" />
Мета-тег Document-state[ред. | ред. код]
Мета-тег Document-state також має значення при індексації сторінки в пошукових системах. Тег має два значення — Static і Dynamic. Значення «Static» зазначає, що системі немає необхідності індексувати документ надалі, «Dynamic» дозволяє регулярно індексувати Інтернет-сторінку.
<meta name="document-state" content="Dynamic" />
Мета-тег Generator[ред. | ред. код]
Даний мета-тег в першу чергу використовувався розробниками програм для редагування веб-сторінок з метою самореклами — як значення тега розробники таких програм, зазвичай, вказували назву свого продукту.
<meta name="generator" content="Macromedia Dreamviewer 4.0" />
Останнім часом практично не використовується.
Мета-тег Keywords[ред. | ред. код]
Даний мета-тег пошукові системи використовують для того, щоб визначити релевантність посилання. При формуванні цього тега необхідно використовувати лише ті слова, які містяться в самому документі. Використання тих слів, яких немає на сторінці, не рекомендується. Рекомендована кількість слів у цьому тезі — не більше десяти. Крім того, виявлено, що розбивка цього тегу на кілька рядків впливає на оцінку посилання пошуковими машинами.
<meta name="keywords" content="Вікіпедія, Метатег, стаття" />
Мета-тeг Resource-type[ред. | ред. код]
Тег Resource-type описує властивість або стан сторінки. Якщо значення тегу відрізняється від «Document», то пошукові системи його не індексують. Мета-тег призначений для масштабування document (використовується за умовчанням), rating, version, operator, formatter, creation та інші.
<meta name="resource-type" content="document" />
Мета-тeг Revisit[ред. | ред. код]
Тег дозволяє управляти частотою індексації документа в пошуковій системі. Для переіндексації сайту раз на два тижні використовується тег такого вигляду:
<meta name="revisit" content="14" />
Пошукові системи Яндекс і Google ігнорують вміст цього мета-тегу[3].
Мeтa-тeг Robots[ред. | ред. код]
Тег формує інформацію про гіпертекстові документи, яка надходить до роботів пошукових систем. Значення тега можуть бути такими: Index (сторінка повинна бути проіндексована), Noindex (документ не індексується), Follow (гіперпосилання на сторінці відстежуються), Nofollow (гіперпосилання не відстежуються), All (включає значення index і follow, включений за умовчанням), None (включає значення noindex і nofollow).
Приклад 1. Дозволити індексування сторінки та використання розміщених на ній посилань для подальшої індексації:
<meta name="robots" content="index,follow" />
або рівноцінний аналог:
<meta name="robots" content="all" />
Приклад 2. Заборонити індексування сторінки, дозволити використання розміщених на ній посилань для подальшої індексації:
<meta name="robots" content="noindex,follow" />
Приклад 3. Дозволити індексування сторінки, заборонити використання розміщених на ній посилань для подальшої індексації:
<meta name="robots" content="index,nofollow" />
Приклад 4. Заборонити індексування сторінки та використання розміщених на ній посилань для подальшої індексації:
<meta name="robots" content="noindex,nofollow" />
або рівноцінний аналог:
<meta name="robots" content="none">
Мeтa-тeг Subject[ред. | ред. код]
Визначає тематику документа. Практично непотрібний через відсутність чіткої та узгодженої класифікації тем в різних пошукових системах.
Мeтa-тeг url[ред. | ред. код]
Тег припиняє індексацію сторінки пошуковою системою і перенаправляє робота пошукової машини за вказаним посиланням. Тег застосовується для скасування індексації «дзеркала»[ru] та генеруючих сторінок.
<meta name="url" content="http://uk.wikipedia.org/" />
Група HTTP-EQUIV[ред. | ред. код]
Мeтa-тeг Content-Language[ред. | ред. код]
Тег дозволяє вказати мову, якою створено документ.
Приклад:
<meta http-equiv="content-language" content="uk" />
Мeтa-тeг Content-Script-Type[ред. | ред. код]
Визначає мову програмування сценаріїв. Якщо тег не прописаний, слід вказати мову програмування в кожному тезі <script>. Тег <script> має вищий пріоритет порівняно з Content-Script-Type.
Мeтa-тeг Content-Style-Type[ред. | ред. код]
Вказівки мови таблиці стилів, за умовчанням значення — «text/css».
Приклад:
<meta http-equiv="Content-Style-Type" content="text/css">
Мeтa-тeг Content-Type[ред. | ред. код]
Визначає тип документа і його кодування.
Приклад:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
Мeтa-тeг Expires[ред. | ред. код]
Мета-тег Expires — управляє кешуванням. Якщо зазначена в тезі дата пройшла, то браузер повинен зробити повторний мережевий запит, а не використовувати копію з кеша. Якщо в завантаженій сторінці вказана застаріла дата, то сторінка взагалі не буде кешуватися.
Деякі пошукові роботи не індексують документи із застарілою датою.
Дата повинна вказуватися в стандарті RFC850[4].
Приклад:
<meta http-equiv="Expires" content="mon, 27 sep 2010 14:30:00 GMT">
Мета-тeг PICS-Label[ред. | ред. код]
PICS-Label — (від англ. Platform-Independent Content rating Scheme Label) — вказує рівень доступності сайту (у зв’язку з можливими тематиками sex і violence), однак використовується і в інших цілях.
Мeтa-тeг Pragma[ред. | ред. код]
Контроль кешування при сторінках, одержуваних шляхом роботи заданого скрипта.
<meta http-equiv="Pragma" content="no-cache">
Мeтa-тeг Refresh[ред. | ред. код]
Затримка часу (в секундах) перед тим, як браузер оновить сторінку. Крім того, може використовуватися автоматичне завантаження іншої сторінки.
<meta http-equiv="refresh" content="5; url=http://www.example.com/" />
Після «url=» лапок бути не повинно!
Мeтa-тeг Set-Cookie[ред. | ред. код]
Налаштування cookie браузера
Мeтa-тeг Window-target[ред. | ред. код]
Визначення вікна завантажуваної сторінки.
Мета-тег Imagetoolbar[ред. | ред. код]
Вимикає Панелі управління зображеннями. Зазвичай використовують при виведенні банерів, фону картинки, карти зображення та ін., коли виведення цієї панелі небажане.
<meta http-equiv="imagetoolbar" content="no" />
Мета-дані про веб-сторінки спочатку призначалися в тому числі для того, щоб допомогти пошуковим машинам віднести веб-сторінку до тієї чи іншої категорії. В 90-ті роки мета-теги активно використовувалися в цілях розкрутки свого сайту, в тому числі, надаючи неправдиві або надлишкові мета-дані. Останнім часом пошуковими системами було зроблено безліч заходів із припинення таких маніпуляцій: наприклад, із факторів ранжування було виключено тег keywords, принципи побудови правильних основних тегів «title» і «description» також змінилися.
У зв’язку з тим, що мета-теги несуть суто службову функцію, і, крім того, значно збільшують розмір гіпертекстового документа, початківці Web-дизайнери найчастіше їх ігнорують. Крім того, мета-теги групи HTTP-EQUIV достатньо складні у використанні, оскільки задають жорсткі параметри форматування сторінки. Тим не менш, мета-теги роблять більш успішною індексацію Інтернет-сторінки в пошукових системах.
uk.wikipedia.org