Add Open Graph meta tags for archive pages.

[emilyatmobtown]

Previously, Open Graph tags were added only for pages that were singular, home, or author archives. These changes add Open Graph meta tags to all archive pages.

Fixes #1987

Changes proposed in this Pull Request:

• The og:type is set to 'website', which is the default recommended by Facebook and the Open Graph protocol.
• The title of the archive page is added as the og:title.
• The site name is added as the og:site_name.
• For category, tag, taxonomy, and post type archives, the og:url is set to the appropriate archive link and the og:description is set to the relevant description. For date archives, the URL defaults to the site URL and the description defaults to the site description.
• The og:image and og:locale tags are handled as they are for the home page.
• Tags for author archives are not addressed in this change since they're already included.

Is this a new feature or does it add/remove features to an existing part of Jetpack?

• If you're an Automattician, include a shortlink to the p2 discussion with Jetpack Product here.

This updates the existing Open Graph meta tag functionality to apply appropriate tags to archive pages.

Testing instructions:

To test Category pages:

• Log in to the WordPress dashboard.
• Go to Posts > Categories.
• Go to a category in the list and hover over the category name to see the menu links appear below.
• Click "View" to view the category archive page.
• Right-click the page and select "Inspect" or "Inspect Element" to open the Web Inspector.
• See the HTML in the Elements panel.
• Within the HTML, click on "" to expand that section.
• See the Open Graph tags in the added by Jetpack as shown below.
• See that tags are present for og:type, og:title, og:url, og:site_name, og:locale, and og:image.
• If an archive description is present, see that the og:description is present and set to that description.

To test Tag pages:

• Repeat the same steps above but for Tags by going to to Posts > Tags, viewing the tag archive page, and continuing from there.

To test custom post type archives:

• Install and activate the Custom Post Type UI plugin.
• Go to CPT UI > Add/Edit Post Types.
• Fill in the following fields:
  • Post Type Slug: things
  • Plural Label: Things
  • Singular Label: Thing
• Scroll down to "Has Archive" and select "True".
• Click "Add Post Type".
• Go to Things > Add New.
• Enter a title and click "Publish".
• Go to /things to view the Thing archive page.
• Continue with the steps above to inspect the page and see the Open Graph tags in the HTML.

To test custom taxonomy archive pages:

• Complete the steps above to install the Custom Post Type UI plugin and create a CPT called Things.
• Go to CPT UI > Add/Edit Taxonomies.
• Fill in the following fields:
  • Taxonomy Slug: types
  • Plural Label: Types
  • Singular Label: Type
• Check the box to "Attach to Post Type" for "Things".
• Click "Add Taxonomy".
• Go to Things > Add New.
• Enter a title.
• Under Types, enter "Blue" in the "Add new Type" field and press Enter.
• Click Publish.
• Go to Things > Types.
• In the list of Types, hover over the name "Blue" to see the menu links appear below.
• Click "View" to view the custom taxonomy archive page.
• Continue with the steps above to inspect the page and see the Open Graph tags in the HTML.

To test date archive pages:

• Go to /2019.
• Continue with the steps above to inspect the page and see the Open Graph tags in the HTML.
• Additionally, if a site description is present, see that the og:description is present and set to that description.

Proposed changelog entry for your changes:

• Add Open Graph meta tags to archive pages.

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

Scheduled Jetpack release: August 6, 2019.
Scheduled code freeze: July 30, 2019

Generated by 🚫 dangerJS against f4e11e4

[jeherve]

Thanks for the contribution. I left a few first comments.

I would also recommend running yarn build in your local testing environment. It will bring you some additional tools to help you with developing, such as PHPCS.

You can get started with this here:
https://github.com/Automattic/jetpack/blob/master/docs/development-environment.md#before-moving-forward

[emilyatmobtown]

Thanks for all your feedback, @jeherve!

[jeherve]

This works well in my tests. 👍

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello emilyatmobtown! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D31233-code before merging this PR. Thank you!