Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
OnkarRuikar opened this issue Aug 20, 2024 · 1 comment
Open

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

OnkarRuikar opened this issue Aug 20, 2024 · 1 comment
Labels
enhancement Improves an existing feature. idle needs discussion p2 We want to address this but may have other higher priority items. seo

Comments

@OnkarRuikar
Copy link
Contributor

OnkarRuikar commented Aug 20, 2024 •
edited
Loading

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.

2

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:
3

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:
1

<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:
4

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>
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Aug 20, 2024
@OnkarRuikar OnkarRuikar changed the title enhance(seo): implement Breadcrumb and SearchAction structured data enhance(seo): implement Breadcrumb, Article, and SearchAction structured data Aug 20, 2024
@OnkarRuikar OnkarRuikar mentioned this issue Aug 20, 2024
Merged
@caugner caugner added enhancement Improves an existing feature. needs discussion seo and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Sep 16, 2024
@caugner
Copy link
Contributor

caugner commented Sep 16, 2024

Thank you for these suggestions, Onkar. 🙌

Note that we already have structured breadcrumb data on all pages with breadcrumbs. The Blog, however, has no breadcrumbs, so it has no structured data either. This is something we want to fix, but we may be waiting for the rari work to land.

As for the structured article and search action data, I will bring this up with our internal SEO manager, and prioritize accordingly.

@caugner caugner added the p2 We want to address this but may have other higher priority items. label Sep 16, 2024
@github-actions github-actions bot added the idle label Oct 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement Improves an existing feature. idle needs discussion p2 We want to address this but may have other higher priority items. seo
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@caugner @OnkarRuikar