Какие html-элементы более востребованы: анализ 8 млн страниц с позиции seo
Содержание:
- HTML Tags
- Alt атрибуты изображения
- Schema.org для описания контента
- Другие метатеги
- Meta Tag Definition: What Are Meta Tags?
- Атрибут http-equiv
- Мета тег link rel canonical
- Особенности взаимодействия атрибутов name и content
- Attribute Values
- Мета тег title
- HTML Теги
- Элемент
- Мета-теги
- Атрибуты name и content тега
- Specify Character Set
- Группа значений атрибута HTTP-EQUIV
- Аналитика социальных сетей
- Что у нас получилось
- HTML Tags
- Значение атрибута тега “robots”
- Совмещаем теги
- Setting the Viewport
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>
Alt атрибуты изображения
Атрибут alt изображения добавляется к тегу изображения img для описания его содержимого. Альтернативные атрибуты важны с точки зрения внутренней оптимизации сайта по двум причинам:
- Альтернативный текст показывается посетителям, если какое-либо конкретное изображение не может быть загружено (или если отображение картинок отключено).
- Атрибуты Alt обеспечивают контекст для роботов, потому что поисковые системы не могут «видеть» изображения.
На e-commerce сайтах изображения часто имеют решающее влияние на то, как посетитель взаимодействует со страницей
Поисковики так же прямо заявляют о важности этого тега
Например, Google в своих гайдах для вебмастеров пишет, что помощь поисковым системам в понимании того, что находится на картинках, и как они сочетаются с остальным контентом, помогает соотносить страницу сайта с подходящими поисковыми запросами.
Даже Мюллер писал у себя в Твиттере, что продуманное альтернативное описание изображения необычайно важно, если вы хотите занять высокое место в Google Картинках. Однако не забывайте о релевантности
Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте
Однако не забывайте о релевантности. Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте.
Оптимизация alt тега img для изображений
- Сделайте всё возможное, чтобы оптимизировать свои самые важные изображения (картинки товаров, инфографику, инструкции), которые могут получить хорошие позиции в поиске Google Images.
- Добавьте alt-текст на страницах, где не так много другого контента (кроме картинок).
- Делайте тег alt для изображений понятным и достаточно информативным, разумно используйте ключевые слова и убедитесь, что они естественным образом вписываются в содержание страниц.
Schema.org для описания контента
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">
<h1 itemprop="name headline">Тайтл статьи</h1>
<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, и тогда поисковые системы будут лучше понимать, что содержится на страницах вашего сайта. Например, обозначить свои товары, чтобы они были доступны для поиска в .
Другие метатеги
Есть еще несколько метатегов, которые нужно добавлять на все веб-страницы в разделе <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, и http-equiv. Мы должны упомянуть еще одну важную часть метаинформации, хотя она не задается в виде тега. Атрибут изображений alt описывает содержимое картинок на сайте.
alt — это единственный способ продвинуть изображения в поиске. Компьютеры еще не распознают графического содержимого, поэтому мы должны сообщить им, что изображено на картинке. Именно по этой причине атрибут alt является обязательным для всех изображений.
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.
Атрибут http-equiv
Важный атрибут тега HTML <meta> – http-equiv. Он используется аналогично name с атрибутом charset, который задает кодировку страницы. Для этого http-equiv нужно задать значение content-type, а в атрибуте content указать тип документа и кодировку, которую нужно использовать. Например: <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>. Если разобрать эту запись более подробно, то станет понятно, что атрибут http-equiv указывает браузеру на то, как и на основании каких данных обработать страницу.
У этого атрибута могут быть и другие значения:
- expires – используется для установки даты и времени, после которой контент будет считаться устаревшим;
- pragma – указывает способ кэширования страницы;
- refresh – указывает, что нужно отобразить другой документ в браузере.
Значением content type указывается, что будет обрабатываться какая-то часть контента, то есть содержания веб-страницы. При помощи атрибута content браузер понимает, что обработать нужно именно текст нашего html-документа. Далее в записи располагается знакомый атрибут для описания кодировки страницы, где сообщается, какой именно она будет.
Мета тег link rel canonical
Тег link rel=”canonical” – это способ сообщить поисковым системам, какую версию страницы вы считаете основной и хотели бы, чтобы её индексировали поисковые системы и находили люди.
Он обычно используется в тех случаях, когда одна и та же страница доступна по нескольким разным URL-адресам или несколько разных страниц имеют очень похожий контент, охватывающий одну и ту же тему.
Внутренний дублированный контент на сайте не рассматривается поисковиками так же строго, как скопированный у конкурентов, поскольку обычно за этим не скрывается никаких манипулятивных целей.
Выбранный URL сканируется чаще остальных, и риск штрафа практически отсутствует, но такое положение дел далеко не оптимально.
Ещё одно преимущество заключается в том, что канонизация страницы упрощает отслеживание статистики, связанной с контентом.
Кроме всего прочего, Джон Мюллер также упоминает, что использование rel=canonical для дублированного контента помогает Google объединить все ваши линкбилдерские усилия и передать сигналы ссылок со всех версий страницы на предпочтительную.
Использование тега canonical
Страницы со схожим контентом на одну и ту же тему.
Дублированный контент, доступный по разным URL-адресам.
Разные версии одной и той же страницы, различающиеся по ID или другим URL-параметрам, не влияющим на контент.
Осторожно используйте мета-тег canonical на схожих страницах. Если две страницы, объединённые им, достаточно сильно отличаются в плане контента, поисковая система может просто проигнорировать ваш тег.
Особенности взаимодействия атрибутов name и content
Для того чтобы взаимодействие атрибутов тега <meta> name и content стало понятнее, рассмотрим еще одно значение name – author. Используя его вместе с content, можно указать автора страницы. Пример: <meta name=»author» content=»имя автора»>. Еще одним важным значением атрибута name тега HTML <meta> является keywords, или ключевые слова. Они перечисляются через запятую и нужны для SEO-оптимизации страницы. В настоящее время ведутся споры, так ли важны ключевые слова и действительно ли они оказывают влияние на ранжирование, но точный ответ на этот вопрос знают только технические специалисты, работающие на крупные поисковики. Рядовым же специалистам по созданию и раскрутке сайтов рекомендуется все же добавлять этот мета-тег в <head>.
Attribute Values
| Value | Description |
|---|---|
| content-security-policy | Specifies a content policy for the document.
Example: <meta http-equiv=»content-security-policy» content=»default-src |
| 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 |
❮ HTML <meta> tag
Мета тег title
Например, если вы посмотрите HTML-код этой страницы, то увидите, что заголовок выглядит следующим образом:
Теги заголовков помещаются в <head> вашей веб-страницы и предназначены для предоставления чёткого и исчерпывающего представления о том, о чём эта страница. Но имеют ли они такое же сильное влияние на позиции в выдаче, как это было много лет назад?
В последние несколько лет идёт активное обсуждение поведенческих факторов, как логического доказательства релевантности и, следовательно, сигнала ранжирования – даже представители поисковых систем периодически признают их влияние.
Заголовок страницы по-прежнему является первым, что пользователь видит в поисковой выдаче и решает, отвечает ли страница поисковому запросу. Правильно написанный title может значительно увеличить количество кликов по сниппету и трафик на сайт, что, безусловно, влияет на ранжирование.
Простой эксперимент показывает, что Гуглу больше не нужен ваш тайтл, включающий ключ с точным соответствием, чтобы понять тему страницы. Например, несколько лет назад выдача Гугла по запросу «как повысить узнаваемость бренда» очень сильно походила на то, что вы можете наблюдать сейчас в Яндексе:
Всего 1 заголовок из всего топа не включает точное соответствие. А теперь давайте взглянем на Google:
Всего 1 заголовок из всего топа включает точное соответствие. Но при этом в Гугле нет ни одного неуместного результата: каждая, из приведённых здесь страниц, объясняет, как повысить узнаваемость, и заголовки это отражают.
Поисковые системы смотрят на общую картину и обычно оценивают содержание страницы в целом, но «обложка книги» всё ещё имеет значение, особенно, когда речь идёт о взаимодействии с пользователями.
Как правильно заполнять title
- Сделайте для каждой страницы уникальный заголовок, который кратко и точно описывает её контент.
- Если хотите, чтобы заголовки не обрезались в поисковой выдаче, лучше ограничивать их 50-60 символами. В Google длинные заголовки сокращаются, примерно, до 600-700 пикселей, но эти цифры иногда меняются, так что не стоит их жёстко придерживаться.
- Главные ключевые слова должны стоять как можно ближе к началу заголовка. Но вставляйте их максимально органично, как будто вы это делаете для посетителей сайта.
- Используйте название вашего бренда в названии, даже если оно не отображается в поисковой выдаче, это всё равно будет иметь значение для поисковой системы.
Совет: используйте title для привлечения внимания
Тег заголовка ценен не только потому, что он является основным элементом поисковой выдачи, но и потому, что он действует, как заголовок вкладки в вашем веб-браузере. Это можно использовать для привлечения внимания пользователя. Например:
Такой подход используют социальные сети: ВКонтакте, Facebook, LinkedIn, чтобы показать вам, что имеются новые уведомления. Эта тактика может дать весьма неплохой результат!
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>
Элемент
С помощью элемента <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 — устанавливает начальный уровень масштабирования при первой загрузке страницы браузером.
Мета-теги
Каким образом разместить эти атрибуты? Например, при помощи мета тегов для 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 страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д. |
Атрибуты name и content тега
Имеются у элемента «meta» и другие атрибуты. Так
атрибут name задает имя (регистронезависимое) для пары
«имя=значение». Используется совместно с
атрибутом content, который, соответственно, устанавливает значение для данной
пары. Разрешается указывать в одном атрибуте content сразу несколько значений, перечисленных через запятую или точку
с запятой. Короче, при помощи этих двух атрибутов задается пара «имя=значение», которая определяется в следующем
формате: <meta name=»имя» content=»значение»>.
Перечислим некоторые из имен, задаваемых атрибутом name, и соответствующих им значений, указываемых в атрибуте
content:
«author» – в атрибуте content указывается имя автора;
«copyright» – если страница разрабатывалась организацией, то авторство обычно не указывается,
а используется название организации;
«description» – когда атрибут name имеет такое значение, в атрибуте
content приводится краткое описание страницы, которое используется поисковыми машинами для индексации, а
также выводе ими аннотации при выдаче по запросу;
«document-state» – для этого имени атрибут content
может принимать два значения: «static» и «dynamic»; в первом случае поисковым
машинам сообщается, что документ нужно индексировать только один раз и нет необходимости в индексации в дальнейшем; во втором случае от поисковых
машин требуется постоянная индексация веб-страницы;
«robots» – для этого имени используется ряд значений атрибута content:
«index» – роботам разрешается индексировать данную страницу;
«noindex» – роботам запрещается индексировать данную страницу; при этом она не попадает
в базу поисковой машины и, соответственно, её невозможно будет найти через поисковую систему;
«follow» – роботам разрешается переходить по ссылкам на данной странице;
«nofollow» – роботам запрещается переходить по ссылкам на данной странице; кроме того,
ссылкам не передаётся ТИЦ (тематический индекс цитирования) и PageRank
(определяет «важность» страницы);
«noarchive» – роботам запрещается кешировать данную страницу;
«revisit» – используется для управления частотой индексации веб-страницы в поисковой системе;
например, для переиндексации страницы раз в три недели в качестве значения атрибута content следует
указать «21»;
url – для этого имени атрибут content принимает в качестве
значения адрес, по которому робот поисковой системы перенаправляется для индексации на другую страницу (текущая страница при этом не
индексируется); это нужно для отмены индексации «зеркала» и генерируемых страниц.
Код с использованием элементов «meta» и его атрибутов показан в примере №1.
<!DOCTYPE html> <html> <head> <!-- Сообщаем браузеру кодировку документа --> <meta charset="utf-8"> <!-- Указываем автора страницы --> <meta name="author" content="Romanovsky Peter"> <!-- Описываем страницу --> <meta name="description" content="Атрибуты тега meta"> <!-- Разрешаем индексировать страницу постоянно --> <meta name="document-state" content="dynamic"> <!-- Разрешаем переиндексировать раз в 2 недели --> <meta name="revisit" content="14"> <!-- Разрешаем роботам посещать и ходить по ссылкам страницы --> <meta name="robots" content="index, follow"> <!-- Просим робота поисковой машины индексировать другую страницу. --> <meta name="url" content="https://site.name/html/teg_meta.html"> <title>Пример №1</title> </head> <body> ... Тут расположена выводимая информация. ... </body> </html>
Пример №1. Использование элемента «meta» и его атрибутов
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
Next Page
Группа значений атрибута HTTP-EQUIV
«Content-Type»
Content-Type определяет тип документа и его кодировку.
HTML-код с «Content-Type»:
В HTML5 указание кодировки упрощено:
«refresh»
Refresh — задержка времени (в секундах) перед тем, как браузер обновит страницу. Кроме того, может использоваться автоматическая загрузка другой html-страницы с заданным адресом (url).
HTML-код с «refresh»:
Браузер поймет эту запись, как через 5 секунд загрузить новую страницу, указанную в параметре URL, в данном случае это переход на сайт wm-school.ru.
Значение «refresh» позволяет создавать перенаправление (редирект) на другой сайт. Если URL не указан, произойдет автоматическое обновление текущей страницы через количество секунд, заданных в атрибуте content.
Обратите внимание, что кавычки в указании URL-адреса перед http не ставятся.
Аналитика социальных сетей
Этой ошибкой указывает, что, если вы собираетесь использовать их аналитический инструмент Domain Insights, то нужно будет предоставить уникальный ID, привязанный к вашему аккаунту. Мета-тег должен выглядеть следующим образом:
<meta property="fb:app_id" content="your_app_id" />
У имеется нечто похожее — Twitter Card Analytics. рекомендует использовать следующий мета-тега, который должен содержать ваш логин в , привязанный к публикуемой веб-странице:
<meta name="twitter:site" content="@website-username">
Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта, и это никак не скажется на отображении публикуемой веб-страницы в хронике или ленте .
Что у нас получилось
И на этом, пожалуй, все. Стоит отметить, что в документации и есть множество других мета тегов для 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">
Пожалуйста, оставляйте свои отзывы по текущей теме материала. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!
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>
Значение атрибута тега “robots”
Еще одно интересное значение HTML<meta> name – robots. С его помощью можно разрешить и запретить индексацию веб-страницы какими-либо поисковыми машинами. Здесь в значении content можно написать index – и разрешить индексацию, или noindex – и запретить ее. Дополнительно через запятую в значении тега указывается также follow или nofollow, то есть “разрешить” или “запретить переход по ссылкам с веб-страницы”. Можно запрещать индексацию, при этом разрешая переходы, и наоборот. Еще один вариант разрешить все – добавить в атрибут content значение all. Для того чтобы запретить все, нужно написать none.
Совмещаем теги
Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что позволяет заменять мета-теги 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"> <meta name="twitter:card" content="summary_large_image">
Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение в 1Мб.
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:
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
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.
