«Локальное» SEO. HTML тег meta

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

Содержание

Синтаксис тега «meta»

HTML тег meta — одиночный тег который размещается исключительно блоке head. Имеет четыре атрибута: name, content, charset и http-equiv. Первые два — те, которые и образуют мета-данные страницы

<head>
    <title>...</title>
    <meta charset="utf-8"/>
    <meta name="title" content="..."/>
    ...
</head>

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

А теперь перейдем к рассмотрению значений атрибута name, ведь он, имхо, самый важный(на пару с content) парень. Он может иметь 7 значений:

  1. title — сео название документа, до 70 символов;
  2. application-name — в случаи, если это веб-приложение — то в content его название;
  3. author — автор данного документа:
  4. description — описание документа. до 160 символов;
  5. generator — если документ сгенерирован программой — название этой программы;
  6. keywords — ключевые слова, до 130 символов, до 10 фраз через кому;
  7. viewport — поиска и индексации страницы не касается, от него зависит отображение страницы при масштабировании. Крайне рекомендую ко всем страницам, в head добавить
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Как пишет support google «каждый атрибут контента может содержать до 1024 символов. Пользовательский поиск может обрабатывать до 50 метатегов для каждой страницы…»

Протокол Open Graph

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

Иначе говоря — это метаданные, по которым современные социальные сети строят отображение репоста.

В этом протоколе есть свой атрибут, который полностью замещает name, — это property. У этого атрибута также есть свои значения:

Основные:

  • og:title — аналог title в name;
  • og:type — тип объекта от значения этого атрибута зависит наличие других свойств;
  • og:image — значение этого метатега должно содержать ссылку на изображение(репоста);
  • og:url — канонический урл, говоря простыми словами — постоянная ссылка на пост.

Дополнительные(необязательные, но рекомендуемые)

  • og:audio — ссылка на аудиофайл страницы, если есть;
  • og: description — аналог description в name;
  • og:determiner — слово, которое появляется перед названием этого объекта в предложении. Строковое значение, которое является членом перечисления(an, a, the…);
  • og:locale — тег физического местоположения в формате language_TERRITORY(en_US) ;
  • og:locale:alternate — альтернативные локали, каждая с которых записывается в свой тег;
  • og:site_name — если это страница сайта, то здесь — название сайта;
  • og:video — ссылка на видеофайл, если он есть.

Разметка Twitter Cards

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

Начинается она с объявления ее поддержки

<meta name="twitter: card" content = "summary"> </ meta>

далее, должна идти одна из двоих строк, в зависимости от-того, у кого есть твит-аккаунт

<--! аккаунт есть у проекта -->
<meta name="twitter: site" content="@название аккаунта"/>

<--! аккаунт есть у автора страницы -->
<meta name="twitter: creator" content="@название аккаунта"/>

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

Заключение

Здесь рассмотрено техническое использование тега <meta>. Он который является основным, но не единственным(теги a, h%d, p…), для СЕО страницы. Однако же, если содержимого метатегов не будет в заголовках(h1, h2…) или параграфах(p) — поисковые роботы обидятся на сайт и в результатах поиска вы его не увидите. И, кстати, если вам нужно больше инфы по Open Graph — загляните сюда.

Источники

Анкерные ссылки. Редактор Гутенберга.

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

Содержание

Теория анкерных ссылок

Анкерные ссылки — по сути, это обычные ссылки, которые направлены на навигацию по станице. Полный «комлект» состоит из ссылки и якоря(или анкера, кто как предпочитает).

Начнем, пожалуй с якоря. Якорь — то место, к которому будет прокручена страница при клике по анкерной ссылке. Технически, это текст, обернутый в html-тег, содержащий идентификатор.

Сама же ссылка, является тегом «a» в которой href содержит не адрес страницы, а хэш-тег(#) с идентификатором.

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

...
<a href="#slug">Link Text</a>
...
<h2 id="slug">Text Element</h2>
...

Иногда, когда объясняют теорию, вместо атрибута id name — однако, на практике, это не работает.

Постройка якоря и ссылки в гутенберге

В редакторе гутенберга все сделано так, чтобы сделать ссылки и анкеры было максимально просто. Для начала якорь: кликнем по блоку текста(заголовку) к которому должна вести ссылка.В правой нижней части экрана кликнем по пункту «дополнительно» и на латинице в поле «html якорь» впишем слово.

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

в появившемся поле введем хэш и слово с якоря слитно, enter.

Зачем?..делать ссылки

Во-первых, с моей точки зрения, это удобство для читателя. Во-вторых, и для большинства это главное, это SEO(Search Engine Optimization). Дело в том, что тест в ссылке более весом для поисков нежели просто абзац. Но не любой текст в ссылке так работает: чем более релевантен текст с текстом запроса, по которому читатель попал на вашу страницу — тем больше вес. И третье, — меню из анкерных ссылок — пожелание владельцев проекта.

Отклонюсь немного от темы, скажу, что ссылки(умеренное количество и в тему) на внешние ресурсы, также, благотворно влияют на ранжирование страницы.

Источники