Метатеги и seo

Setting the Viewport

The viewport is the user’s visible area of a web page. It varies with the device
— it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how
to control the page’s dimensions and scaling.

The part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the
viewport meta tag

With the
viewport meta tag

You can read more about the viewport in our Responsive Web Design — The Viewport Tutorial.

HTML Tags

Мета-теги в html

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

Definition and Usage

Html тег

The tag defines metadata about an
HTML document. Metadata is data (information) about data.

tags always go inside the <head> element,
and are typically used to specify character set, page description,
keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.

There is a method to let web designers take control over the viewport
(the user’s visible area of a web page), through the tag (See «Setting
The Viewport» example below).

Adding Meta Tags to Your Documents

Bootstrap icons

You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes −

Sr.No	Attribute & Description
1	Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
2	content Specifies the property’s value.
3	scheme Specifies a scheme to interpret the property’s value (as declared in the content attribute).
4	http-equiv Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

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

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

Мета теги, которые учитывает поисковая машина:

title — заголовок страницы, другими словами название страницы. Очень важный тег в ранжировании сайтов (см. тег <title>);
description — описание страницы сайта (см. подробное описание мета тега description »);
keywords — ключевые слова страницы сайта (см. подробное описание мета тега keywords »);
robots — управляет индексацией документа, а также ссылками в этом документе. Имеет следующий синтаксис:

Параметры могут принимать следующие значения:

index (разрешить индексацию документа)
noindex (запретить индексацию документа)
follow (разрешить следовать по ссылкам)
nofollow (запретить следовать по ссылкам)
all (равносильно сочетанию index и follow)
none (равносильно сочетанию noindex, nofollow)

По умолчанию стоит all, что является нормой для большинства страниц интернета. Например, если хотите запретить страницу к индексации и обход ссылок, то надо написать none или noindex, nofollow (тег noindex и rel=»nofollow»).

Примечание:
Наверняка Вы слышали про файл robots.txt (см. как правильно создать robots.txt), в котором можно запрещать к индексации отдельные страницы сайта или даже целые разделы. Однако поисковая машина все равно может проиндексировать документ, который закрыт, через robots.txt, т.к. это всего лишь рекомендация для поисковой машины. В свою очередь мета тег robots позволяет со 100% точностью закрыть нужный документ от индексации.

4. Revisit — позволяет указать, как часто нужно переиндексировать документ. Этот мета тег устарел и не учитывается поисковыми роботами. Его никто сейчас не воспринимает в серьез.

Что делает title?

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

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

title отображается в качестве заголовка страницы в результатах поиска

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

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

HTML Reference

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

Meta Keywords Attribute

Meta Keywords are an example of a meta tag that doesn’t make much sense to use these days. Years ago, the meta keyword tags may have been beneficial, but not anymore.

Remember back in kindergarten and when your teacher gave you a stern look and said “if you can’t stop using those crayons while I’m talking, I’m going to take them away from you,” and you didn’t listen and, to your shock, they were indeed taken away? That’s sort of what Google did with meta keywords.

Years ago, marketers eager for page views would insert keywords totally unrelated to their pages into their code in an attempt to pirate traffic from the more popular pages, those that actually were about Lindsay Lohan, or whoever was then trending. This was known as «keyword stuffing.» Google eventually got wise to this and decided in the end to devalue the tool. These days Google doesn’t use meta keywords in its ranking algorithm at all, because they’re too easy to abuse.

HTML Reference

HTML Tags

Attribute Values

Value	Description
application-name	Specifies the name of the Web application that the page represents
author	Specifies the name of the author of the document. Example: <meta name=»author» content=»John Doe»>
description	Specifies a description of the page. Search engines can pick up this description to show with the results of searches. Example: <meta name=»description» content=»Free web tutorials»>
generator	Specifies one of the software packages used to generate the document (not used on hand-authored pages). Example: <meta name=»generator» content=»FrontPage 4.0″>
keywords	Specifies a comma-separated list of keywords — relevant to the page (Informs search engines what the page is about).Tip: Always specify keywords (needed by search engines to catalogize the page). Example: <meta name=»keywords» content=»HTML, meta tag, tag reference»>
viewport	Controls the viewport (the user’s visible area of a web page). The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. You should include the following <meta> viewport element in all your web pages: <meta name=»viewport» content=»width=device-width, initial-scale=1.0″> A <meta> viewport element gives the browser instructions on how to control the page’s dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag: Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference. Without the viewport meta tag With the viewport meta tag You can read more about the viewport in our Responsive Web Design — The Viewport Tutorial.

❮ HTML <meta> tag

Definition and Usage

The tag defines metadata about an
HTML document. Metadata is data (information) about data.

