FreshRSS / freshrss.org

Official website of FreshRSS
https://freshrss.org
GNU Affero General Public License v3.0
71 stars 37 forks source link

Twitter card #51

Open math-GH opened 1 year ago

math-GH commented 1 year ago

The new website cannot rendered for Twitter: https://cards-dev.twitter.com/validator

grafik

marienfressinaud commented 1 year ago

I think the validator is broken: I use almost the same configuration for https://flus.fr/carnet/ and Twitter renders the cards correctly (while the validator also tells me it cannot render the preview).

marienfressinaud commented 1 year ago

Looks good to me at least :) Capture d’écran du 2022-10-01 12-18-31

math-GH commented 1 year ago

Now:

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

You can see that in your screenshot not the summary card is shown. The Twitter summary card has a big image. See: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary

I guess that the validator does not work: the summary needs more Twitter specific meta data. twitter:title is mandatory. It does not take the Open Graph data :/

That should work:

<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="FreshRSS">
<meta name="twitter:description" content="FreshRSS is a self-hosted RSS and Atom feed aggregator. It is lightweight, easy to work with, powerful, and customizable. ">
<meta name="twitter:site" content="@freshrss">
<meta name="twitter:image" content="https://freshrss.org/images/screenshot.webp" />
<meta name="twitter:image:alt" content="Screenshot of FreshRSS. It shows the normal view with a list of read articles." />
Alkarex commented 1 year ago

I am not so found of adding proprietary attributes such as <meta name="twitter:description" content="..." />, especially when there are already some very fine (more) standard ones. Otherwise where to stop: why Twitter and not the many other platforms out there.

If needed, there are some fine ontologies (e.g. Dublin Core...) to supplement standard HTML attributes.

(On a side note, a few proprietary ones have made their way to the core of FreshRSS (such as <meta name="apple-mobile-web-app-capable" ...) which I would rather delete again.)

marienfressinaud commented 1 year ago

I think there's a mistake in their documentation too :D They show the summary card with large image, see: https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

You can see that it works when I set <meta name="twitter:card" content="summary_large_image"> here: https://twitter.com/flus_fr/status/1558363127787524096

I'm pretty sure Twitter reads OpenGraph tags and I don't like to have specific tags specific to Twitter for the same reasons as @Alkarex (he was faster than me ^^).

Frenzie commented 1 year ago

Even most of the OpenGraph ones are quite redundant, or at least would be if sites like Facebook would actually listen to standard meta tags. og:image is just about the only one missing.

math-GH commented 1 year ago

Then let's remove the <meta> tags for Twitter. It would be better to have no tags then having it not complete/correct

marienfressinaud commented 1 year ago

I think we can remove twitter:site, but I'm pretty sure twitter:card is required for Twitter to display the cards.

Edit: OpenGraph tags are officially supported by Twitter btw, see https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started "Twitter Cards and Open Graph"