Primefaces: SEO markup - BreadCrumb add schema.org

Created on 8 Jan 2019 · 5Comments · Source: primefaces/primefaces

SEO markup support for breadcrumb would be a great addition all public sites would benefit from.

Many sites already have a main navigation _p:breadCrumb_ and markup is hard to add for complex breadcrumbs with template hieararchy or optional rendered attributes, since the _schema.org_ markup requires a _position_ / index parameter. _(which should be optional in a sorted list and would make implementation very easy)._

<p:breadCrumb>
    <p:menuitem value="Home" outcome="/index.xhtml" rendered="#{not clientView}"/>
    <ui:insert name="content_breadCrumb"/>
</p:breadCrumb>

Formats

Google prefers JSON notation as seen in https://developers.google.com/search/docs/guides/intro-structured-data, but flexible support could be added.

Head

Optional data could be rendered to head since its a _

All 5 comments

Could you please explain in more detail what exactly should be included in the markup? A concrete example would be nice.

Since you mention a schemaFormatattribute, which formats other than json-ld do you want to support? Microdata, RDFa?

Also, I am not sure if it makes sense to support schema.org markup for just one specific component. I'd prefer are more generic solution.

I'd recommend to first collect ideas regarding search engine optimization in general before implementing just a single feature.

Anyone knows a _best practice_ paper for SEO?

Edit: Search Engine Optimization (SEO) Starter Guide

cnsgithub on 8 Jan 2019

Example for schema.org BreadcrumbList follows...

Showcase (https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml):

<p:breadCrumb>
    <p:menuitem value="Categories" url="#" />
    <p:menuitem value="Sports" url="#" />
    <p:menuitem value="Basketball" url="#" />
    <p:menuitem value="NBA" url="#" />
    <p:menuitem value="Teams" url="#" />
    <p:menuitem value="L.A. Lakers" url="#" />
    <p:menuitem value="Roster" url="#" />
    <p:menuitem value="Kobe Bryant" url="#" />
</p:breadCrumb>

JSON-LD:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Categories",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Sports",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Basketball",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "NBA",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 5,
    "name": "Teams",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 6,
    "name": "L.A. Lakers",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 7,
    "name": "Roster",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  },{
    "@type": "ListItem",
    "position": 8,
    "name": "Kobe Bryant",
    "item": "https://www.primefaces.org/showcase/ui/menu/breadcrumb.xhtml#"
  }]
}
</script>

Structured Data Testing Tool:
https://search.google.com/structured-data/testing-tool#
Please note that item must be a valid URL. However, since p:menuitem url is optional, an appropriate URL won't be always available.

Generalization:
Since p:menuItem is used by various menu components (e.g. Dock, MegaMenu, MenuButton), generation of structured data should not be restricted to p:breadcrumb.

cnsgithub on 8 Jan 2019

👍2

I like this idea. But it should definitely be an "opt-in" property which is false by default. I wouldn't want it generating this extra script for no reason for say an internal website.

melloware on 8 Jan 2019

👍3

@cnsgithub

Format

Basically a single supported format that google understands is all we would need. I just want to mention schema.org and search engines support multiple formats with pros and cons.

SEO strategy

If i find more suitable ideas i will open respective issues like #4376. SEO is one of the most important topics in public websites and definetly interesting for a lot of PrimeTek projects.