Add FAQPage schema markup to plugin pages

[jonoaldersonwp]

Plugin pages, like ​https://wordpress.org/plugins/autoptimize/, often contain FAQ content.

When this is the case, we should output FAQ schema markup, with an aim to encourage Google to show FAQ questions+answers in the search results (therefore achieving extra visibility and clickthrough-rates).

Approach

• Add an additional node to the existing schema markup on plugin pages, for "@type": "FAQPage".

• Add a mainEntity property to house the questions.
  • Loop through each question/answer, and construct a Question node with an acceptedAnswer property.

Example output

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "@id": "{{CANONICAL_URL}}",
  "url": "{{CANONICAL_URL}}",
  "mainEntity": [{
    "@type": "Question",
    "name": "What does the plugin do to help speed up my site?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts (optionally) to the footer. It also minifies the HTML code itself, making your page really lightweight."
    }
  }, {
    "@type": "Question",
    "name": "But I’m on HTTP/2, so I don’t need Autoptimize?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "HTTP/2 is a great step forward for sure, reducing the impact of multiple requests from the same server significantly by using the same connection to perform several concurrent requests. That being said, <a href="http://engineering.khanacademy.org/posts/js-packaging-http2.htm">concatenation of CSS/ JS can still make a lot of sense</a>, as described in <a href="https://css-tricks.com/http2-real-world-performance-test-analysis/">this css-tricks.com article</a> and this <a href="http://calendar.perfplanet.com/2015/packaging-for-performance/">blogpost from one of the Ebay engineers</a>. The conclusion; configure, test, reconfigure, retest, tweak and look what works best in your context. Maybe it’s just HTTP/2, maybe it’s HTTP/2 + aggregation and minification, maybe it’s HTTP/2 + minification (which AO can do as well, simply untick the “aggregate JS-files” and/ or “aggregate CSS-files” options). And Autoptimize can do a lot more then “just” optimizing your JS &amp; CSS off course "
    }
  }, {
    "@type": "Question",
    "name": "Will this work with my blog?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Although Autoptimize comes without any warranties, it will in general work flawlessly if you configure it correctly. See “Troubleshooting” below for info on how to configure in case of problems."
    }
  },
  {...}
  ]
}

Sanitization concerns

All HTML tags should be stripped from fields, with the exception of the text property of an acceptedAnswer, which should:

• Accept <a>, <strong> and <em> tags.
• Disallow/remove any values/properties/attributes of these tags (other than the href attribute on <a> tags).
• Remove invalid markup (e.g., an <a> without a closing </a>).

Meta Trac: https://meta.trac.wordpress.org/ticket/4695

This PR enhances the existing JSON-LD schema output on plugin detail pages to include a FAQPage node when such FAQ content is available.

Verified by setting up WordPress Meta Environment with VVV.

Schema Verification link: ​https://search.google.com/test/rich-results/result?id=NcC3jhx4MFOkZgdLgnMlOg

## Screenshots

