Метатеги

Содержание:

Примеры

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

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

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

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

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

Описание

Важные мета-теги для социальных сетей

Мета тег является, вероятно, наиболее часто используемым. Он предоставляет поисковому роботу короткое описание страницы. Например:

<meta name=”description” content=”Урок о мета тегах для поисковой оптимизации”/>

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

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

Социальные метатеги

Какие бывают meta теги и зачем они нужны

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

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

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

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

<!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.

Примеры правильных и неправильных Description

Noindex

Для начала приводим несколько ярких примеров верно заполненных мета-тегов Description, у сайтов в ТОПе по конкурентным запросам.

Запрос .

У всех сайтов в ТОП-3 в начале Description стоит ключевое слово. Это не значит, что только одним включением ключевого слова в началоописания страницы можно поднять сайт в ТОП, но это один из важнейших факторов SEO.

Теперь посмотрим выдачу Google по запросу .

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

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

Заключение

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

Полезные ссылки:

Как проиндексировать сайт в Яндекс и Google
10 лучших сервисов для SEO-продвижения
Виды поисковых запросов
Как правильно прописать атрибуты Alt и Title для картинок

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).

Разработка VR и AR-оборудования

В ближайшие несколько лет Meta представит несколько инновационных устройств. Они пока находятся в процессе разработки.

В 2022 году компания выпустит на рынок гарнитуру дополненной реальности Project Cambria. Ее можно будет использовать с приложениями виртуальной и смешанной реальности. Гарнитуру оснастят технологиями отслеживания мимики лица и направления взгляда.
Разрабатываются и очки дополненной реальности под техническим названием Project Nazaré. Пока их дизайн неизвестен. Они будут оснащены голографическим дисплеем, проектором, чипами, камерами, датчиками и динамиками. Сколько времени уйдет на создание такого аппарата — пока неизвестно.

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>

Что писать в теге meta description?

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

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

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

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

Релевантность. Meta description должен соответствовать той информации, которая находится на странице

Не стоит стараться привлечь внимание пользователей, использую в своих мета-описаниях заголовки из желтой прессы;

Размер. Description не должен быть сильно коротким, он не должен состоять из нескольких слов или словосочетаний

Делайте мета-описания размером не менее 100 символов;

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

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

Обобщение. Мета-описание должно обобщать всю самую ценную информацию на странице. Систематизируйте информацию, разбросанную по странице. Например, для карточки товара это может быть краткое описание товара, цена, производитель, состав, доступные характеристики. Для информационной статьи: основная тема, автор, дата публикации;

Формат. Description должен быть написан на том же языке, что и web-страница. Не стоит злоупотреблять заглавными буквами, спецсимволами, вызывающими лозунгами, знаками препинания.

Актуальность. Мета-описание должно соответствовать актуальной информации на странице. Если вы редактируете содержание странице, поддерживайте в актуальном состоянии и description.

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

Есть ли различия в составлении meta description для разных поисковых систем: Яндекс и Google? Давайте попробуем найти отличия в сниппетах и рекомендациях по составлению мета-описаний.

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.

5 последних уроков рубрики «SEO»

Многое можно сделать за 24 часа. Можно посмотреть 24 эпизода сериала по 60 минут. Сосчитать до 86,400. Таким же образом за 24 часа можно значительно улучить SEO.
Это вторая часть серии статей, в которых мы раскрываем пути оптимизации страниц категорий и товаров для улучшения поисковых результатов. Также мы рассмотрим несколько продвинутых техник, которые помогут избежать штрафов от поисковых систем за дублирование контента.
Это первая статья из четырёх, в которых мы будем рассматривать основы Поисковой Оптимизации для Magento. В этой статье вы узнаете, как разработать эффективную стратегию ключевых слов для сайта на Magento, некоторые основные конфигурационные опции административной панели для более удобной работы с SEO, как создавать файлы robot.txt и sitemap.xml, и как настроить Google Analytics для магазина на Magento.
Рейтинг вашего сайта в поисковых системах — один из самых важных факторов, ведущих к успеху проекта. Сделав несколько простых действий, вы можете заставить Google сканировать ваш сайт чаще, что может привести к увеличению рейтинга, а так же отображению актуальной информации в поисковых запросах.
5 вещей, которые разработчик должен знать о SEO

Когда впервые пытаешься разобраться с поисковой оптимизацией, то даже и не знаешь, с чего начать. Очень много чего надо переварить. И как только вы начинаете думать, что вы “знаете” что-то — Google выпускает обновление поискового алгоритма, который очень многое меняет.

Usage in Social Media (Open Graph, Twitter Cards, and Schema.org)

With the ever-increasing relevancy of social networks, meta tags have evolved. Facebook’s Open Graph allows you to specify how your content is displayed on a user’s timeline. These tags can enable you to check how your data was shared on Facebook using Insights.

For further reading, I suggest you go through Facebook’s Open Graph documentation.

Similar to Open Graph, Twitter has Twitter cards (using or ) and Google+ uses Schema.org (using and ).

Open Graph has become very popular, so most social networks default to Open Graph if no other meta tags are present. If Open Graph meta tags are absent as well, they assume default values for the absent meta tags.

The декларация

HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:

<!DOCTYPE html>

Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).

В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.

HTML 4.01 Strict

Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

В версии HTML5 есть только один doctype и определяется он следующим образом:

<!DOCTYPE html>

Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.

По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.

При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.

Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).

HTML Tags

<!—><!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>

Заголовок

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

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

<title>Заголовок страницы</title>

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

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

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

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

Самый, самый, самый…

Судебные иски — обратная сторона богатства и популярности. А они у Марка Цукерберга росли и продолжают расти словно на дрожжах. Вместе с ними в его адрес посыпались всевозможные «титулы и регалии». Ниже указаны лишь самые любопытные из них.

2010 год — журнал «Forbes» признаёт Марка самым молодым миллиардером в мире (в марте его состояние оценивалось в 4 млрд. долларов). Кроме того, ещё одно всемирно известное издание «Time» называет Марка «человеком года». Этот год можно считать знаковым для Марка Цукерберга ещё и по тому, что на большие экраны выходит кинофильм Дэвида Финчера «Социальная сеть». Как вы думаете, кто послужил прототипом главного героя?! Таким образом, Марка экранизировали ещё при жизни. А ведь ему тогда только 26 стукнуло…
2011 год — Марк Цукерберг провозглашается наиболее влиятельным евреем планеты. К слову, этот «титул» он удерживает за собой и по сей день. В том же году Марк удостоился весьма сомнительного признания мировой общественности – журнал «GQ» назвал его самым безвкусно одетым миллиардером.
2013 год — всё тот же «Forbes» оценивает состояние Марка уже в 19 млрд. долларов, а это значит, что создатель Facebook за 3 года увеличил свои доходы почти в 5 раз. Это абсолютный рекорд для молодых миллиардеров, которые «сами себя сделали».

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

Know Your Meta Tags

There are four major types of meta tags worth knowing about and we’ll talk about them all here. Some are not as useful as they once were. Others are worth using regularly, and will very likely increase your traffic by letting Google know who you are and what you provide. (There are more than four kinds of meta tags, but some are less common or not relevant to web marketing).

The four types we’ll discuss here are:

Meta Keywords Attribute — A series of keywords you deem relevant to the page in question.
Title Tag — This is the text you’ll see at the top of your browser. Search engines view this text as the «title» of your page.
Meta Description Attribute — A brief description of the page.
Meta Robots Attribute — An indication to search engine crawlers (robots or «bots») as to what they should do with the page.

Атрибуты

charset:

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

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

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

content:

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

http-equiv:

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

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

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