From ba16b955c8b85c122178e349737cb299d0847aa0 Mon Sep 17 00:00:00 2001 From: Kyle Niewiada Date: Thu, 16 Feb 2017 14:07:35 -0500 Subject: [PATCH] Propose new image handling method. --- README.md | 28 ++++++++------ lib/template.html | 73 +++++++++++++++++++++++++------------ spec/jekyll_seo_tag_spec.rb | 23 ++---------- 3 files changed, 70 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index a01ecdc..b053ff4 100644 --- a/README.md +++ b/README.md @@ -185,7 +185,8 @@ The following options can be set for any particular page. While the default opti * `name` - If the name of the thing that the page represents is different from the page title. (i.e.: "Frank's Café" vs "Welcome to Frank's Café") * `type` - The type of things that the page represents. This must be a [Schema.org type](http://schema.org/docs/schemas.html), and will probably usually be something like [`BlogPosting`](http://schema.org/BlogPosting), [`NewsArticle`](http://schema.org/NewsArticle), [`Person`](http://schema.org/Person), [`Organization`](http://schema.org/Organization), etc. * `links` - An array of other URLs that represent the same thing that this page represents. For instance, Jane's bio page might include links to Jane's GitHub and Twitter profiles. - * `date_modified` - An override for the `dateModified` field in the JSON-LD output. Useful when the file timestamp does not match the true time that the content was modified. + * `date_modified` - (YYYY-MM-DD hh:mm) A manual override for the `dateModified` field in the JSON-LD output. This field will take **first priority** for the `dateModified` output. This is useful when the file timestamp does not match the true time that the content was modified. + * A user may also install [Last Modified At](https://github.com/gjtorikian/jekyll-last-modified-at) which will offer an alternative way of providing for the `dateModified` field. ### Customizing image output @@ -194,30 +195,33 @@ For most users, setting `image: [path-to-image]` on a per-page basis should be e * `path` - The relative path to the image. Same as `image: [path-to-image]` * `twitter` - The relative path to a Twitter-specific image. * `facebook` - The relative path to a Facebook-specific image. -* `height` - The height of the Facebook (`og:image`) image and JSON-LD image object. -* `width` - The width of the Facebook (`og:image`) image and JSON-LD image object. +* `height` - The height of the image in pixels. +* `width` - The width of image in pixels. The JSON-LD will default to the `image: ` tag unless `path: ` `height: ` and `width: `. You can use any of the above, optional properties, like so: ```yml -image: - path: /img/banner.png - twitter: /img/twitter.png - facebook: /img/facebook.png - height: 100 - width: 100 +image: /img/banner.png ``` -Or if you have no site specific images simply: +Or if you have Facebook or Twitter specific images simply use: ```yml image: - path: /img/banner.png + default: + path: /img/banner.png + height: 100 + width: 100 + facebook: + path: /img/facebook.png + height: 90 + width: 90 + twitter: /img/twitter.png ``` -> Using the image dimensions are optional, but the [Google Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool/u/0/) will consider the JSON-LD to have errors when an image does not have specified dimensions. +Using the image dimensions are optional, but the [Google Structured Data Testing Tool](https://search.google.com/structured-data/testing-tool/u/0/) will consider the JSON-LD to have errors with certain types (i.e. BlogPosting) when an image does not have specified dimensions. ### Setting a default image diff --git a/lib/template.html b/lib/template.html index a872638..e0e9b52 100755 --- a/lib/template.html +++ b/lib/template.html @@ -73,6 +73,10 @@ {% assign seo_author_twitter = seo_author_twitter | replace:"@","" %} {% endif %} +{% if page.date_modified or page.last_modified_at or page.date %} + {% assign seo_date_modified = page.seo.date_modified | default: page.last_modified_at | default: page.date %} +{% endif %} + {% if page.seo and page.seo.type %} {% assign seo_type = page.seo.type %} {% elsif seo_homepage_or_about %} @@ -98,11 +102,27 @@ {% endif %} {% if page.image %} - {% assign seo_page_image = page.image.path | default: page.image.facebook | default: page.image %} - {% unless seo_page_image contains "://" %} - {% assign seo_page_image = seo_page_image | absolute_url %} + {% assign seo_page_image_default = page.image.default.path | default: page.image.default | default: page.image %} + {% unless seo_page_image_default contains "://" %} + {% assign seo_page_image_default = seo_page_image_default | absolute_url %} {% endunless %} - {% assign seo_page_image = seo_page_image | escape %} + {% assign seo_page_image_default = seo_page_image_default | escape %} + {% assign seo_page_image_default_width = page.image.default.width %} + {% assign seo_page_image_default_height = page.image.default.height %} + + {% assign seo_page_image_facebook = page.image.facebook.path | default: page.image.facebook %} + {% unless seo_page_image_facebook contains "://" %} + {% assign seo_page_image_facebook = seo_page_image_facebook | absolute_url %} + {% endunless %} + {% assign seo_page_image_facebook = seo_page_image_facebook | escape %} + {% assign seo_page_image_facebook_width = page.image.facebook.width %} + {% assign seo_page_image_facebook_height = page.image.facebook.height %} + + {% assign seo_page_image_twitter = page.image.twitter.path | default: page.image.twitter %} + {% unless seo_page_image_twitter contains "://" %} + {% assign seo_page_image_twitter = seo_page_image_twitter | absolute_url %} + {% endunless %} + {% assign seo_page_image_twitter = seo_page_image_twitter | escape %} {% endif %} {% if seo_tag.title and seo_title %} @@ -131,18 +151,27 @@ {% endif %} -{% if seo_page_image %} - - {% if page.image.height %} - +{% if page.image %} + {% if page.image.facebook %} + {% assign local_seo_page_image = seo_page_image_facebook %} + {% assign local_seo_page_image_height = seo_page_image_facebook_height %} + {% assign local_seo_page_image_width = seo_page_image_facebook_width %} + {% else %} + {% assign local_seo_page_image = seo_page_image_default %} + {% assign local_seo_page_image_height = seo_page_image_default_height %} + {% assign local_seo_page_image_width = seo_page_image_default_width %} {% endif %} - {% if page.image.width %} - + + {% if local_seo_page_image_height %} + + {% endif %} + {% if local_seo_page_image_width %} + {% endif %} {% endif %} {% if page.image.twitter %} - + {% endif %} {% if page.date %} @@ -158,7 +187,7 @@ {% endif %} {% if site.twitter %} - {% if seo_page_image or page.image.twitter %} + {% if page.image or page.image.twitter %} {% else %} @@ -226,16 +255,16 @@ }, {% endif %} -{% if seo_page_image %} - {% if page.image.height && page.image.width %} +{% if seo_page_image_default %} + {% if seo_page_image_default_height && seo_page_image_default_width %} "image": { "@type": "ImageObject", - "url": {{ seo_page_image | jsonify }}, - "height": {{ page.image.height | jsonify }}, - "width": {{ page.image.width | jsonify }} + "url": {{ seo_page_image_default | jsonify }}, + "height": {{ seo_page_image_default_height | jsonify }}, + "width": {{ seo_page_image_default_width | jsonify }} }, {% else %} - "image": {{ seo_page_image | jsonify }}, + "image": {{ seo_page_image_default | jsonify }}, {% endif %} {% endif %} @@ -243,10 +272,8 @@ "datePublished": {{ page.date | date_to_xmlschema | jsonify }}, {% endif %} -{% if page.date_modified %} - "dateModified": {{ page.date_modified | date_to_xmlschema | jsonify }}, -{% elsif page.date %} - "dateModified": {{ page.date | date_to_xmlschema | jsonify }}, +{% if seo_date_modified %} + "dateModified": {{ seo_date_modified | date_to_xmlschema | jsonify }}, {% endif %} {% if seo_description %} @@ -266,7 +293,7 @@ }, {% endif %} -{% if seo_type == "BlogPosting" or seo_type == "CreativeWork" %} +{% if seo_type == "BlogPosting" or seo_type == "CreativeWork"%} "mainEntityOfPage": { "@type": "WebPage", "@id": {{ page.url | replace:'/index.html','/' | absolute_url | jsonify }} diff --git a/spec/jekyll_seo_tag_spec.rb b/spec/jekyll_seo_tag_spec.rb index 0d12b77..52e3829 100644 --- a/spec/jekyll_seo_tag_spec.rb +++ b/spec/jekyll_seo_tag_spec.rb @@ -141,7 +141,7 @@ describe Jekyll::SeoTag do context "with page.image as an object" do context "when given a path" do - let(:page) { make_page("image" => { "path" => "/img/foo.png" }) } + let(:page) { make_page("image" => { "default" => "/img/foo.png" }) } it "outputs the image" do expected = %r!! @@ -168,8 +168,7 @@ describe Jekyll::SeoTag do end context "when given the image height and width" do - let(:image) { { "facebook" => "/img/foo.png", "height" => 1, "width" => 2 } } - let(:page) { make_page("image" => image) } + let(:page) { make_page("image" => { "facebook" => { "path" => "/img/foo.png", "height" => 1, "width" => 2 } }) } it "outputs the image" do expected = %r!! @@ -196,10 +195,10 @@ describe Jekyll::SeoTag do end end - context "with image.path, image.height, and image.width" do + context "with image.default.path, image.default.height, and image.default.width" do let(:meta) do { - "image" => { "path" => "/img/banner.png", "height" => 1, "width" => 2 }, + "image" => { "default" => { "path" => "/img/banner.png", "height" => 1, "width" => 2 } }, "url" => "http://example.invalid", } end @@ -212,20 +211,6 @@ describe Jekyll::SeoTag do end end - context "with image.path only" do - let(:meta) do - { - "image" => { "path" => "/img/banner.png" }, - "url" => "http://example.invalid", - } - end - let(:page) { make_post(meta) } - - it "outputs the image object" do - expect(json_data["image"]).to eql("http://example.invalid/img/banner.png") - end - end - context "with page.author" do let(:site) { make_site("logo" => "/logo.png", "url" => "http://example.invalid") } let(:page) { make_post("author" => "Mr. Foo") }