Dodaj uporządkowane dane do swoich stron internetowych

Wyszukiwarka Google ciężko pracuje, aby zrozumieć zawartość strony internetowej. Możesz nam pomóc, dostarczając wyraźnych wskazówek dotyczących znaczenia strony z ustrukturyzowanymi danymi.

Dane strukturalne umożliwiają ujednolicenie informacji o stronie i sklasyfikowanie zawartości strony. Używamy również danych strukturalnych, aby umożliwić specjalne funkcje i ulepszenia wyników wyszukiwania. Na przykład strona z przepisami z prawidłowymi danymi strukturalnymi może kwalifikować się do wyświetlenia w graficznym wyniku wyszukiwania, który nazywamy wynikiem z elementami rozszerzonymi w karuzeli hosta:

3c4b35df592b40b2.png

Co zbudujesz

Ten codelab przeprowadzi Cię przez proces dodawania kilku typów danych strukturalnych do prostej witryny HTML, w tym, gdzie umieścić dane strukturalne w witrynie i jak zweryfikować dane strukturalne.

W naszym przykładzie skupimy się na witrynie z przepisami, ponieważ jest łatwa do przetestowania i zawiera kilka funkcji dodatkowych, takich jak recenzje i karuzele. Techniki, których się nauczysz, mogą zwiększyć ruch w Twojej witrynie, a nie tylko w witrynach z przepisami.

Na końcu codelab będziesz mieć przykładową witrynę, która kwalifikuje się do wyświetlania z elementami rozszerzonymi w wyszukiwarce Google. Wdrażając inne typy danych strukturalnych, powinieneś czuć się pewnie.

Czego się nauczysz

  • Jak dodać dane strukturalne do prostej witryny HTML
  • Jak uniknąć typowych pułapek
  • Jak testować i weryfikować uporządkowane dane

Co będziesz potrzebował

  • Najnowsza wersja Chrome lub innej nowoczesnej przeglądarki internetowej
  • Przykładowy kod podany w tym codelab
  • Podstawowa znajomość składni HTML i JSON

Będziesz używać przykładowej strony internetowej dla tego codelab. Pliki projektów są przechowywane w Glitch , który jest narzędziem do tworzenia aplikacji internetowych i projektów kodu. Aby utworzyć własną, edytowalną kopię projektu dla tej karty kodów, kliknij opcję Kopiuj projekt Glitch :

Skopiuj projekt Glitch

Ponieważ naszą przykładową witryną jest blog z przepisami, zaczniemy od uporządkowanych danych dotyczących przepisów. Dane strukturalne przepisu mogą zapewnić bogate wyniki, które mogą zawierać szczegółowe informacje, takie jak opis przepisu, czas gotowania i przygotowania oraz informacje o wartościach odżywczych. Twoje treści mogą również automatycznie włączać plakietkę z przepisem dla Grafiki Google na urządzeniach mobilnych, wskazówki głosowe w Google Home oraz akcję dotyczącą treści w Asystencie Google.

Zdefiniuj typ danych strukturalnych

Aby zdefiniować typ uporządkowanych danych, wykonaj poniższe czynności:

  1. W pliku index.html utwórz element <script> z typem ustawionym na application/ld+json w sekcji <head> strony.
<head>
<script type="application/ld+json">
</script>
</head>
  1. W elemencie <script> poinformuj Google, że używasz uporządkowanych danych schema.org, ustawiając @context na http://schema.org .
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
</script>
</head>
  1. Aby powiedzieć Google, jaki rodzaj rzeczy @type , ustaw @type na Recipe .
<html>
<head>
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe"
}
</script>
</head>
</html>

Każdy typ uporządkowanych danych obsługuje listę wymaganych i zalecanych właściwości, które dostarczają Google więcej informacji o opisywanej rzeczy. Te wymagania i zalecenia dotyczą różnych produktów i funkcji Google. Nie ma nic złego w Twojej stronie, jeśli brakuje niektórych właściwości; oznacza to po prostu, że jest mniej prawdopodobne, że będzie działać z niektórymi funkcjami wyszukiwania.

  1. Przejrzyj listę wymaganych właściwości w dokumentacji receptury i znajdź właściwość name aby sprawdzić, czy istnieją dodatkowe wytyczne dotyczące tej właściwości.
  2. W pliku index.html wprowadź nazwę dania (czyli Party Coffee Cake) jako wartość name po "@type": "Recipe".
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "name": "Party Coffee Cake"
}
</script>
</head>
</html>
  1. Kontynuuj dodawanie innych wymaganych właściwości wymienionych w dokumentacji.
  2. Dodaj zalecane właściwości, aby zwiększyć zaangażowanie w wyszukiwarkę. Oto jak powinny wyglądać uporządkowane dane:
