Добавьте структурированные данные на свои веб-страницы

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

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

3c4b35df592b40b2.png

Что ты построишь

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

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

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

Что ты узнаешь

  • Как добавить структурированные данные на простой HTML-сайт
  • Как избежать распространенных ошибок
  • Как тестировать и проверять структурированные данные

Что вам понадобится

  • Последняя версия Chrome или другого современного веб-браузера.
  • Пример кода, представленный в этой кодовой лаборатории
  • Базовое понимание синтаксиса HTML и JSON

Вы будете использовать образец веб-страницы для этой лаборатории кода. Файлы проекта хранятся в Glitch , инструменте для создания веб-приложений и проектов кода. Чтобы создать свою собственную редактируемую копию проекта для этой кодовой лаборатории, нажмите Копировать проект Glitch :

Скопируйте проект Glitch

Поскольку наш образец сайта представляет собой блог рецептов, мы собираемся начать со структурированных данных рецептов . Структурированные данные рецепта могут обеспечить богатый результат, который может включать обширную информацию, такую ​​как описание рецепта, время приготовления и приготовления, а также информацию о питании. Ваш контент также может автоматически включать значок рецепта для изображений Google на мобильных устройствах, голосовые подсказки в Google Home и действие с контентом в Google Assistant.

Определите тип структурированных данных

Чтобы определить тип структурированных данных, выполните следующие действия:

  1. В index.html создайте элемент <script> с типом application/ld+json в <head> страницы.
<head>
<script type="application/ld+json">
</script>
</head>
  1. Внутри элемента <script> сообщите Google, что вы используете структурированные данные schema.org, установив для @context значение http://schema.org .
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
</script>
</head>
  1. Чтобы сообщить Google, что вы описываете, установите для @type значение Recipe .
<html>
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe"
}
</script>
</head>
</html>

Каждый структурированный тип данных поддерживает список обязательных и рекомендуемых свойств, которые дают Google больше информации об описываемой вещи. Эти требования и рекомендации используются в различных продуктах и ​​функциях Google. Нет ничего плохого в вашей странице, если на ней отсутствуют некоторые свойства; это просто означает, что он с меньшей вероятностью будет работать с некоторыми функциями поиска.

  1. Просмотрите список необходимых свойств в документации рецепта и найдите свойство name чтобы узнать, есть ли дополнительные рекомендации для этого свойства.
  2. В index.html введите название блюда (Party Coffee Cake) в качестве значения name после "@type": "Recipe".
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake"
}
</script>
</head>
</html>
  1. Продолжайте добавлять другие необходимые свойства, перечисленные в документации.
  2. Добавьте рекомендуемые свойства, чтобы повысить вовлеченность в поиске. Вот как должны выглядеть ваши структурированные данные:
