Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Twitter card #51

Open
math-GH opened this issue Oct 1, 2022 · 8 comments
Open

Twitter card #51

math-GH opened this issue Oct 1, 2022 · 8 comments

Comments

@math-GH
Copy link

math-GH commented Oct 1, 2022

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

grafik

@marienfressinaud
Copy link
Member

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
Copy link
Member

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

@math-GH
Copy link
Author

math-GH commented Oct 1, 2022

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
Copy link
Member

Alkarex commented Oct 1, 2022

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
Copy link
Member

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
Copy link
Member

Frenzie commented Oct 1, 2022

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
Copy link
Author

math-GH commented Oct 1, 2022

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

@marienfressinaud
Copy link
Member

marienfressinaud commented Oct 2, 2022

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"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants