Improve default image and summary when sharing URL to social media
Closed this issue · 14 comments
When sharing the Winden URL within a social media post (ie Twitter), the default image is blank and the summary is too long for the space provided.
I suggest the Winden logo as the default image and reducing the length of the description.
From a quick look, there does appear to be some plausible-looking meta tags, so I'm not sure what exactly needs to be changed here.
name="twitter:title"
content="Winden - secure, fast and easy file transfer"
/>
<meta
name="twitter:description"
content="Winden is the private, secure way to send large files at speed. No sign-ups. No snooping. No nonsense."
/>
<meta name="twitter:image" content="/Winden_landscape_logo.png" />
<meta name="twitter:site" content="@LeastAuthority" />
<meta name="twitter:card" content="summary_large_image" />
(I'm trying to post a screenshot but it doesn't like it, and won't say why...)
It seems that only the image is missing here. According to https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image there is a description for the twitter:image metadata entry:
A URL to a unique image representing the content of the page. You should not use a generic image such as your website logo, author photo, or other image that spans multiple pages. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.
On our side we serve the image from https://winden.app/Winden_landscape_logo.png. The PNG image has a size of 800x450 pixels (close to 2:1 aspect ration) with 31 kB. That seems to be well inside the specs.
I guess that we need to make the content become a real URL instead of the absolute path we have right now.
Yes, that seem like it. Looks like twitter:image has to be an absolute url. It is not clearly mentioned in the above link, but this is what is there in the leastauthority.com page:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://leastauthority.com/wp-content/uploads/2020/03/LeastAuthority_Logo_RGB_Horizontal.png" />
<meta name="twitter:site" content="@LeastAuthority" />
<meta name="twitter:label1" content="Est. reading time" />
<meta name="twitter:data1" content="4 minutes" />
I can't find anything else in their page that we are deviating from.
Just "patched" the current deployment:
<meta
name="twitter:description"
content="Winden is the private, secure way to send large files at speed. No sign-ups. No snooping. No nonsense."
/>
<meta name="twitter:image" content="https://winden.app/Winden_landscape_logo.png" />
<meta name="twitter:site" content="@LeastAuthority" />
<meta name="twitter:card" content="summary_large_image" />
So far the behaviour did not change, but we might need to wait until some caches get invalidated.
I'm not sure if everything renders the same as it does in my browser, but also the words overflow too -- making them shorter might help its readability? There's no tooltip that I can make appear, so as it is there's two incomplete sentences.
According to this page: https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#crawling it indexes the meta information for 7 days.
Also some techniques are mentioned here: https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards
I tried url shortners, that didn't fix it. I guess we should try the technique mentioned under "My Card information now refreshes, but images are not updating. How do I get the images to refresh?".
Ah thanks, so we also might need to have a look at our robots.txt to enable crawler access for the particular files.
At least the Twitter Card Validator mentioned in the reference given by @vu3rdd above has no problems with our configuration:
INFO: Page fetched successfully
INFO: 10 metatags were found
INFO: twitter:card = summary_large_image tag found
INFO: Card loaded successfully
Okay so we still need to figure out what the limits actually are (characters for the title, blurb) or just guess from the example we have and shorten that copy so it fits. (I don't see limits listed in the article Ram posted). Based on that, I suggest:
Title: Winden - secure, fast, easy file-transfer
Body: Send large files quickly. Private, secure. No sign-ups, snooping, nonsense.
(Don't know that I love the body message, but just trying to shorten what is already there).
In the full size example (meaning the user opens the Tweet), the current text fits.
After waiting for the caching to go away we now also have the image included:
This means that we need to fix the url in the site metadata.
But we might need to offer a smaller square image as well, now the layout has changed:
