search

processing / processing-pi-website

Files for the pi.processing.org subdomain that documents Processing on the Raspberry Pi
https://pi.processing.org/
16 stars 10 forks source link

Add meta tags for twitter? #21

Open gohai opened 6 years ago

gohai commented 6 years ago

I was curious why this showed the default grey placeholder icon for the link preview, whereas the link to the Discourse showed the logo:

Turns out that there are specific meta-tags that govern this behavior. Perhaps worth modifying the hugo theme to include them? (I believe even a global, static logo - like the one displayed with the Discourse link - would be a nice touch.) What you think @msurguy?

If twitter is also picking up the more general OpenGraph tags, than it'd be probably better to make use of those.

<meta property="og:site_name" content="Processing Foundation" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://discourse.processing.org/uploads/processingfoundation1/original/1X/5378a0bfe5f455217426edd4418bb5471405149b.png" />
<meta property="og:image" content="https://discourse.processing.org/uploads/processingfoundation1/original/1X/5378a0bfe5f455217426edd4418bb5471405149b.png" />
<meta property="og:url" content="https://discourse.processing.org/" />
<meta name="twitter:url" content="https://discourse.processing.org/" />
<meta property="og:title" content="Processing Foundation" />
<meta name="twitter:title" content="Processing Foundation" />
<meta property="og:description" content="Discussions about Processing, p5.js, Processing for Android, Processing for Pi, and Processing.py" />
<meta name="twitter:description" content="Discussions about Processing, p5.js, Processing for Android, Processing for Pi, and Processing.py" />
msurguy commented 6 years ago

@gohai great catch!

I've been reading up on how the social tags are output in Hugo. Turns out there are some internal templates that do most of the work automatically: https://gohugo.io/templates/internal/#the-internal-templates Here are the templates if anybody's curious: https://github.com/gohugoio/hugo/blob/91ab455d846a67a90b19e810b2accec0404b3108/tpl/tplimpl/embedded/templates.autogen.go

And this website for another Hugo theme details the use of default image (kinda what discourse pic showed):

screen shot 2018-07-14 at 7 56 55 am

Basically we need to start using "images" array in the default config file and also in the posts.

If you tell me what image to use throughout the site if none is in the article/post, I can quickly add that to config.toml and meanwhile will try out some things for the tutorials' images.

gohai commented 6 years ago

@msurguy We have a bunch of logos in https://github.com/processing/processing-pi-website/tree/master/themes/processing/static - perhaps just the most high-res one as the fallback?

msurguy commented 6 years ago

@gohai great, I'll try out the 512x512 logo that is in the folder you provided. I double checked with this article about the sizes to find the optimal sizing: https://sproutsocial.com/insights/social-media-image-sizes-guide/

For Facebook it is: Shared Image: 1,200 x 630 Shared Link: 1,200 x 628 Square Photo: Minimum 154 x 154px in feed.

For Twitter: In-Stream Photo: Minimum 440 x 220 (2:1 Ratio)

So after I try out the default 512x512 image, we might need to come up with a way that will work between various networks and still produce an OK result.

gohai commented 6 years ago

@msurguy I believe the Processing Discourse image is square and still looks reasonably good on twitter. That's all that I would shoot for, it looking okay on twitter.