[Request]: Add social meta tags to de-risking guide pages

[nateborr]

A description of the work

The Guides site does not specify og:image meta tags for any pages. After launching the latest version of the de-risking guide, we observed that previews generated for links can include a poorly formatted image selected arbitrarily from the page content.

For example, sharing the link https://guides.18f.gov/derisking-government-tech/ within Google Chat generates this preview card:

For all pages in the de-risking guide:

• Define an og:image meta tag specifying the de-risking guide icon used on https://18f.gsa.gov/guides/
• If it's reasonable to implement, make the image meta tag configurable at the guide level rather than the individual page level

This issue's scope does not include updating the other guides, although @ameliaswong we may want to consider that as a follow-up.

Point of contact on this issue

Nate Borrebach ([email protected])

Reproduction steps (if necessary)

• View meta tags directly
  • Navigate to https://guides.18f.gov/derisking-government-tech/
  • View page source
  • Search for <meta tags in the page source
  • Observe that there are no tags with property=og:image
• View a link preview in Google Chat
  • Open a new Google Chat conversation
  • Paste in: https://guides.18f.gov/derisking-government-tech/
  • Confirm that the preview card generated for the link shows an unhelpfully cropped copy of the page content's header image

Skills Needed

• Any Human
• Design
• Content
• Engineering
• Acquisition
• Product
• Other

Does this need to happen in the next 2 weeks?

• Yes
• No

How much time do you anticipate this work taking?

1-2 days for an engineer experienced with front-end and 11ty development

Acceptance Criteria

• A meta tag with the property attribute set to og:image is present for all de-risking guide pages, specifying an image of the guide's icon
• Previews generated for links by social and communication products (e.g. Google Chat, X.com, etc.) use the specified icon image

[nateborr]

Facebook developer docs guidance on og:image properties: https://developers.facebook.com/docs/sharing/webmasters/images/

I'm also taking influence from this post: https://brockbarnett.me/2023/08/01/social-image-size-specs-one-og-image-to-rule-them-all/

[nateborr]

@ameliaswong should the alt text for the meta image be empty, since the icon is purely decorative?

If we should set the alt text, what I have in mind is: The 18F de-risking guide icon against a blue background.

[ameliaswong]

Yeah, "null" for this. Thanks @nateborr!

[nateborr]

I deployed this change and confirmed that preview cards show the specified de-risking guide meta image in Google Chat, X, and LinkedIn. Below is a screenshot of an example from Google Chat.