<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>

Zweryfikuj dane strukturalne

Aby zweryfikować swoje dane, musisz użyć adresu URL swojej aplikacji Glitch. Aby znaleźć adres URL swojej aplikacji w Glitch, kliknij Udostępnij , wybierz Aplikacja na żywo , a następnie skopiuj adres URL.

W teście wyników z elementami rozszerzonymi wprowadź adres URL swojej aplikacji Glitch i kliknij Testuj adres URL . W idealnym przypadku powinieneś zobaczyć 0 błędów i 1 ostrzeżenie. (W następnym kroku dodasz wartość aggregateRating .) Jeśli zobaczysz błąd lub więcej niż jedno ostrzeżenie, przeczytaj komunikat i rozwiąż problem.

Ponieważ dodano już uporządkowane dane Recipe , następnym krokiem jest osadzenie recenzji i zagregowanych ocen w uporządkowanych danych Recipe (zamiast innych podejść, takich jak prosta recenzja lub recenzja z oceną).

Dodaj indywidualną recenzję

Aby dodać pierwszą indywidualną recenzję Julii Benson, wykonaj następujące czynności:

  1. W "@type" index.html dodaj kolejną jednostkę z "@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. Aby dodać pierwszą wymaganą właściwość recenzji, ustaw @type author na Person .
<html>
<head>
...
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Recipe",
  "review": {
    "@type": "Review",
    "author": {
      "@type": "Person",
    }
  }
}
</script>
</head>
</html>
  1. Wprowadź Julia Benson jako wartość author .
<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. Dodaj pozostałe wymagane właściwości wymienione w dokumentacji.
  2. Dodaj zalecane właściwości, aby zwiększyć zaangażowanie w wyszukiwarkę. Możesz użyć nazwy witryny z przepisami (The cake makery) jako wartości dla publisher . Oto jak powinna wyglądać ukończona recenzja:
<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. W narzędziu do testowania uporządkowanych danych wprowadź adres URL aplikacji Glitch i kliknij Uruchom test . Najlepiej byłoby, gdybyś zobaczył 0 błędów i 1 ostrzeżenie dla aggregateRating . Jeśli zobaczysz błąd lub więcej niż jedno ostrzeżenie, przeczytaj wiadomość i rozwiąż problem.

Dodaj łączną ocenę dla wszystkich recenzji

Łączna ocena wszystkich recenzji to średnia ocena oparta na wielu ocenach lub recenzjach dotyczących tego przepisu. Aby dodać ocenę zbiorczą, wykonaj poniższe czynności:

  1. W pliku index.html dodaj aggregateRating na tym samym poziomie wcięcia co "@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. Ustaw @type na 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. Dodaj wymagane właściwości, które są wymienione w sekcji Właściwości oceny zbiorczej w dokumentacji programisty.
  1. Pierwsza wymagana właściwość to ratingCount . Ustaw wartość ratingCount na 18 .
  2. Dodaj ratingValue . ratingValue to średnia ocena dla tego przepisu, którą ustawimy na 4 . Oto jak powinna wyglądać kompletna zbiorcza ocena przepisów:
<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. W teście wyników z elementami rozszerzonymi wprowadź adres URL swojej aplikacji Glitch i kliknij Testuj adres URL . W idealnym przypadku powinieneś zobaczyć 0 błędów i 0 ostrzeżeń. Jeśli zobaczysz błąd lub ostrzeżenie, przeczytaj wiadomość i rozwiąż problem.
  1. Aby zobaczyć, jak strona mogłaby wyglądać w wynikach wyszukiwania, kliknij opcję Podgląd wyników w teście wyników z elementami rozszerzonymi. f4dd7a85875518d4.png

9ffc97e46aad6cb7.png

Ostateczna próbka JSON-LD

Oto jak Twój kompletny przepis na JSON-LD może wyglądać na stronie 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>

Co omówiliśmy

  • Jak dodać dane strukturalne do prostej witryny HTML
  • Jak uniknąć typowych pułapek
  • Jak testować i weryfikować uporządkowane dane

Ucz się więcej

Dowiedz się więcej o danych strukturalnych, przeglądając następujące zasoby: