Blog twittercard sharing #2970
Merged
Blog twittercard sharing #2970
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…mmented out. Signed-off-by: kaimmej <[email protected]>
…' quotes. Signed-off-by: kaimmej <[email protected]>
- Created and added generic images for blog posts, these generic images are centered on the most common post categories and are used as a default image for posts that do not have a specific image. - The images are stored in the assets/media/blog-category-images folder. New data file - _data/post_categories.yml. This data file contains the categories for the blog posts and attaches the generic blog post image to the blog post category. Also provides the pathing to the images. Signed-off-by: kaimmej <[email protected]>
- I removed the twittercard information from head.html, and abstracted it into head-twitter-metatags.html.
- Added generic images for the blog post categories into a new _data file (post_categories.yml).
File changes:
_data/post_categories.yml
- Added the links to the images, forgot to do that in the first commit.
- Added a commented out path for local testing one of the images. The pathing is not correct for local, only for the live site.
_includes/head-twitter-metatags.html
- Added the twittercard and og meta tags to the head of the site.
- these metatags use the category of the blog post to determine the generic image to use for the twittercard.
- And if there is a featured image already on the blog post, the featured image is used.
_includes/head.html
- removed twittercard metadata from head.html. All of this is now in head-twitter-metatags.html.
_layouts/default.html
- Added logic to use either head.html or head-twitter-metatags.html depending on the page type. If it is a blog post, it uses head-twitter-metatags.html, otherwise it uses head.html.
Signed-off-by: kaimmej <[email protected]>
kaimmej
requested review from
elfisher,
AMoo-Miki,
nknize,
krisfreedain,
peterzhuamazon,
CEHENKLE,
dtaivpp,
kolchfa-aws,
nateynateynate and
natebower
as code owners
Changed the category called "default" to "default-category". This was done because the liquid templating has a "default" filter that can be applied, and we should change the name so it doesnt get confused. Signed-off-by: kaimmej [email protected]
…fore the meta_description Signed-off-by: kaimmej [email protected]
…tag-metadata html page into it, and then head.html is applied to every page. This was done because we want this metadata to be applied to every page of the site, before this change, it was only being applied to the blog posts. Signed-off-by: kaimmej [email protected]
…fault "default-category" Signed-off-by: kaimmej [email protected]
Signed-off-by: Nate B <[email protected]>
nateynateynate
previously approved these changes
Jun 19, 2024
Signed-off-by: Nate B <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue:
twittercard metadata was not being pulled correctly and rendered into the html of our blog posts. When we went to share them, we were not including all of the information that twitter was expecting. The twitter sharing images looked wierd for 2 reasons: (1) we were applying the label "summary" instead of "summary image large". Twitter displays different cards depending on what we communicate in these meta tags. and (2) we were giving a small OpenSearch logo image, instead of an image at the correct 2:1 ratio.
Additionally, sharing to other sites, such as facebook or Linkedin was broken because we were providing a different image and that image was 404'ing. og image
Summary of changes:
This pull request also includes 8 generic images for the most common blog post categories.
I fixed the logic that was rendering the twitter metatags, organized the file, and added additional metatags that I found in the twitter docs.
I removed the twittercard information from head.html, and abstracted it into head-twitter-metatags.html.
I added generic images for the blog post categories into a new _data file (post_categories.yml) and the logic to pull them into the metadata of blog posts.
File changes:
_data/post_categories.yml
_includes/head-twitter-metatags.html
_includes/head.html
_layouts/default.html
- Added logic to use either head.html or head-twitter-metatags.html depending on the page type. If it is a blog post, it uses head-twitter-metatags.html, otherwise it uses head.html.
Issues Resolved
Check List
By submitting this pull request, I confirm that my contribution is made under the terms of the BSD-3-Clause License.
Notes:
Inspecting the page source for one of our most recent blog posts - we see that the twitter:image is different from the opengraph image. The opengraph image 404's.
