Video thumbnail meta for social sharing

Created by: bretthayes

This PR allows us to provide YouTube video IDs to our frontmatter/meta for blog, podcast, release posts, and even pages so that when we share our posts or pages on social media that contain YouTube videos, they will display a video card.

This closes #5427 (closed). A follow up PR in the handbook will be created after this is merged to reflect updates to the syntax for the frontmatter.

Changelog

• Added a YouTube videoID to our Layout component meta for pages and our frontmatter for blog, podcast, and release posts
• Updated all of our podcast posts with the relevant video IDs from our YouTube podcast playlist including podcast 3.1 and 3.2 as per the ticket requirements
• Added og:type to describe the content based on whether it's an article or a regular page on the website
• Updated our og:url to include the path of the page
• Updated our social meta image name to ensure it's cached correctly. FB caches assets once they're loaded the first time. The only way to clear cache is to change the URL where the asset lives.

Notes:

• The social meta image can't be tested because it's an absolute URL that points to the about subdomain and the asset doesn't live there yet since the changes are proposed in this PR
• FB and Twitter have pretty strict requirements for ensuring their parser renders meta properly
  • Images must be included alongside videos for thumbnail previews
  • Video dimensions are required
  • secure_urls, types, and pretty much the things are recommended
  • FB uses the property attribute instead of the name attribute. Twitter recognizes both but prefers the name attribute and falls back to property for the open graph spec

Meta Behaviour:

1. If a YouTube video ID is provided even if a social image is also provided, that takes priority over a social meta image
2. If a social image is provided and no video ID is provided, that will be used
3. If neither are provided, our default fallback will be used for our meta image

Test

1. Ensure prettier has standardized the proposed changes
2. Ensure the proposed changes for the video meta tags are listed in the head for /podcast/max-howell and /podcast/ravi-parikh
3. Ensure the image meta tags are listed on all other pages that are not articles (blog, podcast, release posts)
4. Feel free to test and debug using Facebook's Sharing Debugger and Twitter's Card Validator, however, Netlify previews are cached so re-scraping pages in the FB and Twitter debug tools may not yield updated results from latest commits. Accounts are required on either platform to use either tool.

Screenshots from my tests

Facebook share before (no video id)

Facebook share after (with video id)

Twitter share before (no video id)

Twitter share after (with video id)

Twitter share after (without video id)

This uses the same meta image we have but the card now uses summary_large_image as an improvement to stand out better among other tweets. This was tested before I renamed the image.