Improve metatags for project URLs

[rtblair]

When previewed from other platforms on the web like Twitter, Facebook, and Google, ZAP Search urls like https://zap.planning.nyc.gov/projects/P2017K0093 don't present any project-specific information in the metatag teaser. They end up looking something like this:

I'm suggesting we communicate a little bit more metadata about each project to improve discoverability and SEO so that the previews look more like this:

I'm categorizing this as high ROI because it's pretty easy to implement. This tool will generate sample metatags for dev purposes: https://metatags.io. Example output:

<!-- Primary Meta Tags -->
<title>300 Huntington Street - Brooklyn |  NYC Zoning Application</title>
<meta name="title" content="300 Huntington Street - Brooklyn |  NYC Zoning Application">
<meta name="description" content="A zoning map amendment from M2-1 to M2-3 and Waterfront Certification and Authorizations to facilitate a new 6-story, approximately 97,000 sf commercial/manufacturing development with waterfront public access is being sought by private applicant Monadnock at 300 Huntington Street in Gowanus, Community District 6, Brooklyn.">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://zap.planning.nyc.gov/projects/2019K0407">
<meta property="og:title" content="300 Huntington Street - Brooklyn |  NYC Zoning Application">
<meta property="og:description" content="A zoning map amendment from M2-1 to M2-3 and Waterfront Certification and Authorizations to facilitate a new 6-story, approximately 97,000 sf commercial/manufacturing development with waterfront public access is being sought by private applicant Monadnock at 300 Huntington Street in Gowanus, Community District 6, Brooklyn.">
<meta property="og:image" content="https://zap.planning.nyc.gov/img/screenshot-1200x630-218581d66d8f03b3eacad0160555a9d6.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://zap.planning.nyc.gov/projects/2019K0407">
<meta property="twitter:title" content="300 Huntington Street - Brooklyn |  NYC Zoning Application">
<meta property="twitter:description" content="A zoning map amendment from M2-1 to M2-3 and Waterfront Certification and Authorizations to facilitate a new 6-story, approximately 97,000 sf commercial/manufacturing development with waterfront public access is being sought by private applicant Monadnock at 300 Huntington Street in Gowanus, Community District 6, Brooklyn.">
<meta property="twitter:image" content="https://zap.planning.nyc.gov/img/screenshot-1200x630-218581d66d8f03b3eacad0160555a9d6.png">

As a bonus, it would be awesome if we came up with some sort of graphic for the preview that's not a screen shot.

@nnxka @andycochran @allthesignals

[allthesignals]

I really want to work on this.

I do think it's a little trickier to implement, though, because we use a single page application, which retrieves that sort of data later on. There are some solutions for this, some more heavy-handed than others, but I can research this a bit more so we can at least have better SEO.