Add logo and meta tags for twitter_cards

[joelachance]

Adds meta tags for twitter cards.

It looks like the card validator won't show the image, but it's because the URL is still looking at localhost (ngrok isn't that good!)

Card Validator: https://cards-dev.twitter.com/validator

Complementary screenshot:

@InessaPawson, to change what shows up in the card, you'll want to edit the description and image under the params object in the config.yaml. See examples here: https://gohugo.io/templates/internal/#twitter-cards

@rgommers, I don't know if we have some kind of staging any longer (I know our staging deployment site never worked that great), but it would be great to test it out there if possible. Otherwise, this is a pretty minor change that doesn't effect the site, only twitter cards.

[rgommers]

Thanks Joe, LGTM.

[rgommers]

@rgommers, I don't know if we have some kind of staging any longer (I know our staging deployment site never worked that great), but it would be great to test it out there if possible.

No, Surge never worked well. This isn't too hard, I'll open an issue and find a volunteer to set this up again, probably on Netlify.

[InessaPawson]

@joelachance Thank you for looking into it! I tested it on Twitter and Facebook, and it doesn’t seem to be working. Could you check again on your end?

[joelachance]

I'm not getting anything showing up in the card validator for https://numpy.org either. I looked on the site and wasn't finding anything pertaining to this in the head element, would this have been deployed, @rgommers?

[rgommers]

Yep, it's not deployed - I have an open PR with a deploy method, but didn't merge it yet. Now that we have good preview with Netlify, I think we can switch to auto-deploying. It requires everyone who merges a PR to make sure things actually work, but I think we can trust everyone with that. It will save a lot of hassle to have auto-deployment. I'll look at finishing that up now.

[InessaPawson]

I'm back at it.:) My apologies.
This is how the cards show on Twitter and Facebook:

The things I've tried so far:

1. Checked the image path. It is valid.
2. Checked robots.txt. There isn’t one.

[rgommers]

Card validator says:

And this is consistent what I see on Twitter right now. Current master is just deployed now, so the logo should hopefully show up later today. If not, something may be incomplete in this PR.

[joelachance]

Ok, I looked into this, and I think this is an issue with Hugo's twitter template. We point images to twitter cards using (in the config)

params
  images:
  - logos/numpy.svg

We refer to our logo using that same path everywhere, and it works everywhere (except Twitter!). The difference between the Twitter image path and the rest of them is that they render in the browser a bit differently.

Twitter meta data: https://numpy.org/logos/numpy.svg
Everywhere else: https://numpy.org/images/logos/numpy.svg

Note the missing /images.

I'm updating the params.images to include /images, and hoping this will fix it. See PR #357.

[InessaPawson]

Thank you for looking into it, Joe!
Seemingly a minor defect, it will be coming up over and over again as an issue given how active our user community is on social media, especially on Twitter, LinkedIn, and Facebook.