Improve the Open Graph tags for Twitter/X

conradolandia commented 1 month ago

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:image and 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.

netlify[bot] commented 1 month ago

Deploy Preview for spyder-svelte-website-preview ready!

Name	Link
Latest commit	24c9bfda08b2da52fd73d099cc2bd126b6c371f2
Latest deploy log	https://app.netlify.com/sites/spyder-svelte-website-preview/deploys/66f48e3d573d220008fc6e5d
Deploy Preview	https://deploy-preview-17--spyder-svelte-website-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

CAM-Gerlach commented 1 month ago

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 master.

conradolandia commented 1 month ago

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.

CAM-Gerlach commented 1 month ago

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.

CAM-Gerlach commented 1 month ago

@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?

conradolandia commented 1 month ago

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.

conradolandia commented 1 month ago

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.

spyder-ide / spyder-website