18F/18f.gsa.gov — pull request #206 by konklone (2014-09-20 15:33:40+00:00)
Title: Overhaul of Open Graph and Twitter metadata

This cleans up our Open Graph and Twitter metadata, and prepares us for Twitter cards.

* Moved site's official title and description to `_config.yml` (`site.title` and `site.description`) and standardized on what looked like the best versions (they were inconsistent).
* Add a `site.url` to `_config.yml` to use when absolute URLs are required (OG image tags, OG site URL).
* Adds `twitter:creator` and `twitter:card` tags.
* Allows `title`, `description`, and `image` to be overridden per-post. The `

` tag will pre-pend "18F -" to the title, but the Twitter/OG metadata will not use that (since additional 18F context is expected to be present in those contexts).

By default, the Twitter [`summary`](https://dev.twitter.com/cards/types/summary) card is used, and looks like this:

![summary](https://cloud.githubusercontent.com/assets/4592/4345652/fd6937ba-40da-11e4-9e96-7e9afe3844d5.png)

If a post provides an `image` in its front matter, the Twitter [`summary_large_image`](https://dev.twitter.com/cards/types/summary-large-image) card will be used. This looks like:

![summary_large_image](https://cloud.githubusercontent.com/assets/4592/4345649/e42b0382-40da-11e4-964b-9e0471d0dc7a.png)

I used [Twitter's card validator](https://cards-dev.twitter.com/validator) + [`ngrok`](https://ngrok.com) to produce the screenshots above. Since OG URLs are hardcoded to point to `https://18f.gsa.gov`, card validation won't work on staging or development URLs. I had to massage the blog image URL temporarily to produce the screenshot above.

**Note:** we are not actually approved for Twitter card use yet. After we deploy this stuff to `production`, someone with access to log in to our Twitter account (@quepol) will need to go hit the Request Approval button at [the card validator](https://cards-dev.twitter.com/validator) to get use whitelisted. When that's done, the Twitter instructions imply that it takes a staff review, but in my experience the whitelisting is instantaneous and fully automated. I'll make a separate issue for that.