Improve the Open Graph tags for Twitter/X #17
Conversation
…` attribute instead of `property`)
…ata tags to the object, and use those. Alter the values of some metadata tags
✅ Deploy Preview for spyder-svelte-website-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…tuation (the past preview still does not work properly)
…main issue can affect testing with the netlify preview
|
Wait...the two 1080p preview PNGs in #7 were 8 Megabytes? 🤦 🤦 🤦 I'm not sure how I missed that, but I did get rather complacent since unlike most others whom I always carefully scrutinize for image size and optimization issues, you've been very good at optimizing your images before submitting them. And judging from the fact that it took me a while to convince myself I was reading it correctly even after noticing on this PR, I must have assumed I was looking at kB, not MB. It seems all three of us missed it, and we don't yet have our pre-commit file size check on this repo which (at least in theory) would have warned us. Since given each of these two images were nearly the size of the entire repo (including all the existing files, assets and blog images, GIFs, videos, etc) prior to their committal, and roughly tripled its size. Anyway, nothing we can do to fix it now except each be more careful to ensure it doesn't happen again. If we let even one of these incidents a year, we're likely facing a repo size of well over 100 MB after 5 years, around the size of the Spyder repo after over 15 years and ≈30,000 commits to |
|
You are correct in that, usually I avoid big files also, and I have no excuses. I just missed it, will be more careful with that. |
|
Yeah, we all missed it. Hopefully now that spyder-ide/spyder-docs#383 is in, I can get at least a basic suite of pre-commit checks ported over here soon that can catch that and other things. |
|
@conradolandia I see these files were changed from 2 to 4 space indents. Given this results in much more verbose, noisier changes and masks the substantive ones, and is not consistent with the other files I checked nor how HTML, CSS, JS, templates, etc. are formatted in other Spyder web-related repos, was this an accidental mistake? |
|
Yes, this was an accidental mistake. I changed editor and the new editor did what it wanted, I found out late. I will fix it. |
… simpler way of setting the metadata
|
I consider this PR ready for review. This will show the blog image and post metadata if sharing individual posts, and will show correct metadata for each individual page that provides metadata. The downside of this solution is that generates some code repetition, but I will take this solution as the best for now. I will leave the dynamic generation of OG images for each blog post for another PR, and maybe will centralize the meta tags in the general layout again. |
ccordoba12
changed the title
There was a problem hiding this comment.
It's working as expected, so it looks good to me.
Great work @conradolandia!
The current implementation of Open Graph tags is not working properly. Even when sharing the url of the blog on X, the tags used are the Home page tags, as you can see in metatags.io.
According to https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started the use of
og:imageand similar is supported. However, this post in StackOverflow affirms that "Twitter likes name, not property". So, I'm trying that.Also, the description is being repeated in the title, so I'm trying to construct a different description. Input on this matter is appreciated, to have a proper long description for the home page, the about page and the blog.
This PR is an attempt of solving these issues.