Merge pull request #174 from jhabdas/twitter-uses-og-image

refactor(template): use og:image for twitter

Author: benbalter

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
 ```

lib/template.html

@@ -90,7 +90,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 %}
@@ -124,7 +124,8 @@
 {% endif %}
 
 {% if seo_page_image %}
-<meta property="og:image" content="{{ seo_page_image }}" />
+
+  <meta property="og:image" content="{{ seo_page_image }}" />
   {% if page.image.height %}
     <meta property="og:image:height" content="{{ page.image.height }}" />
   {% endif %}
@@ -133,10 +134,6 @@
   {% endif %}
 {% endif %}
 
-{% if page.image.twitter %}
-  <meta name="twitter:image" content="{{ page.image.twitter | absolute_url }}" />
-{% endif %}
-
 {% if page.date %}
   <meta property="og:type" content="article" />
   <meta property="article:published_time" content="{{ page.date | date_to_xmlschema }}" />

spec/jekyll_seo_tag_spec.rb

@@ -172,7 +172,7 @@
     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 = '<meta property="og:image" content="http://example.invalid/img/foo.png" />'
         expect(output).to include(expected)
       end
@@ -181,7 +181,7 @@
     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 = '<meta property="og:image" content="http://cdn.example.invalid/img/foo.png" />'
         expect(output).to include(expected)
       end
@@ -191,7 +191,7 @@
       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!<meta property="og:image" content="http://example.invalid/img/foo.png" />!
           expect(output).to match(expected)
         end
@@ -200,7 +200,7 @@
       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!<meta property="og:image" content="http://example.invalid/img/facebook.png" />!
           expect(output).to match(expected)
         end
@@ -209,17 +209,17 @@
       context "when given a twitter image" do
         let(:page) { make_page("image" => { "twitter" => "/img/twitter.png" }) }
 
-        it "outputs the image" do
-          expected = %r!<meta name="twitter:image" content="http://example.invalid/img/twitter.png" />!
+        it "outputs an open graph image" do
+          expected = %r!<meta property="og:image" content="http://example.invalid/img/twitter.png" />!
           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!<meta property="og:image:height" content="1" />!
           expect(output).to match(expected)
           expected = %r!<meta property="og:image:width" content="2" />!