Add twitter cards

[jarrodmillman]

@rgommers I am merging this now as it adds back the twitter card exactly as it was before. It looks like the logo was never rendered as twitter cards don't support SVG images. We can deal with that in a follow-up PR. For now, I am just undoing the removal of the twitter card from PR #588 .

[netlify]

✅ Deploy Preview for numpy-org ready!

Name	Link
🔨 Latest commit	babbc85
🔍 Latest deploy log	https://app.netlify.com/sites/numpy-org/deploys/62f1109d4205890009216fdc
😎 Deploy Preview	https://deploy-preview-590--numpy-org.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[jarrodmillman]

This adds back the twitter card, but I can't verify if it works:

It says that it loaded the card without errors, but it is unable to render a preview.

Compare
view-source:https://deploy-preview-587--numpy-org.netlify.app/
which includes

    <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://numpy.org/images/logo.svg"/>

<meta name="twitter:title" content="NumPy"/>
<meta name="twitter:description" content="Why NumPy? Powerful n-dimensional arrays. Numerical computing tools. Interoperable. Performant. Open source."/>

to
view-source:https://deploy-preview-590--numpy-org.netlify.app/
which has

    <meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://numpy.org/images/logo.svg"/>

<meta name="twitter:title" content="NumPy"/>
<meta name="twitter:description" content="Why NumPy? Powerful n-dimensional arrays. Numerical computing tools. Interoperable. Performant. Open source."/>

The 587 preview was before I removed the twitter card template from numpy.org repo and added it the theme. So it looks like this restores the source from before, but neither seem to render via the twitter card validator. Did this ever work? Is there another way to test?

From the PR (#345) that originally added the twitter card template, it isn't clear it ever worked correctly. However, the last image from the validator it did render the text, but not the logo.

I wonder if the issue could be related to netlify somehow.

Thoughts?

[jarrodmillman]

Not sure why the text isn't showing up, but I think it will render on twitter based on another test I just did.

But the logo issue is due to using a SVG image.

twitter:image

A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used.

SVG is not supported.

According to
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

[rgommers]

Thanks Jarrod!