pdap.io Open Graph defaults

[josh-chamberlain]

companion to https://github.com/Police-Data-Accessibility-Project/data-sources-app/issues/199

Context

When we share links, they look like this:

But if we use open graph, they can be more custom and modern looking.

Requirements

• [ ] Implement required properties from https://ogp.me/

Properties

These are sensible defaults, but should allow overrides downstream

• og:site_name: PDAP
• og:image: src/images/acronym.svg
• og:title: all pages have titles, right? can default to Police Data Accessibility Project though.
• og:type: website
• og:description: we sometimes define this in other meta tags, but could use Data and tools for answering questions about any police system in the United States.
• og:url: ?

[joshuagraber]

Hey, @josh-chamberlain I was looking through open issues this morning and started to look into this.

My thinking is that we want to make these updates in pdap.io and data-sources/client directly. I'm not sure how we handle this gracefully in design-system, because whatever we would devise to handle it would need to know about the existing routes in all of the other apps.

My proposal is to clone this issue into both of the apps where the update is needed and use an existing npm package like vue-meta to handle this for each route. Does that sound like a good strategy to you?

[josh-chamberlain]

@joshuagraber makes sense to me, I have cloned the issue. I think starting with sensible defaults is good enough for now, we just need a starting point.