HTTPArchive / almanac.httparchive.org

HTTP Archive's annual "State of the Web" report made by the web community
https://almanac.httparchive.org
Apache License 2.0
613 stars 170 forks source link

Custom meta-images for social sharing of chapters #2410

Open rviscomi opened 3 years ago

rviscomi commented 3 years ago

Sharing a chapter on social media will create a rich media card based on the hero image for the chapter. Here's how it'd look on Twitter:

image

I wonder if we could increase engagement by manually creating images specifically for social media that include more details about the chapter. I'm not a great designer so I use Google Slides to organize my mockups but here's a deck that so far has a custom meta-image for the CSS chapter:

image

Is this something worth exploring for all 25 chapters? If so does anyone have ideas to make these cards look nicer?

tunetheweb commented 3 years ago

I worry about the effort we’d burden ourselves with for the translations (not to mention the original English too!) as we have translated chapter names and logos for some of the languages.

rviscomi commented 3 years ago

That's a good point. Here's another concept that takes out the chapter info and focuses more on the author

image

(the "by" HTTP Archive bit is still in English but I think not worth translating)

tunetheweb commented 3 years ago

Seems a little pointless without the chapter name.

Also could be a bit of a squeeze for those chapters with multiple authors.

I think if we wanted to go this route then we need to auto-generate them on the fly to reduce effort but still allow internationalisation. Just need to try our best to avoid overflow issues with text.

rviscomi commented 3 years ago

The chapter name will still be visible and localized in the heading of the social card. Including author info in the card has a few points:

shantsis commented 2 years ago

Is it a burden to display the chapter title/other text content based on the language viewed on the page? E.g. English = English chapter title, French = French chapter title?

I think a great one for inspiration is Github's image preview of Github's link preview

Maybe we can leverage that focus on the chapter name, and include little stats like # of authors / reviewers / editors, # comments, other reaction stats.

tunetheweb commented 2 years ago

Is it a burden to display the chapter title/other text content based on the language viewed on the page? E.g. English = English chapter title, French = French chapter title?

The main burden is in moving this to a dynamic, server-generated, image rather than a static image as it is now. The social media widgets do require an image here rather than HTML/CSS/Images. But to be honest I think we need to do that anyway if we want to do this, as don't think it's feasible and scalable to create images each year (and definitely not with different languages).