<html>
<head>
...
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake",
  "image": "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg",
  "author": {
    "@type": "Person",
    "name": "Mary Stone"
  },
  "datePublished": "2018-03-10",
  "description": "This coffee cake is awesome and perfect for parties.",
    "prepTime": "PT20M",
    "cookTime": "PT30M",
    "totalTime": "PT50M",
    "recipeYield": "10 servings",
    "recipeCategory": "Dessert",
    "recipeCuisine": "American",
    "keywords": "cake for a party, coffee",
    "nutrition": {
      "@type": "NutritionInformation",
      "calories": "270 calories"
     },
      "recipeIngredient": [
        "2 cups of flour",
        "3/4 cup white sugar",
        "2 teaspoons baking powder",
        "1/2 teaspoon salt",
        "1/2 cup butter",
        "2 eggs",
        "3/4 cup milk"
       ],
    "recipeInstructions": [
      {
      "@type": "HowToStep",
      "text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
      },
      {
      "@type": "HowToStep",
      "text": "In a medium bowl, combine flour, sugar, and cinnamon."
      },
      {
      "@type": "HowToStep",
      "text": "Mix in butter until the entire mixture is crumbly."
      },
      {
      "@type": "HowToStep",
      "text": "In a large bowl, combine flour, sugar, baking powder, and salt."
      },
      {
      "@type": "HowToStep",
      "text": "Mix in the butter."
      },
      {
      "@type": "HowToStep",
      "text": "Spread into the prepared pan."
      },
      {
      "@type": "HowToStep",
      "text": "Sprinkle the streusel mixture on top of the cake."
      },
      {
      "@type": "HowToStep",
      "text": "Bake for 30 to 35 minutes, or until firm."
      },
      {
      "@type": "HowToStep",
      "text": "Allow to cool."
     }
  ],
  "video": [
     {
    "@type": "VideoObject", 
    "name": "How to make a Party Coffee Cake",
    "description": "This is how you make a Party Coffee Cake.",
    "thumbnailUrl": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/4x3/photo.jpg",
      "https://example.com/photos/16x9/photo.jpg"
     ],
    "contentUrl": "http://www.example.com/video123.flv",
    "embedUrl": "http://www.example.com/videoplayer.swf?video=123",
    "uploadDate": "2018-02-05T08:00:00+08:00",
    "duration": "PT1M33S",
    "interactionStatistic": {
      "@type": "InteractionCounter",
      "interactionType": { "@type": "http://schema.org/WatchAction" },
      "userInteractionCount": 2347
     },
    "expires": "2019-02-05T08:00:00+08:00"
   }
  ]
}
</script>
</head>
</html>

Проверить структурированные данные

Чтобы проверить свои данные, вам необходимо использовать URL-адрес вашего приложения Glitch. Чтобы найти URL-адрес вашего приложения в Glitch, нажмите « Поделиться» , выберите « Live App» и скопируйте URL-адрес.

В тесте с расширенными результатами введите URL-адрес своего приложения Glitch и нажмите « Проверить URL-адрес» . В идеале вы должны увидеть 0 ошибок и 1 предупреждение. (На следующем шаге вы добавите aggregateRating .) Если вы видите ошибку или более одного предупреждения, прочтите сообщение и устраните проблему.

Поскольку вы уже добавили структурированные данные Recipe , следующим шагом будет встраивание обзора и агрегированных оценок в структурированные данные Recipe (а не другие подходы, такие как простой обзор или обзор с рейтингом).

Добавить индивидуальный отзыв

Чтобы добавить первый индивидуальный отзыв от Джулии Бенсон, выполните следующие действия:

  1. В index.html добавьте еще один объект с "@type" для "Review" .
<html>
<head>
...
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Recipe",
// other recipe structured data
"review": {
  "@type": "Review"
 }
}
</script>
</head>
</html>
  1. Чтобы добавить первое обязательное свойство обзора, установите для @type author значение Person .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "review": {
    "@type": "Review",
    "author": {
      "@type": "Person",
    }
  }
}
</script>
</head>
</html>
  1. В качестве значения author введите Julia Benson .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "review": {
    "@type": "Review",
    "author": {
      "@type": "Person",
      "name": "Julia Benson"
    }
  }
}
</script>
</head>
</html>
  1. Добавьте оставшиеся обязательные свойства , перечисленные в документации.
  2. Добавьте рекомендуемые свойства, чтобы повысить вовлеченность в поиске. Вы можете использовать название сайта с рецептами (The cake makery) в качестве значения для publisher . Вот как должен выглядеть законченный обзор:
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // ...
  // other recipe structured data
  // ...
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "4",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "Mary Stone"
    },
    "datePublished": "2018-05-01",
    "reviewBody": "This cake is delicious!",
    "publisher": "The cake makery"
  }
}
</script>
</head>
</html>
  1. В инструменте проверки структурированных данных введите URL-адрес своего приложения Glitch и нажмите « Выполнить тест» . В идеале вы должны увидеть 0 ошибок и 1 предупреждение для aggregateRating . Если вы видите ошибку или несколько предупреждений, прочтите сообщение и устраните проблему.

Добавить общий рейтинг для всех отзывов

