Javascript dom объекты документа и доступ к ним, javascript события

Реализация

AMP-страницы со структурированными данными

AMP-страницы со структурированными данными могут появляться в карусели статей.
Если структурированных данных нет, то в результатах Google Поиска будет только обычная ссылка на страницу.
Подробнее…

Как создать AMP-страницу со структурированными данными

Выполните инструкции из спецификации проекта AMP.
Выполните , чтобы страница была доступна для сканирования Google.
Добавьте на страницу с описанием статьи.
Протестируйте структурированные данные с помощью инструмента проверки расширенных результатов.

Обычные страницы со структурированными данными

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

Как добавить структурированные данные на обычную страницу со статьей

Добавьте на страницу с описанием статьи.
Чтобы страница была доступна для сканирования Google, выполните
.
Протестируйте структурированные данные с помощью инструмента проверки расширенных результатов.

Объекты и свойства

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

Как и все переменные JavaScript, имя объекта (которое тоже может быть переменной) и имя свойства являются чувствительными к регистру. Вы можете определить свойство указав его значение. Например, давайте создадим объект и определим его свойства , , и следующим образом:

Неопределённые свойства объекта являются (а не ).

Свойства объектов JavaScript также могут быть доступны или заданы с использованием скобочной записи (более подробно см. property accessors). Объекты иногда называются ассоциативными массивами, поскольку каждое свойство связано со строковым значением, которое можно использовать для доступа к нему. Так, например, вы можете получить доступ к свойствам объекта следующим образом:

Имена свойств объекта могут быть строками JavaScript, или тем, что может быть сконвертировано в строку, включая пустую строку. Как бы то ни было, доступ к любому имени свойства, которое содержит невалидный JavaScript идентификатор (например, имя свойства содержит в себе пробел и тире или начинается с цифры), может быть получен с использованием квадратных скобок. Этот способ записи также полезен, когда имена свойств должны быть динамически определены (когда имя свойства не определено до момента исполнения). Примеры далее:

Обратите внимание, что все ключи с квадратными скобками преобразуются в тип String, поскольку объекты в JavaScript могут иметь в качестве ключа только тип String. Например, в приведённом выше коде, когда ключ добавляется в , JavaScript вызывает метод и использует эту результирующую строку в качестве нового ключа

Вы также можете получить доступ к свойствам, используя значение строки, которое хранится в переменной:

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

Так что если вызвать эту функцию вот так то получим результат:

Устранение неполадок

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

Ознакомьтесь со и проверьте, всё ли у вас правильно.
Если мы вручную приняли меры в отношении страницы, недопустимые структурированные данные на ней будут игнорироваться до тех пор, пока вы не исправите код. При этом сама страница может появляться в результатах поиска и дальше. Чтобы устранить , воспользуйтесь отчетом о мерах, принятых вручную.
Ещё раз изучите , чтобы выяснить, соответствует ли им ваш контент.
Узнайте, что может стоять за .
Мы собрали на отдельной странице ответы на часто задаваемые вопросы о сканировании и индексировании.
Вы можете участвовать в консультационных видеовстречах, которые организует Центр Google Поиска.
В случае необходимости задавайте вопросы на форуме Центра Google Поиска.

Примеры

Ниже представлен пример кода JSON-LD на AMP-странице, использующей структурированные данные .

<html amp>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://google.com/article"
      },
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": {
        "@type": "Person",
        "name": "John Doe",
        "url": "http://example.com/profile/johndoe123"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Google",
        "logo": {
          "@type": "ImageObject",
          "url": "https://google.com/logo.jpg"
        }
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Ниже приведен пример кода обычной страницы со структурированными данными .
Рекомендации по разметке обычных и AMP-страниц различаются.

<html>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "http://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "http://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Разметка Schema.org для YMYL-сайтов

Большинство коммерческих сайтов можно отнести к категории YMYL — «Your Money or Your Life», проектам, затрагивающими финансовое благополучие или здоровье пользователя.

Для таких сайтов важны факторы E-A-T — экспертность, авторитетность и достоверность. Подробно мы разбирали их в статье «».

