WDFN-697 Make Facebook Shares More Compelling

Before making a pull request

• Put the appropriate EXEMPT flag if needed in the MR title (see https://practices.wma.chs.usgs.gov/practice/peer_code_review/)
• Run all linters (make lint)
• Run all tests (make test)
• Update the changelog appropriately
• If making a release, update code.json, versionNumber and metadataLastUpdated.

Description WDFN-697 Make Facebook Shares More Compelling

It was reported that no graph preview was showing for the Facebook or Twitter shares and clicking the share in Twitter took the user to Twitter home page rather than the correct monitoring location page.

There are two main (free) tools that allow developers to preview Facebook and Twitter shares, Facebook debugger https://developers.facebook.com/tools/debug and Twitter Card Validator https://cards-dev.twitter.com/validator.

Each of these preview options are quite limited. Facebook debugger is the more full featured tool, yet it is still quite spartan. Facebook debugger also blocks connections through Localtunnel https://theboroer.github.io/localtunnel-www/ so only debugging on version of the application accessible to the public and therefore is not useful in troubleshooting. Twitter Card Validator will accept URLs using Localtunnel but the information it shows it really just a preview of the card.

That said, I am only marginally sure that these changes will fix the issues. What I did do was go through the most updated documentation and examples and used that to reorganize the meta tags. I made only a few changes in the tags, and I mostly removed what the documentation claimed were redundant tags. The most promising change was reducing the graph server image size from 1000 px wide to 500 px. Any size below 500 px will appear in the Twitter Card Validator preview. Anything larger will show as a blank image in the preview. Whether the preview is accurate in the real world remains uncertain.

The according to the documentation, the following is true

• open graph tags (op:) have the attributes 'property' and 'content'
• Twitter tags (twitter:) have the attribute 'name' and 'content'
• the Twitter parsing engine is backward compatible with open graph tag; it will look for Twitter tags first and if it doesn't find one it will use the open graph tag that corresponds. In this way, we could use the 'og:image' tag and the 'twitter:image' tag in conjunction to set the graph server image size differently for Facebook and Twitter. I left them the same, until we can see if there is a reason to change.
• meta tags do not need a closing slash
• the essential meta tags are, url, type, title, description, and image (if you are using an image)

After making a pull request

• If appropriate, put the link to the PR in the JIRA ticket
• Assign someone to review unless the change is trivial