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
Created a new datafile for the post categories. In this data file, links to generic images have been added.
Added a commented out path for local testing one of the images. Normally - The pathing is not correct for local, only for the live site. So this is to help with debugging in the future.
_includes/head-twitter-metatags.html
Abstracted the twitter metadata into this new .html file.
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 instead of the generic.
_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.
Issues Resolved
1169
Check List
[x] Commits are signed per the DCO using --signoff
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.
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
Issues Resolved
1169
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.