WordPress / five-for-the-future

Plugins and themes for the Five for the Future subsite
https://wordpress.org/five-for-the-future/
46 stars 21 forks source link

Default opengraph image #304

Closed ryelle closed 5 days ago

ryelle commented 1 week ago

@WordPress/meta-design

We need an opengraph image for Five for the Future, for example the Theme Directory image: https://wordpress.org/files/2024/06/wporg-themes-ogimage-2024.png

Currently, the site just uses the community photo:

Image

And for individual pledges, it uses the company logo, ex:

It would be really neat if we could do dynamic images with the company logo, but our only option for that is Jetpack's Social Image Generator which only has a few templates. Since that's not possible right now, should this be left as the company logo?

ndiego commented 1 week ago

@fcoveram fyi

thetinyl commented 1 week ago

I know this isn't Opengraph image-related, but can we do anything dynamic about the meta tags?

Image

ryelle commented 1 week ago

yeah, I'm working on that now — I've updated the pledge page to use the title "Company Name | Five for the Future" and the content is an excerpt of the organization description. For example, Automattic updated:

Screenshot 2024-09-10 at 2 49 46 PM

Does that work? or would you rather have different text? I could see either of these working well too:

thetinyl commented 1 week ago

Oh, great! Thanks for always being eleventy-eight steps ahead, Kelly. 🥇

"Company Name | Five for the Future"

This works for me!

Automattic contributes 5% of their resources to the WordPress project. Automattic sponsors 105 contributors for a total of 3,799 hours per week across 22 teams.

Nothing wrong with either of these. I do wonder about smaller orgs and whether or not those factual stats would be as impressive a flex (if you will). Or, for the outside FftF/contributor audience, do those numbers resonate without context?

I think the description could be a call to action that speaks to the mission of the program in some way... which actually ends up being more generic. Options:

jasmussen commented 6 days ago

There's an opengraph template we can use here. I think there are newer templates too, when Francisco has a chance to look he may have better instincts. I've also been reminded that I think there exists a Five for the Future logo that we may be able to work in. @henriqueiamarino may know more.

fcoveram commented 6 days ago

This is the template file where I've been working on. Here below you can see a recap of all the images made for the site.

Opengraph images of the WordPress.org site in a board

The file is still WIP so more changes are to come with regard to brand and internationalization (wporg-mu-plugins#631)


Based on the above, here are two ideas for the 5ftF's homepage.

Two versions of the opengraph image for "Five for the Future" section in WordPress.org site

The left one feels cleaner and has room for describing what the section is about. Whereas the right one has more context thanks to the "WordPress" word. If we go with the left one, I would need you help @thetinyl with copy for the description sentence.

thetinyl commented 6 days ago

Whereas the right one has more context thanks to the "WordPress" word.

Based on the template, it looks like there's a preference for having the title+subcopy combo. Which I'd usually want to be consistent with, but I think the right one will be the stronger choice.

'Five for the Future' as a named program isn't recognizable without the brand affinity of WordPress. Assuming folks won't read the subcopy (😢), we need to make that connection clear as quickly as possible.

ndiego commented 6 days ago

I like:

Find out how Automattic is shaping the future of WordPress.

fcoveram commented 5 days ago

Here is the final opengraph image.

Five for the Future opengraph image