From e264a9a94bbf50cf8a0b6fb285dc5e9b46c380ff Mon Sep 17 00:00:00 2001 From: Josh Habdas Date: Tue, 4 Apr 2017 00:56:04 +0800 Subject: [PATCH] refactor(template): use og:image for twitter #77 and #78 added support for different images on Twitter and Facebook, an advanced feature of SEO Tag Gem. The implementation has led to complications updating JSON-LD data in #151. Under Pareto principal we can reasonably assume this feature is not often used, and, as such, should be removed. The result of which simplifies template logic, offers a fallback experience by leverages Twitter's use of `og:image` in place of `twitter:image` (sees twitter card tag ref) and helps unblock #151. Users can no longer specify a separate twitter and Facebook image. If both a Facebook (Open Graph) and Twitter image are provided in the `image` object, the Facebook image will take precedence. --- README.md | 13 +++++-------- lib/template.html | 9 +++------ spec/jekyll_seo_tag_spec.rb | 18 +++++++++--------- 3 files changed, 17 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 58b17fa..3f08fe2 100644 --- a/README.md +++ b/README.md @@ -13,8 +13,8 @@ Jekyll SEO Tag adds the following meta tags to your site: * Canonical URL * Next and previous URLs on paginated pages * [JSON-LD Site and post metadata](https://developers.google.com/structured-data/) for richer indexing -* [Open graph](http://ogp.me/) title, description, site title, and URL (for Facebook, LinkedIn, etc.) -* [Twitter summary card](https://dev.twitter.com/cards/overview) metadata +* [Open Graph](http://ogp.me/) title, description, site title, and URL (for Facebook, LinkedIn, etc.) +* [Twitter Summary Card](https://dev.twitter.com/cards/overview) metadata While you could theoretically add the necessary metadata tags yourself, Jekyll SEO Tag provides a battle-tested template of crowdsourced best-practices. @@ -191,17 +191,14 @@ The following options can be set for any particular page. While the default opti For most users, setting `image: [path-to-image]` on a per-page basis should be enough. If you need more control over how images are represented, the `image` property can also be an object, with the following options: * `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 -* `width` - The width of the Facebook (`og:image`) image +* `height` - The height of the Open Graph (`og:image`) image +* `width` - The width of the Open Graph (`og:image`) image You can use any of the above, optional properties, like so: ```yml image: - twitter: /img/twitter.png - facebook: /img/facebook.png + path: /img/twitter.png height: 100 width: 100 ``` diff --git a/lib/template.html b/lib/template.html index 3885dd9..988c7cb 100755 --- a/lib/template.html +++ b/lib/template.html @@ -98,7 +98,7 @@ {% endif %} {% if page.image %} - {% assign seo_page_image = page.image.path | default: page.image.facebook | default: page.image %} + {% assign seo_page_image = page.image.path | default: page.image.facebook | default: page.image.twitter | default: page.image %} {% unless seo_page_image contains "://" %} {% assign seo_page_image = seo_page_image | absolute_url %} {% endunless %} @@ -132,7 +132,8 @@ {% endif %} {% if seo_page_image %} - + + {% if page.image.height %} {% endif %} @@ -141,10 +142,6 @@ {% endif %} {% endif %} -{% if page.image.twitter %} - -{% endif %} - {% if page.date %} diff --git a/spec/jekyll_seo_tag_spec.rb b/spec/jekyll_seo_tag_spec.rb index 38c0360..e54b36c 100755 --- a/spec/jekyll_seo_tag_spec.rb +++ b/spec/jekyll_seo_tag_spec.rb @@ -124,7 +124,7 @@ describe Jekyll::SeoTag do context "with relative page.image as a string" do let(:page) { make_page("image" => "/img/foo.png") } - it "outputs the image" do + it "outputs an open graph image" do expected = '' expect(output).to include(expected) end @@ -133,7 +133,7 @@ describe Jekyll::SeoTag do context "with absolute page.image" do let(:page) { make_page("image" => "http://cdn.example.invalid/img/foo.png") } - it "outputs the image" do + it "outputs an open graph image" do expected = '' expect(output).to include(expected) end @@ -143,7 +143,7 @@ describe Jekyll::SeoTag do context "when given a path" do let(:page) { make_page("image" => { "path" => "/img/foo.png" }) } - it "outputs the image" do + it "outputs an open graph image" do expected = %r!! expect(output).to match(expected) end @@ -152,7 +152,7 @@ describe Jekyll::SeoTag do context "when given a facebook image" do let(:page) { make_page("image" => { "facebook" => "/img/facebook.png" }) } - it "outputs the image" do + it "outputs an open graph image" do expected = %r!! expect(output).to match(expected) end @@ -161,17 +161,17 @@ describe Jekyll::SeoTag do context "when given a twitter image" do let(:page) { make_page("image" => { "twitter" => "/img/twitter.png" }) } - it "outputs the image" do - expected = %r!! + it "outputs an open graph image" do + expected = %r!! expect(output).to match(expected) end end - context "when given the image height and width" do - let(:image) { { "facebook" => "/img/foo.png", "height" => 1, "width" => 2 } } + context "when given an image height and width" do + let(:image) { { "path" => "/img/foo.png", "height" => 1, "width" => 2 } } let(:page) { make_page("image" => image) } - it "outputs the image" do + it "outputs an open graph image width and height" do expected = %r!! expect(output).to match(expected) expected = %r!!