Set up image for social media posts

[chalin]

As mentioned elsewhere, special measures need to be taken to setup this up because the URLs we publish will need to be supported forever.

• Ensure that all pages have an Open Graph image (og:image) explicitly specified - Add images to config for 'Twitter Cards' #1514
• Create a better OG image
  • @austinlparker suggests that we use the logo + wordmark instead
  • Create a version of opentelemetry-stacked-color.png that has the fb recommended 1.91:1 ratio
    Social-media image: use colored stacked logo #1588
• Update the site to use the new image - Social-media image: use colored stacked logo #1588
• Ensure that all pages, including the homepage use the same image - Social-media image: use logo for homepage too #1604

[austinlparker]

How far do we want to go with this, I wonder? Generating cards based off the page title with a preprocessor? I think it'd be good to have a little design work/thought go into this.

[chalin]

@austinlparker - after making some minimal updates, I merged #1514. I agree that the "featured" image isn't the best choice as an Open Graph (social media) image. Can you see if someone on your team might have a better OG image to propose?

/cc @cartemp @svrnm

[austinlparker]

Honestly I think just the logo (with word mark) is the best option for now.

[cartermp]

Agreed, logo with word mark seems gouda me

[chalin]

@austinlparker @cartermp @melbgirl - could y'all get a designer to create an logo+w/m image with the proper ratio -- 1.91:1? I'm assuming that we'll be using the following image as a base: https://github.com/open-telemetry/opentelemetry.io/blob/68935931c9b7d7471d33d16a92b553e256a6e834/static/img/logos/opentelemetry-stacked-color.png

/cc @jkowall @Ella-bz

[melbgirl]

@chalin happy to help, but I don't have access to a designer. If there's one in our community could you point me to them?

[chalin]

Thanks @melbgirl but, just to be clear, I'm already working on this issue (#1588), which needs care in the way it is setup: the strategy that I've used on other sites (base image URL + image version as a parameter), is difficult to implement currently under Hugo so I'm exploring an alternative. If you know of a solution that works under Hugo, I'm glad to learn about it.

My request was specifically for a designer. In the past, @jkowall & @Ella-bz would help out with image design. I used to work with the Adobe suite, but I don't have the licences anymore -- and I don't want to figure out how to use Figma, for example, if someone else could rework the image in half the time that I could. 😄

[chalin]

Never mind y'all, I remembered that I can easily do such simple transformations using ImageMagick!

[chalin]

@austinlparker et all: the PR is ready for review:

• Social-media image: use colored stacked logo #1588