Экспертность среди прочих способов можно подтвердить с помощью подписей авторов и экспертов к статьям

С помощью разметки Schema.org можно обратить внимание поискового бота на автора контента, эксперта-рецензента и выделить авторитетные источники

Что заполнять в разметке Schema.org для YMYL-сайтов

эксперты и сотрудники — Person, автор статьи — свойство Author;
эксперты-рецензенты, которые проверяли материал — reviewedBy;
цитаты со ссылками на авторитетные источники — citation;
предмет обсуждения — SameAs.

Если у нескольких объектов одинаковые названия или имена, разметка SameAs позволяет обозначить, о чем именно речь. К примеру, в SameAs можно указать ссылку на страницу Википедии о Майкле Джексоне или о другом Майкле Джексоне, чтобы помочь боту определить релевантность.

К медицинским материалам подход особо строгий. Для них есть отдельная разметка Schema.org/MedicalEntity.

Как показать ботам больше контента

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

К примеру, тема материала для роботов:

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

Зачем использовать Schema.org

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

Для сайтов в тематике YMYL, «Your Money or Your Life», затрагивающими финансы и здоровье, разметка позволяет указать поисковым ботам на то, что контент написан экспертами, а значит заслуживает больше внимания и доверия.

С помощью Schema.org у сайта может быть красивый структурированный сниппет в выдаче — с подробной информацией, каруселью фотографий, дополнительными элементами типа рейтинга, отзывов, таблиц с информацией.

Рецепты со сниппетами в выдаче Google

Удаление разметки чревато потерей кликов и трафика. Брайан Фрайслебен в блоге SEO INSIGHTS рассказал о сайте с рецептами, на котором случайно удалили разметку. После этого пропали расширенные сниппеты, как следствие, кликабельность в мобильной выдаче снизилась на 51%, упал трафик.

Страницы с рецептами пропали из карусели, это повлияло на среднюю позицию.

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

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

Сниппет с рецептомФрагмент разметки Schema.org для рецепта

Также разметка позволяет подключить отчеты по контенту в Яндекс.Метрике, о них подробнее.

Объектный литерал

Объектный литерал – это список разделенных запятыми свойств (пар «имя: значение»), заключенный в фигурные скобки . Имя свойства отделяется от значения двоеточием. Именем свойства может быть идентификатор или строковый литерал (допускается использовать пустую строку). Значением свойства, как отмечалось выше, может быть любое выражение JavaScript.

Ниже приводится несколько примеров создания объектов:

Создание объектов с помощью {}

JavaScript знает, что имена свойств (ключи) всегда строковые, поэтому кавычки вокруг имени свойства в литерале объекта указывать не обязательно. В этом случае имена свойств должны соответствовать тем же правилам, что и имена переменных: например, в них не должно быть пробелов, дефисов или знаков пунктуации. Если в качестве имени выступает зарезервированное слово JavaScript – его требуется брать кавычки. В ECMAScript 5 допускается использовать зарезервированные слова в качестве имен свойств без кавычек.

Записи cat и cat.name идентичны, но квадратные скобки позволяют использовать в качестве имени свойства любую строку.

Примеры

Ниже представлен пример кода JSON-LD на AMP-странице, использующей структурированные данные .

<html amp>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://google.com/article"
      },
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": {
        "@type": "Person",
        "name": "John Doe",
        "url": "http://example.com/profile/johndoe123"
      },
      "publisher": {
        "@type": "Organization",
        "name": "Google",
        "logo": {
          "@type": "ImageObject",
          "url": "https://google.com/logo.jpg"
        }
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

<html>
  <head>
    <title>Article headline</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://example.com/photos/16x9/photo.jpg"
       ],
      "datePublished": "2015-02-05T08:00:00+08:00",
      "dateModified": "2015-02-05T09:20:00+08:00",
      "author": [{
          "@type": "Person",
          "name": "Jane Doe",
          "url": "http://example.com/profile/janedoe123"
        },{
          "@type": "Person",
          "name": "John Doe",
          "url": "http://example.com/profile/johndoe123"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Определение методов

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