search

thekid / dialog

Dialog photoblog
2 stars 1 forks source link

Add OpenGraph meta data #5

Closed thekid closed 1 year ago

thekid commented 1 year ago

Example

<meta property="og:url" content="https://dialog.sloppy.zone/">
<meta property="og:type" content="website">
<meta property="og:title" content="Seite 1 - Dialog">
<meta property="og:description" content="Fotoblog von Timm Friebe">
<meta property="og:image" content="https://[...]/image/streetart-hh-2022-08-16/preview-IMG_8810.JPG.jpg">

Status

See also

See https://ogp.me/ and https://developers.facebook.com/tools/debug/

thekid commented 1 year ago

Facebook:

image

✅ Looks good!

thekid commented 1 year ago

Signal

Desktop app (Windows):

Desktop

Mobile:

Mobile

✅ Looks good!

thekid commented 1 year ago

WhatsApp

Desktop app (Windows):

Desktop

Mobile:

Desktop

🛑 Missing the preview image!

thekid commented 1 year ago

LinkedIn

image

🛑 Missing the preview image! ℹ️ Seems LinkedIn does not support WebP images, see also https://www.linkedin.com/post-inspector/inspect/

thekid commented 1 year ago

Twitter

Card validator

🛑 Validates here but I can't get it to reliably show up although the Twitter documentation states:

When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property

thekid commented 1 year ago

Twitter

After adding the following:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@timmfriebe">

Twitter now shows this:

image
thekid commented 1 year ago

MS Teams

Desktop app (Windows):

image

Mobile:

image

🛑 Missing the preview image!

thekid commented 1 year ago

GitHub creates preview images as PNGs, see https://opengraph.githubassets.com/f16cc9928cb9edfabd1fa81d149353858821a04ddbd9bd614c8ed918eb86bf27/thekid/dialog

thekid commented 1 year ago

Facebook recommends 1200 x 628 pixel size for link share images. The minimum size suggested to ensure a large preview image is 600 x 314 pixels. [...] I now make all my blog header images to the width of my blog’s content column – which is 720 pixels.

See also https://louisem.com/3838/facebook-link-thumbnail-image-sizes

thekid commented 1 year ago

After switching the images referenced in og:image to JPEG, the results of retesting are as follows:

thekid commented 1 year ago

On WhatsApp (mobile), I can find this:

Image(JPG or PNG) with a size less than 300KB and minimum dimensions of 300 x 200 *. This image should be served via a HTTPS connection with a valid non-self-signed certificate.**

Source: https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing

...and this:

I found that WhatsApp shows pictures of 90 90 in the web interface, and 140 140 in the Android version. So the best choice would be to use a square image, and I don’t recommend larger than 400px * 400px. [...] One thing to note is that WhatsApp takes the last og:image for its share…

Source: https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

The generated images are 720 x [height depends on aspect ratio], and are typically between 45 and 90 kilobytes, see https://dialog.sloppy.zone/image/streetart-hh-2022-08-16/preview-IMG_8810.JPG.jpg

thekid commented 1 year ago

Also, Office 365 Outlook and Yammer don't display preview images:

image

Sometimes, the image is missing:

image

Sometimes, it displays a broken image:

image

thekid commented 1 year ago

Merging although not 100%, we're still in 0.X-releases at the moment so it doesn't have to be perfect 🙃