Support speakable schema in NewsArticle(s)

[jonoalderson]

We should add support for Google's speakable specification, so that our users' news articles can be discovered and ready by voice interfaces.

• Related to: https://github.com/Yoast/wordpress-seo/issues/13855 - Adding speakable for HowTo and FAQ content.

Assumptions

• We assume that the combination of the page title and "first paragraph" of a well-written news article will generally act as a suitable default speakable summary of that article.
• This spec also assumes that there's no speakable schema already on the page / in the graph. If speakable pieces already exist (e.g., for FAQ output), then the speakable piece should be transformed into an array, and an additional SpeakableSpecification piece added for each speakable component.

Schema requirements

We need to add a speakable attribute to the NewsArticle piece. By default, this should target the article content using a combination of CSS selectors, like so:

"speakable": {
  "@type": "SpeakableSpecification",
  "cssSelector": [
    "h1",
    "{{SELECTOR}} p:nth-of-type(1)"
  ]
}

User controls

We should provide controls which allow the user to:

• Configure their content targeting, by:

  • Specifying a {{SELECTOR}} (a CSS selector for the main body content).

    • We'll need to anticipate documentation/support requirements here (including around schema API filters to allow users to define their own paths).

• Define a speakable summary for a given post (via a textarea input), which:

  • Adds a <meta name="speakable-summary" content="{{SUMMARY}}" /> tag.

  • Replaces the cssSelector approach to use an xpath to target this element. E.g.,

  "speakable": {
    "@type": "SpeakableSpecification",
    "xpath": [
      "/h1",
      "/html/head/meta[@name='speakable-summary']/@content"
    ]
  }
  

• Add a checkbox to allow the user to fall back to / use the meta description (which may in turn be powered by the excerpt).

Failure & fallback conditions

• If {{SELECTOR}} is not set AND speakable summary is not set, then the speakable schema should not be output.

• If speakable summary is not set, and if the length of the first paragraph is < 20 words, then an additional cssSelector value should be added for "{{SELECTOR}} p:nth-of-type(2)".

  • This process should be repeated (adding additional cssSelector values, and incrementing the paragraph count) until there are > 100 words across all selected paragraphs.

V2

Future iterations should consider:

• Adding a checkbox on paragraph, heading and list blocks, to nominate content as speakable.
  • Add an additional cssSelelctor value of add "{{SELECTOR}} .speakable"
  • This will require considerations for how this intersects with default/manual selector settings, and, preservation of order when compositing.

[jdevalk]

Tempted to say that while xpath is cool, long term it's easier to just throw text in here...

[jonoalderson]

Has to be a Xpath/css selector, from my understanding!

[jonoalderson]

Updated to simplify, and to use CSS selectors (in most cases).

[jonoalderson]

Given the low adoption of speakable schema, we're unlikely to explore this in the near future. Closing for now.