## Schema Output
`html
<script type="application/ld+json">
[
{
"@context": "​http://schema.org",
"@type": [
"SoftwareApplication",
"Product"
],
"applicationCategory": "Plugin",
"operatingSystem": "WordPress",
"name": "Jetpack by WordPress.com",
"url": "​http://wordpressorg.test/plugins/jetpack/",
"description": "The one plugin you need for stats, related posts, search engine optimization, social sharing, protection, backups, speed, and email list management.",
"softwareVersion": "4.8.1",
"fileFormat": "application/zip",
"downloadUrl": "​https://downloads.wordpress.org/plugin/jetpack.4.8.1.zip",
"dateModified": "2017-04-05T19:59:54+00:00",
"aggregateRating": {
"@type": "AggregateRating",
"worstRating": 1,
"bestRating": 5,
"ratingValue": "4.1",
"ratingCount": 1312,
"reviewCount": 1312
},
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": "​http://schema.org/DownloadAction",
"userInteractionCount": 35787898
},
"image": [
"​https://ps.w.org/jetpack/assets/icon.svg?rev=969908",
"​https://ps.w.org/jetpack/assets/banner-1544x500.png?rev=1173629"
],
"offers": {
"@type": "Offer",
"url": "​http://wordpressorg.test/plugins/jetpack/",
"price": "0.00",
"priceCurrency": "USD",
"seller": {
"@type": "Organization",
"name": "WordPress.org",
"url": "​https://wordpress.org"
}
}
},
{
"@context": "​https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Installation Instructions",
"acceptedAnswer": {
"@type": "Answer",
"text": "<h4>Automated Installation</h4>\n\n<p>Installation is free, quick, and easy. <a href=\"​https://jetpack.com/install?from=wporg\">Install Jetpack from our site</a> in minutes.</p>\n\n<h4>Manual Alternatives</h4>\n\n<p>Alternatively, install Jetpack via the plugin directory, or upload the files manually to your server and follow the on-screen instructions. If you need additional help <a href=\"​http://jetpack.com/support/installing-jetpack/\">read our detailed instructions</a>.</p>"
}
},
{
"@type": "Question",
"name": "Is Jetpack Free?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>Yes! Jetpack's core features are and always will be free.</p>\n\n<p>These include: <a href=\"​https://jetpack.com/features/traffic/site-stats\">site stats</a>, a <a href=\"​https://jetpack.com/features/writing/content-delivery-network/\">high-speed CDN</a> for images, <a href=\"​https://jetpack.com/features/traffic/related-posts\">related posts</a>, <a href=\"​https://jetpack.com/features/security/downtime-monitoring\">downtime monitoring</a>, brute force <a href=\"​https://jetpack.com/features/security/brute-force-attack-protection\">attack protection</a>, <a href=\"​https://jetpack.com/features/traffic/automatic-publishing/\">automated sharing</a> to social networks, <a href=\"​https://jetpack.com/features/writing/sidebar-customization/\">sidebar customization</a>, and many more.</p>"
}
},
{
"@type": "Question",
"name": "Should I purchase a paid plan?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>Jetpack's paid services include automated backups, security scanning, spam filtering, video hosting, site monetization, SEO tools, and priority support.</p>\n\n<p>If you're interested in learning more about the extra layers of protection and advanced tools available, learn more about our <a href=\"​https://jetpack.com/pricing?from=wporg\">paid plans</a>.</p>"
}
},
{
"@type": "Question",
"name": "Why do I need a WordPress.com account?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>Since Jetpack and its services are provided and hosted by WordPress.com, a WordPress.com account is required for Jetpack to function.</p>"
}
},
{
"@type": "Question",
"name": "I already have a WordPress account, but Jetpack isn't working. What's going on?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>A WordPress.com account is different from the account you use to log into your self-hosted WordPress. If you can log into <a href=\"​https://wordpress.com\">WordPress.com</a>, then you already have a WordPress.com account. If you can't, you can easily create one <a href=\"​https://jetpack.com/install?from=wporg\">during installation</a>.</p>"
}
},
{
"@type": "Question",
"name": "How do I view my stats?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>Once you've installed Jetpack your stats will be available on <a href=\"​https://wordpress.com/stats\">WordPress.com/Stats</a>, on the official <a href=\"​https://apps.wordpress.com/mobile/\">WordPress mobile apps</a>, and on your Jetpack dashboard.</p>"
}
},
{
"@type": "Question",
"name": "How do I contribute to Jetpack?",
"acceptedAnswer": {
"@type": "Answer",
"text": "<p>There are opportunities for developers at all levels to contribute. <a href=\"​https://jetpack.com/contribute\">Learn more about contributing to Jetpack</a> or consider <a href=\"​https://jetpack.com/beta\">joining our beta program</a>.</p>"
}
}
]
}
]
</script>

[jonoaldersonwp]

This doesn't appear to set an @id or URL, which will cause the graph to be fragmented.

[nikunj8866]

@jonoaldersonwp I've implemented the FAQPage schema as per the official Google guidelines: ​https://developers.google.com/search/docs/appearance/structured-data/faqpage
.

Would you like me to also make it more detailed to address the @id or URL concern specifically?

[jonoaldersonwp]

Yes pls, that'd be super! See the spec above. That'll ensure that we're building on cohesive graph.

[nikunj8866]

@jonoaldersonwp Thanks for confirming! I've updated the PR to include both @id and url in the FAQPage schema.

[jonoaldersonwp]

Nice one!