tags always go inside the <head> element,
and are typically used to specify character set, page description,
keywords, author of the document, and viewport settings.

Metadata will not be displayed on the page, but is machine parsable.

Metadata is used by browsers (how to display content or reload page),
search engines (keywords), and other web services.

There is a method to let web designers take control over the viewport
(the user’s visible area of a web page), through the tag (See «Setting
The Viewport» example below).

Продвижение в Facebook и Twitter

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

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

также предлагает несколько способов форматирования веб-страниц, но сегодня мы рассмотрим пример, схожий с приведенным выше примером для . Такой формат в Twitter называется «Summary Card with Large Image»:

В каждом примере имеется несколько атрибутов:

Большая картинка и заголовок;
Описание;
Домен.

HTML Tags

Мета-теги

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

использует 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">

Как , так и дают рекомендации относительно использования упомянутых выше тегов. Учтите, что ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Title (Заголовок).	Заголовок или название объекта.	Продуманный заголовок для связанного контента (максимально 70 символов).
Description (Описание).	Краткое описание или содержание объекта (2-4 предложения).	Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов).
Image (Картинка).	URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки	Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб.
URL	Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д.

Элемент

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

Кодировка HTML-страницы

Кодировку HTML-страницы нужно указывать для того, чтобы веб-браузер мог правильно отображать текст на странице. Если явно не указать кодировку, тогда браузер при отображении страницы будет определять ее автоматически. Если кодировка при этом будет определена не верно, то вместо текста будут отображаться иероглифы.
Самая распространённая современная кодировка — utf-8.
Указать браузеру пользователя какая кодировка используется на данной странице:

Метаэлементы и поисковые системы

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

Описание содержимого страницы и ключевые слова:

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

Атрибут
Значение / описание

charset
Указывает кодировку символов для текущего HTML-документа:

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

http-equiv
Контролирует действия браузера на данной веб-странице (эквивалент HTTP заголовков). При отображении страницы браузер будет следовать инструкциям, заданным в атрибуте: — указывает предпочтительный стиль для использования на странице. Атрибут content должен содержать идентификатор элемента <link>, который ссылается на таблицу стилей CSS, или идентификатор элемента <style>, содержащего таблицу стилей. — указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка «url=адрес_страницы».
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:

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

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

— позволяет разработчикам управлять размером исходной области просмотра на различных устройствах:
width=device-width — указывает браузеру задать ширину области просмотра равную ширине экрана устройства какой бы она ни была;initial-scale=1.0 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.

Page Redirection

You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.

Example

Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Setting the Viewport

The viewport is the user’s visible area of a web page. It varies with the device
— it will be smaller on a mobile phone than on a computer screen.

You should include the following element in all your web pages:

This gives the browser instructions on how
to control the page’s dimensions and scaling.

The part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.

Without the
viewport meta tag

With the
viewport meta tag

You can read more about the viewport in our Responsive Web Design — The Viewport Tutorial.

Meta Tag Definition: What Are Meta Tags?

Meta tags are snippets of text that describe a page’s content; the meta tags don’t appear on the page itself, but only in the page’s source code. Meta tags are essentially little content descriptors that help tell search engines what a web page is about.

The only difference between tags you can see (on a blogpost, say) and tags you can’t see is location: meta tags only exist in HTML, usually at the “head” of the page, and so are only visible to search engines (and people who know where to look). The “meta” stands for “metadata,” which is the kind of data these tags provide – data about the data on your page.

HTML Reference

HTML Tags

Attribute Values

Value	Description
content-security-policy	Specifies a content policy for the document. Example: <meta http-equiv=»content-security-policy» content=»default-src ‘self'»>
content-type	Specifies the character encoding for the document. Example: <meta http-equiv=»content-type» content=»text/html; charset=utf-8″>
default-style	Specified the preferred style sheet to use. Example: <meta http-equiv=»default-style» content=»the document’s preferred stylesheet»> Note: The value of the content attribute above must match the value of the title attribute on a link element in the same document, or it must match the value of the title attribute on a style element in the same document.
refresh	Defines a time interval for the document to refresh itself. Example: <meta http-equiv=»refresh» content=»300″> Note: The value «refresh» should be used carefully, as it takes the control of a page away from the user. Using «refresh» will cause a failure in W3C’s Web Content Accessibility Guidelines.

❮ HTML <meta> tag

Specify Character Set

You can use <meta> tag to specify character set used within the webpage.

Example

By default, Web servers and Web browsers use ISO-8859-1 (Latin1) encoding to process Web pages. Following is an example to set UTF-8 encoding −

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

To serve the static page with traditional Chinese characters, the webpage must contain a <meta> tag to set Big5 encoding −

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Previous Page
Print Page