Propose new image handling method.
This commit is contained in:
Kyle Niewiada
parent
8e36fe4da1
commit
ba16b955c8
28
README.md
28
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
|
||||
|
||||
|
|
|
|||
|
|
@ -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 @@
|
|||
<meta property="og:site_name" content="{{ seo_site_title }}" />
|
||||
{% endif %}
|
||||
|
||||
{% if seo_page_image %}
|
||||
<meta property="og:image" content="{{ seo_page_image }}" />
|
||||
{% if page.image.height %}
|
||||
<meta property="og:image:height" content="{{ 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 %}
|
||||
<meta property="og:image:width" content="{{ page.image.width }}" />
|
||||
<meta property="og:image" content="{{ local_seo_page_image }}" />
|
||||
{% if local_seo_page_image_height %}
|
||||
<meta property="og:image:height" content="{{ local_seo_page_image_height }}" />
|
||||
{% endif %}
|
||||
{% if local_seo_page_image_width %}
|
||||
<meta property="og:image:width" content="{{ local_seo_page_image_width }}" />
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.image.twitter %}
|
||||
<meta name="twitter:image" content="{{ page.image.twitter | absolute_url }}" />
|
||||
<meta name="twitter:image" content="{{ seo_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 %}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
{% else %}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -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!<meta property="og:image" content="http://example.invalid/img/foo.png" />!
|
||||
|
|
@ -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!<meta property="og:image:height" content="1" />!
|
||||
|
|
@ -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") }
|
||||
|
|
|
|||
Loading…
Reference in New Issue