Совокупная оценка для всех обзоров - это средняя оценка, основанная на нескольких оценках или обзорах для этого рецепта. Чтобы добавить совокупный рейтинг, выполните следующие действия:

  1. В index.html добавьте aggregateRating с тем же уровнем отступа, что и "@type": "Recipe" .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // other recipe structured data
  // review structured data
  "aggregateRating": {
  }
}
</script>
</head>
</html>
  1. Установите для @type значение AggregateRating .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // other recipe structured data
  // review structured data
  "aggregateRating": {
    "@type": "AggregateRating",
  }
}
</script>
</head>
</html>
  1. Добавьте необходимые свойства, перечисленные в разделе « Свойства агрегированного рейтинга» документации разработчика.
  1. Первое обязательное свойство - ratingCount . Установите значение ratingCount 18 .
  2. Добавьте значение ratingValue . ratingValue - это средняя оценка этого рецепта, которую мы собираемся установить ratingValue 4 . Вот как должен выглядеть заполненный сводный рейтинг рецептов:
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  // other recipe structured data
  // review structured data
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingCount": "18",
    "ratingValue": "4"
  }
}
</script>
</head>
</html>
  1. В тесте с расширенными результатами введите URL-адрес своего приложения Glitch и нажмите « Проверить URL-адрес» . В идеале вы должны увидеть 0 ошибок и 0 предупреждений. Если вы видите ошибку или предупреждение, прочтите сообщение и устраните проблему.
  1. Чтобы просмотреть, как страница может выглядеть в результатах поиска, щелкните « Предварительный просмотр результатов» в тесте с расширенными результатами. f4dd7a85875518d4.png

9ffc97e46aad6cb7.png

Окончательный пример JSON-LD

Вот как ваш законченный рецепт JSON-LD может выглядеть на HTML-странице:

