enhance(seo): implement Breadcrumb, Article, and SearchAction structured data

Summary

Google search has introduced a new mechanism to provide information about a page and the content classification. The mechanism is named structured data.

Breadcrumb for normal pages

Google automatically infers breadcrumbs from URL. But URLs may contain unwanted directory names that users don't neccessary follow to reach the page.

Google says:

We recommend providing breadcrumbs that represent a typical user path to a page, instead of mirroring the URL structure. Some parts of the URL path don't help people understand how the page fits in your website. For example, given the URL https://example.com/pages/books/catcher_in_the_rye.html, the pages path in the URL doesn't add any information, and neither does the top level element example.com.

Using the breadcrumbs structured data the breadcrumbs sequence can be made short and useful:

Following structured data could be used:

<html>
  <head>
    <title>EventTarget: addEventListener() method - Web APIs | MDN</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@id": "https://developer.mozilla.org/en-US/docs/Web/API",
          "name": "APIs",
          "type": "WebPage"
        }
      },{
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@id": "https://developer.mozilla.org/en-US/docs/Web/API/EventTarget",
          "name": "EventTarget",
          "type": "WebPage"
        }
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

Sitelink search box for home page

The search box can be implemented on the homepage to show a search box under the search result entry:

<html>
  <head>
    <title>MDN Web Docs</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "url": "https://developer.mozilla.org/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://developer.mozilla.org/en-US/search?q={search_string}"
        },
        "query-input": "required name=search_string"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

Article and breadcrumb structures for Blog pages

The article structure can be used on blog pages. Also, breadcrumb for https://developer.mozilla.org/en-US/blog/debug-mobile-apps-across-devices/ is broken, it doesn't show blog part:

We can use the following structured data for MDN Blogs:

<html>
  <head>
    <title>Title of a News Article</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "NewsArticle",
      "headline": "How to debug mobile apps across devices",
      "image": [
        "https://example.com/photos/1x1/photo.jpg",
        "https://example.com/photos/4x3/photo.jpg",
        "https://developer.mozilla.org/en-US/blog/debug-mobile-apps-across-devices/featured.png"
      ],
      "datePublished": "2024-07-2T08:00:00+08:00",
      "dateModified": "2024-07-6T09:20:00+08:00",
      "author": [{
        "@type": "Person",
        "name": "LambdaTest",
        "url": "https://lambdatest.com/"
      }
    ]
  },

  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "item": {
          "@id": "https://developer.mozilla.org/en-US/blog",
          "name": "Blogs",
          "type": "WebPage"
        }
      },
      {
        "@type": "ListItem",
        "position": 2,
        "item": {
          "@id": "https://developer.mozilla.org/en-US/blog",
          "name": "https://developer.mozilla.org/en-US/blog/debug-mobile-apps-across-devices/",
          "type": "WebPage"
        }
      }
    ]
  }
]
    </script>
  </head>
  <body>
  </body>
</html>

mdn / yari