fix: correct the Twitter Card in social share preview #1498
Conversation
|
I've attached a screenshot from the browser's HTML view to demonstrate the successful implementation and correct functioning of the Open Graph and Twitter card metadata updates. This image visually confirms that:
This visual evidence supports the changes made in this pull request, offering a clear depiction of the improved metadata handling in the site's HTML structure.
|
bigsk1
force-pushed
the
fix-twitter-cards
branch
2 times, most recently
from
82f3ff8 to
e635589
Compare
bigsk1
changed the title
There was a problem hiding this comment.
Thanks for submitting the patch, but there are a couple of problems with the modifications: firstly, you weren't clear about the purpose of img-url.html and strangely duplicated a piece of code, and lastly, there's another bug in the site.social_preview_image section that you didn't catch: there's no Twitter Card image defined (a meta element for twitter:image).
_includes/head.html
Outdated
| {% assign old_meta_clip = '<meta name="twitter:card"' %} | ||
| {% assign new_meta_clip = og_image | append: old_meta_clip %} | ||
| {% assign seo_tags = seo_tags | replace: old_meta_clip, new_meta_clip %} |
There was a problem hiding this comment.
What is the point of copying this code from below to here?
There was a problem hiding this comment.
Based on your suggestions, I have revised the implementation to better integrate with the existing structure of the head.html
In this update, I've focused on refining the handling of Twitter card URLs. Specifically, I have ensured that the absolute URLs are generated correctly for Twitter cards, while maintaining the img-url.html include. This change aims to address the issue with Twitter cards not displaying images correctly, which was the core problem in my initial pull request.
I've pushed these changes in the latest commit and would appreciate your review and feedback
There was a problem hiding this comment.
With these changes I have verified the correct html output
and have verified open graph and twitter cards are displayed correctly on socials
https://www.opengraph.xyz/url/https%3A%2F%2Fbigsk1.com%2Fposts%2FFile-Converter%2F
There was a problem hiding this comment.
Seems like you didn't understand what I was commenting on, never mind, I'll finish the patch.
cotes2020
force-pushed
the
fix-twitter-cards
branch
2 times, most recently
from
4612509 to
caff3b7
Compare
The Twitter card metadata in head.html was updated to ensure proper rendering of cards in tweets. This includes adjustments to the meta tags for title, description, and image attributes.
cotes2020
force-pushed
the
fix-twitter-cards
branch
from
caff3b7 to
c9d2f7f
Compare
cotes2020
changed the title
|
I am getting no visible image with the refactor real patch absolute urls are not being shown for twitter:image and og:image <meta property="twitter:image" content="/assets/images/bigsk1.webp">
|
Type of change
Description
Twitter cards were not displaying correctly due to relative URL paths. The proposed changes ensure that Twitter card meta tags use absolute URLs, aligning with best practices for SEO and social media compatibility
Additional context
This pull request addresses the issue reported in #1497 where
Key changes include:
This update has been tested across multiple social platforms to ensure correct display of Twitter card images
Special thanks to @timothystewart6 for his significant contributions to testing and refining the code.