<!doctype HTML>
<html class="no-js">
    <head>
        <meta charset=utf-8>
        <title>Home of the best cakes - Recipe XYZ</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700">
        <link rel="manifest" href="manifest.json">
        <link rel="stylesheet" href="third_party/css/bootstrap.css">
        <link rel="stylesheet" href="third_party/css/mysite.css">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="This shop is awesome.">
        <script type="application/ld+json">
        {
        "@context": "http://schema.org/",
        "@type": "Recipe",
        "name": "Party Coffee Cake",
        "image": [
            "https://www.leannebrown.com/wp-content/uploads/2016/12/up-close-pear-cake.jpg"
        ],
        "author": {
            "@type": "Person",
            "name": "Mary Stone"
        },
        "datePublished": "2018-03-10",
        "description": "This coffee cake is awesome and perfect for parties.",          
        "prepTime": "PT20M",
        "cookTime": "PT30M",
        "totalTime": "PT50M",
        "recipeYield": "10 servings",
        "recipeCategory": "Dessert",
        "recipeCuisine": "American",
        "keywords": "cake for a party, coffee",
        "nutrition": {
            "@type": "NutritionInformation",
            "calories": "270 calories"
        },
        "recipeIngredient": [
            "2 cups of flour",
            "3/4 cup white sugar",
            "2 teaspoons baking powder",
            "1/2 teaspoon salt",
            "1/2 cup butter",
            "2 eggs",
            "3/4 cup milk"
           ],
        "recipeInstructions": [
              {
              "@type": "HowToStep",
              "text": "Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan."
              },
              {
              "@type": "HowToStep",
              "text": "In a medium bowl, combine flour, sugar, and cinnamon."
              },
              {
              "@type": "HowToStep",
              "text": "Mix in butter until the entire mixture is crumbly."
              },
              {
              "@type": "HowToStep",
              "text": "In a large bowl, combine flour, sugar, baking powder, and salt."
              },
              {
              "@type": "HowToStep",
              "text": "Mix in the butter."
              },
              {
              "@type": "HowToStep",
              "text": "Spread into the prepared pan."
              },
              {
              "@type": "HowToStep",
              "text": "Sprinkle the streusel mixture on top of the cake."
              },
              {
              "@type": "HowToStep",
              "text": "Bake for 30 to 35 minutes, or until firm."
              },
              {
              "@type": "HowToStep",
              "text": "Allow to cool."
             }
          ],
        "video": [
            {
            "@type": "VideoObject", 
            "name": "How to make a Party Coffee Cake",
            "description": "This is how you make a Party Coffee Cake.",
            "thumbnailUrl": [
              "https://example.com/photos/1x1/photo.jpg",
              "https://example.com/photos/4x3/photo.jpg",
              "https://example.com/photos/16x9/photo.jpg"
             ],
            "contentUrl": "http://www.example.com/video123.flv",
            "embedUrl": "http://www.example.com/videoplayer.swf?video=123",
            "uploadDate": "2018-02-05T08:00:00+08:00",
            "duration": "PT1M33S",
            "interactionStatistic": {
              "@type": "InteractionCounter",
              "interactionType": { "@type": "http://schema.org/WatchAction" },
              "userInteractionCount": 2347
            },
            "expires": "2019-02-05T08:00:00+08:00"
           }
          ],
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "5",
            "ratingCount": "18"
            },
        "review": {
            "@type": "Review",
            "reviewRating": {
                "@type": "Rating",
                "ratingValue": "4",
                "bestRating": "5"
            },
            "author": {
                "@type": "Person",
                "name": "Mary"
            },
            "datePublished": "2018-05-01",
            "reviewBody": "This cake is delicious!",
            "publisher": "The cake makery"
            }
         }
        </script>
    </head>

    <body>
        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="index.html">The cake makery</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="recipes.html">Recipes</a>
                        </li>
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    
        <!-- Page Content -->
        <div class="container">
    
        <!-- Page Heading/Breadcrumbs -->
        <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Recipe XYZ
                        <small>Subheading</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="index.html">Home</a>
                        </li>
                        <li><a href="recipes.html">Recipes</a>
                        </li>
                        <li class="active">Coffee Cake</li>
                    </ol>
                </div>
            </div>
            <!-- /.row -->
    
            <!-- Features Section -->
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="page-header">Party Coffee Cake</h2>
                </div>
                <div class="col-md-6">
                    <p><strong>Recipe author</strong>: Mary Stone</p>
                    <p><strong>Date published</strong>: March 10, 2018</p>
                    <p>This coffee cake is awesome and perfect for parties.</p>
                    <h2>Ingredients</h2>
                    <ul>
                        <li>2 cups of flour</li>
                        <li>3/4 cup white sugar</li>
                        <li>2 teaspoons baking powder</li>
                        <li>1/2 teaspoon salt</li>
                        <li>1/2 cup butter</li>
                        <li>2 eggs</li>
                        <li>3/4 cup milk</li>
                        <li>1 teaspoon vanilla extract</li>
                        <li>1 1/2 teaspoon group cinnamon</li>
                        <h2>Directions</h2>
                        <p>Yield: 10 servings</p>
                        <p>Prep time: 20 minutes</p>
                        <p>Cook time: 30 minutes</p>
                        <p>Total time: 50 minutes</p>
                        <li>Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.</li>
                        <li>Make the streusal topping. In a medum bowl, combine flour, sugar, and cinnamon. Mix in butter 
                            until the entire mixture is crumbly.</li>
                        <li>In a large bowl, combine flour, sugar, baking powder, and salt. Mix in the butter. Mix in the 
                            milk, egg, and vanilla. Spread into the prepared pan. </li>
                        <li>Sprinkle the streudal mixture on top of the cake.</li>
                        <li>Bake for 30 to 35 minutes, or until firm. Allow to cool.</li>
                        </ol>
                    <h2>Nutrition facts</h2>
                    <p>Per slice: 270 calories; 12 g fat; 37 carbohydrates; 2 g protein; 45 mg cholesterol; 
                        195 mg sodium.</p>
                </div>
                <div class="col-md-6">
                    <img class="img-responsive" src="cake.jpg" alt="Party coffee cake">
                </div>
            </div>
            <!-- /.row -->

            <hr>

            <!-- Reviews Section -->
            <div class="row">
                <div class="col-lg-12">
                    <h2 class="page-header">18 user reviews</h2>
                </div>
                <!-- list of reviews -->
                <div class="col-md-6">
                    <p><span class="review-date">2018-05-01</span>
                        <span class="review-stars">****</span>
                        <span class="review-name">Mary</span>
                        <span class="review-text">This coffee cake is delicious!</span></p>
                    <p><span class="review-date">2018-05-04</span>
                        <span class="review-stars">*****</span>
                        <span class="review-name">Susan</span>
                        <span class="review-text">The cake instructions are superbly crafted and accurately designed.</span></p>
                    <p><span class="review-date">2018-02-01</span>
                        <span class="review-stars">***</span>
                        <span class="review-name">Mark</span>
                        <span class="review-text">The cake also includes paprika, which makes me nervous.</span></p>
                    <p><span class="review-date">2018-02-01</span>
                        <span class="review-stars">***</span>
                        <span class="review-name">Vanessa</span>
                        <span class="review-text">I think the candle on top looks very cool, but only if you have the time to bother with it.</span></p>
                    <p><span class="review-date">2018-02-01</span>
                        <span class="review-stars">***</span>
                        <span class="review-name">Simone</span>
                        <span class="review-text">I like that they added sprinkles to the top.</span></p>
                    <p><span class="review-date">2018-02-21</span>
                        <span class="review-stars">****</span>
                        <span class="review-name">Maurice</span>
                        <span class="review-text">The coffee cake was easy to make, and tasted great.</span></p>

                    <p><a href=#>(Expand all reviews)</a></p>
                </div>
                <!-- /list of reviews -->
                
                <!-- submit review column -->
                <div class="col-md-6">
                    <form name="sentMessage" id="newReview" novalidate>
                        <div>Leave your review here!</div>

                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Your Name:</label>
                                <input type="text" class="form-control" id="name" 
                                    required data-validation-required-message="Please enter your name.">
                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Rating:</label>

                                <select name="review" id="review" class="form-control" 
                                    required data-validation-required-message="Please select a rating.">
                                    <option value="5">5 Stars (*****)</option>
                                    <option value="4">4 Stars (****)</option>
                                    <option value="3">3 Stars (***)</option>
                                    <option value="2">2 Stars (**)</option>
                                    <option value="1">1 Star  (*)</option>
                                </select>
                                <p class="help-block"></p>
                            </div>
                        </div>
                        <div class="control-group form-group">
                            <div class="controls">
                                <label>Review text:</label>
                                <textarea rows="5" cols="100" class="form-control" id="message" 
                                    required data-validation-required-message="Please enter your message" 
                                    maxlength="999" style="resize:none"></textarea>
                            </div>
                        </div>
                        <div id="success"></div>
                        <!-- For success/fail messages -->
                        <button type="submit" class="btn btn-primary">Submit review</button>
                    </form>
                </div>
            </div>

            <!-- /.row -->
                
            <hr>
    
            <!-- Call to Action Section -->
            <div class="well">
                <div class="row">
                    <div class="col-md-8">
                        <p>Try out our summer cake recipe!</p>
                    </div>
                    <div class="col-md-4">
                        <a class="btn btn-lg btn-primary btn-block" href="#">Bake that cake</a>
                    </div>
                </div>
            </div>
    
            <hr>
    
            <!-- Footer -->
            <footer>
                <div class="row">
                    <div class="col-lg-12">
                        <p>Copyright &copy; Home of the best cakes, 2018 | 
                            <a href="http://html5-templates.com/" target="_blank" rel="nofollow">HTML5 Templates</a></p>
                    </div>
                </div>
            </footer>
    
        </div>
        <!-- /.container -->
    

    
    </body>
</html>

Что мы покрыли

  • Как добавить структурированные данные на простой HTML-сайт
  • Как избежать распространенных ошибок
  • Как тестировать и проверять структурированные данные

Учить больше

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