Allow plugins to add metadata to AMP Stories

[cathibosco]

• I am optimizing my Story for Search & for Social using the Yoast plugin

• When I publish a Story, it IS being crawled and being added to Search results when I optimize with the Yoast plugin. ✅

• However, when I add my story to Slack or Social (Social/Share), it is not fetching the image or description. We think this is a bug. 😐

[westonruter]

Please share the URL of the story.

[cathibosco]

Here is a link to an experimental story that was published... thanks!
https://cathibosco.com/stories/nikko/

Link to the archive page: https://cathibosco.com/stories/

[westonruter]

The Schema.org metadata is:

{
    "@context": "http://schema.org",
    "@type": "BlogPosting",
    "author": {
        "@type": "Person",
        "name": "Cathi Bosco"
    },
    "dateModified": "2019-08-06T17:16:35+00:00",
    "datePublished": "2019-06-24T13:40:57+00:00",
    "headline": "Nikk\u014d T\u014dsh\u014d-g\u016b, Japan",
    "image": {
        "@type": "ImageObject",
        "height": 1600,
        "url": "https://cathibosco.com/wp-content/uploads/2019/06/Nikko-FI-cathi-bosco-1.png",
        "width": 1200
    },
    "mainEntityOfPage": "https://cathibosco.com/stories/nikko/",
    "publisher": {
        "@type": "Organization",
        "logo": {
            "@type": "ImageObject",
            "height": 1,
            "url": "https://cathibosco.com/wp-content/uploads/2019/01/cathibosco-design-logo-ux-design-leader.svg",
            "width": 1
        },
        "name": "Design + Business + Technology = UX Awesome!"
    }
}

For Google Search, I can see there is an error with the publisher logo image: the SVG format is not allowed.

See https://search.google.com/structured-data/testing-tool#url=https%3A%2F%2Fcathibosco.com%2Fstories%2Fnikko%2F

Now, Slack and other social providers are a different… story.

It appears Slack only supports Twitter and Facebook meta: https://api.slack.com/docs/message-link-unfurling#classic_unfurling

These would normally be added by Jetpack or Yoast, but in the AMP Story template (single-amp_story.php) we do not invoke wp_head() in order to prevent arbitrary theme/plugin code from interfering with the story format.

One option would be to manually create the Twitter and Facebook meta ourselves, but this would reinvent the wheel. We should rather rely on Jetpack or Yoast to do this.

Probably what we should do here is introduce a new amp_story_head action which such plugins can use to target the injection of AMP markup into this template. This would be similar to how WordPress has an embed_head action which fires in the Post Embed template.

While doing this, we can remove hard-coded head code:

amp-wp/includes/templates/single-amp_story.php

Lines 15 to 24 in d2971f2

	<title><?php echo esc_html( wp_get_document_title() ); ?></title>
	<?php
	wp_enqueue_scripts();
	wp_scripts()->do_items( [ 'amp-runtime' ] ); // @todo Duplicate with AMP_Theme_Support::enqueue_assets().
	wp_styles()->do_items();
	?>
	<?php rel_canonical(); ?>
	<?php amp_add_generator_metadata(); ?>
	<?php amp_print_schemaorg_metadata(); ?>
	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

And we can instead hook into this amp_story_head action instead. Then Jetpack or Yoast could output their own Schema.org metadata instead as well.

Aside: The v0.js and AMP boilerplate style should really be getting injected by the post-processor anyway (see also #1778).

[swissspidy]

Probably what we should do here is introduce a new amp_story_head action which such plugins can use to target the injection of AMP markup into this template.

While doing this, we can remove hard-coded head code:

Aside: The v0.js and AMP boilerplate style should really be getting injected by the post-processor anyway

Sounds good to me!

[westonruter]

Once this is closed, PRs should be opened to Jetpack and Yoast. For example:

diff --git a/class.jetpack.php b/class.jetpack.php
index 346b85c6e..d85a99a77 100644
--- a/class.jetpack.php
+++ b/class.jetpack.php
@@ -657,6 +657,7 @@ class Jetpack {
 		 * They check for external files or plugins, so they need to run as late as possible.
 		 */
 		add_action( 'wp_head', array( $this, 'check_open_graph' ),       1 );
+		add_action( 'amp_story_head', array( $this, 'check_open_graph' ),1 );
 		add_action( 'plugins_loaded', array( $this, 'check_twitter_tags' ),     999 );
 		add_action( 'plugins_loaded', array( $this, 'check_rest_api_compat' ), 1000 );
 
diff --git a/functions.opengraph.php b/functions.opengraph.php
index cc60770f4..75107ee2a 100644
--- a/functions.opengraph.php
+++ b/functions.opengraph.php
@@ -12,6 +12,7 @@
  */
 
 add_action( 'wp_head', 'jetpack_og_tags' );
+add_action( 'amp_story_head', 'jetpack_og_tags' );
 
 /**
  * Outputs Open Graph tags generated by Jetpack.

[westonruter]

Opened Jetpack PR to add support for this: Automattic/jetpack#13416

[westonruter]

And support for Yoast has been drafted via Yoast/wordpress-seo#13446