meta-tags 2.13.0 → 2.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- checksums.yaml.gz.sig +0 -0
- data/Appraisals +25 -0
- data/CHANGELOG.md +158 -78
- data/CONTRIBUTING.md +6 -6
- data/Gemfile +5 -19
- data/README.md +174 -137
- data/Rakefile +44 -6
- data/Steepfile +13 -0
- data/certs/kpumuk.pem +19 -18
- data/gemfiles/rails_5.1.gemfile +8 -0
- data/gemfiles/rails_5.1.gemfile.lock +200 -0
- data/gemfiles/rails_5.2.gemfile +8 -0
- data/gemfiles/rails_5.2.gemfile.lock +200 -0
- data/gemfiles/rails_6.0.gemfile +8 -0
- data/gemfiles/rails_6.0.gemfile.lock +202 -0
- data/gemfiles/rails_6.1.gemfile +8 -0
- data/gemfiles/rails_6.1.gemfile.lock +201 -0
- data/gemfiles/rails_7.0.gemfile +8 -0
- data/gemfiles/rails_7.0.gemfile.lock +201 -0
- data/gemfiles/rails_7.1.gemfile +8 -0
- data/gemfiles/rails_7.1.gemfile.lock +231 -0
- data/lib/generators/meta_tags/install_generator.rb +1 -1
- data/lib/meta-tags.rb +1 -1
- data/lib/meta_tags/configuration.rb +23 -16
- data/lib/meta_tags/controller_helper.rb +4 -4
- data/lib/meta_tags/meta_tags_collection.rb +31 -22
- data/lib/meta_tags/railtie.rb +4 -4
- data/lib/meta_tags/renderer.rb +55 -28
- data/lib/meta_tags/tag.rb +1 -1
- data/lib/meta_tags/text_normalizer.rb +44 -39
- data/lib/meta_tags/version.rb +1 -1
- data/lib/meta_tags/view_helper.rb +7 -7
- data/lib/meta_tags.rb +13 -10
- data/meta-tags.gemspec +41 -22
- data/sig/lib/_internal/rails.rbs +58 -0
- data/sig/lib/meta_tags/configuration.rbs +19 -0
- data/sig/lib/meta_tags/content_tag.rbs +5 -0
- data/sig/lib/meta_tags/controller_helper.rbs +14 -0
- data/sig/lib/meta_tags/meta_tags_collection.rbs +41 -0
- data/sig/lib/meta_tags/renderer.rbs +50 -0
- data/sig/lib/meta_tags/tag.rbs +12 -0
- data/sig/lib/meta_tags/text_normalizer.rbs +36 -0
- data/sig/lib/meta_tags/version.rbs +4 -0
- data/sig/lib/meta_tags/view_helper.rbs +57 -0
- data/sig/lib/meta_tags.rbs +18 -0
- data.tar.gz.sig +0 -0
- metadata +165 -35
- metadata.gz.sig +0 -0
data/README.md
CHANGED
@@ -2,29 +2,30 @@
|
|
2
2
|
|
3
3
|
[](https://circleci.com/gh/kpumuk/meta-tags)
|
4
4
|
[](https://badge.fury.io/rb/meta-tags)
|
5
|
+
[](https://github.com/testdouble/standard)
|
5
6
|
[](https://codeclimate.com/github/kpumuk/meta-tags)
|
6
7
|
[](https://codeclimate.com/github/kpumuk/meta-tags/coverage)
|
7
8
|
[](https://badge.fury.io/rb/meta-tags)
|
8
|
-
[](https://github.com/kpumuk/meta-tags/blob/
|
9
|
+
[](https://github.com/kpumuk/meta-tags/blob/main/CHANGELOG.md)
|
9
10
|
|
10
11
|
Search Engine Optimization (SEO) plugin for Ruby on Rails applications.
|
11
12
|
|
12
13
|
## Ruby on Rails
|
13
14
|
|
14
|
-
MetaTags
|
15
|
-
major Rails releases up to
|
15
|
+
MetaTags main branch fully supports Ruby on Rails 5.1+, and is tested against all
|
16
|
+
major Rails releases up to 7.1.
|
16
17
|
|
17
|
-
Ruby versions older than 2.
|
18
|
+
Ruby versions older than 2.7 are no longer officially supported.
|
18
19
|
|
19
|
-
_Please note_ that we
|
20
|
-
Ruby on Rails older than
|
20
|
+
_Please note_ that we no longer support Ruby versions older than 2.6.0 and
|
21
|
+
Ruby on Rails older than 5.1, because they reached their [End of Life](https://endoflife.date/ruby).
|
21
22
|
|
22
23
|
## Installation
|
23
24
|
|
24
25
|
Add the "meta-tags" gem to your `Gemfile`.
|
25
26
|
|
26
27
|
```ruby
|
27
|
-
gem
|
28
|
+
gem "meta-tags"
|
28
29
|
```
|
29
30
|
|
30
31
|
And run `bundle install` command.
|
@@ -55,14 +56,14 @@ First, add this code to your main layout:
|
|
55
56
|
|
56
57
|
```erb
|
57
58
|
<head>
|
58
|
-
<%= display_meta_tags site:
|
59
|
+
<%= display_meta_tags site: "My website" %>
|
59
60
|
</head>
|
60
61
|
```
|
61
62
|
|
62
63
|
Then, to set the page title, add this to each of your views (see below for other options):
|
63
64
|
|
64
65
|
```erb
|
65
|
-
<h1><%= title
|
66
|
+
<h1><%= title "My page title" %></h1>
|
66
67
|
```
|
67
68
|
|
68
69
|
When views are rendered, the page title will be included in the right spots:
|
@@ -83,17 +84,19 @@ You can find allowed options for `display_meta_tags` method below.
|
|
83
84
|
You can define following instance variables:
|
84
85
|
|
85
86
|
```ruby
|
86
|
-
@page_title
|
87
|
-
@page_description =
|
88
|
-
@page_keywords
|
87
|
+
@page_title = "Member Login"
|
88
|
+
@page_description = "Member login page."
|
89
|
+
@page_keywords = "Site, Login, Members"
|
89
90
|
```
|
90
91
|
|
91
92
|
Also you could use `set_meta_tags` method to define all meta tags simultaneously:
|
92
93
|
|
93
94
|
```ruby
|
94
|
-
set_meta_tags
|
95
|
-
|
96
|
-
|
95
|
+
set_meta_tags(
|
96
|
+
title: "Member Login",
|
97
|
+
description: "Member login page.",
|
98
|
+
keywords: "Site, Login, Members"
|
99
|
+
)
|
97
100
|
```
|
98
101
|
|
99
102
|
You can find allowed options for `set_meta_tags` method below.
|
@@ -103,9 +106,9 @@ You can find allowed options for `set_meta_tags` method below.
|
|
103
106
|
To set meta tags you can use following methods:
|
104
107
|
|
105
108
|
```erb
|
106
|
-
<% title
|
107
|
-
<% description
|
108
|
-
<% keywords
|
109
|
+
<% title "Member Login" %>
|
110
|
+
<% description "Member login page." %>
|
111
|
+
<% keywords "Site, Login, Members" %>
|
109
112
|
<% nofollow %>
|
110
113
|
<% noindex %>
|
111
114
|
<% refresh 3 %>
|
@@ -114,9 +117,13 @@ To set meta tags you can use following methods:
|
|
114
117
|
Also there is `set_meta_tags` method exists:
|
115
118
|
|
116
119
|
```erb
|
117
|
-
<%
|
118
|
-
|
119
|
-
|
120
|
+
<%
|
121
|
+
set_meta_tags(
|
122
|
+
title: "Member Login",
|
123
|
+
description: "Member login page.",
|
124
|
+
keywords: "Site, Login, Members"
|
125
|
+
)
|
126
|
+
%>
|
120
127
|
```
|
121
128
|
|
122
129
|
You can pass an object that implements `#to_meta_tags` method and returns a Hash:
|
@@ -126,7 +133,7 @@ class Document < ApplicationRecord
|
|
126
133
|
def to_meta_tags
|
127
134
|
{
|
128
135
|
title: title,
|
129
|
-
description: summary
|
136
|
+
description: summary
|
130
137
|
}
|
131
138
|
end
|
132
139
|
end
|
@@ -139,43 +146,43 @@ The `title` method returns title itself, so you can use it to show the title
|
|
139
146
|
somewhere on the page:
|
140
147
|
|
141
148
|
```erb
|
142
|
-
<h1><%= title
|
149
|
+
<h1><%= title "Member Login" %></h1>
|
143
150
|
```
|
144
151
|
|
145
152
|
If you want to set the title and display another text, use this:
|
146
153
|
|
147
154
|
```erb
|
148
|
-
<h1><%= title
|
155
|
+
<h1><%= title "Member Login", "Here you can login to the site:" %></h1>
|
149
156
|
```
|
150
157
|
|
151
158
|
### Allowed options for `display_meta_tags` and `set_meta_tags` methods
|
152
159
|
|
153
160
|
Use these options to customize the title format:
|
154
161
|
|
155
|
-
| Option | Description
|
156
|
-
| -------------- |
|
157
|
-
| `:site` | site title
|
158
|
-
| `:title` | page title
|
159
|
-
| `:description` | page description
|
160
|
-
| `:keywords` | page keywords
|
161
|
-
| `:charset` | page character set
|
162
|
-
| `:prefix` | text between site name and separator
|
163
|
-
| `:separator` | text used to separate website name from page title
|
164
|
-
| `:suffix` | text between separator and page title
|
165
|
-
| `:lowercase` | when true, the page name will be lowercase
|
166
|
-
| `:reverse` | when true, the page and site names will be reversed
|
167
|
-
| `:noindex` | add noindex meta tag; when true,
|
168
|
-
| `:index` | add index meta tag; when true,
|
169
|
-
| `:nofollow` | add nofollow meta tag; when true,
|
170
|
-
| `:follow` | add follow meta tag; when true,
|
171
|
-
| `:noarchive` | add noarchive meta tag; when true,
|
172
|
-
| `:canonical` | add canonical link tag
|
173
|
-
| `:prev` | add prev link tag
|
174
|
-
| `:next` | add next link tag
|
175
|
-
| `:image_src` | add image_src link tag
|
176
|
-
| `:og` | add Open Graph tags (Hash)
|
177
|
-
| `:twitter` | add Twitter tags (Hash)
|
178
|
-
| `:refresh` | refresh interval and optionally url to redirect to
|
162
|
+
| Option | Description |
|
163
|
+
| -------------- | -------------------------------------------------------------------------------------------------------------------- |
|
164
|
+
| `:site` | site title |
|
165
|
+
| `:title` | page title |
|
166
|
+
| `:description` | page description |
|
167
|
+
| `:keywords` | page keywords |
|
168
|
+
| `:charset` | page character set |
|
169
|
+
| `:prefix` | text between site name and separator |
|
170
|
+
| `:separator` | text used to separate website name from page title |
|
171
|
+
| `:suffix` | text between separator and page title |
|
172
|
+
| `:lowercase` | when true, the page name will be lowercase |
|
173
|
+
| `:reverse` | when true, the page and site names will be reversed |
|
174
|
+
| `:noindex` | add noindex meta tag; when true, "robots" will be used; accepts a string with a robot name, or an array of strings |
|
175
|
+
| `:index` | add index meta tag; when true, "robots" will be used; accepts a string with a robot name, or an array of strings |
|
176
|
+
| `:nofollow` | add nofollow meta tag; when true, "robots" will be used; accepts a string with a robot name, or an array of strings |
|
177
|
+
| `:follow` | add follow meta tag; when true, "robots" will be used; accepts a string with a robot name, or an array of strings |
|
178
|
+
| `:noarchive` | add noarchive meta tag; when true, "robots" will be used; accepts a string with a robot name, or an array of strings |
|
179
|
+
| `:canonical` | add canonical link tag |
|
180
|
+
| `:prev` | add prev link tag |
|
181
|
+
| `:next` | add next link tag |
|
182
|
+
| `:image_src` | add image_src link tag |
|
183
|
+
| `:og` | add Open Graph tags (Hash) |
|
184
|
+
| `:twitter` | add Twitter tags (Hash) |
|
185
|
+
| `:refresh` | refresh interval and optionally url to redirect to |
|
179
186
|
|
180
187
|
And here are a few examples to give you ideas.
|
181
188
|
|
@@ -184,8 +191,8 @@ And here are a few examples to give you ideas.
|
|
184
191
|
<%= display_meta_tags prefix: false, separator: ":" %>
|
185
192
|
<%= display_meta_tags lowercase: true %>
|
186
193
|
<%= display_meta_tags reverse: true, prefix: false %>
|
187
|
-
<%= display_meta_tags og: { title:
|
188
|
-
<%= display_meta_tags alternate: {
|
194
|
+
<%= display_meta_tags og: { title: "The Rock", type: "video.movie" } %>
|
195
|
+
<%= display_meta_tags alternate: { "zh-Hant" => "http://example.com.tw/base/url" } %>
|
189
196
|
```
|
190
197
|
|
191
198
|
### Allowed values
|
@@ -193,16 +200,16 @@ And here are a few examples to give you ideas.
|
|
193
200
|
You can specify `:title` as a string or array:
|
194
201
|
|
195
202
|
```ruby
|
196
|
-
set_meta_tags title: [
|
203
|
+
set_meta_tags title: ["part1", "part2"], site: "site"
|
197
204
|
# site | part1 | part2
|
198
|
-
set_meta_tags title: [
|
205
|
+
set_meta_tags title: ["part1", "part2"], reverse: true, site: "site"
|
199
206
|
# part2 | part1 | site
|
200
207
|
```
|
201
208
|
|
202
209
|
Keywords can be passed as string of comma-separated values, or as an array:
|
203
210
|
|
204
211
|
```ruby
|
205
|
-
set_meta_tags keywords: [
|
212
|
+
set_meta_tags keywords: ["tag1", "tag2"]
|
206
213
|
# tag1, tag2
|
207
214
|
```
|
208
215
|
|
@@ -219,7 +226,7 @@ Say, you have the following in your application layout:
|
|
219
226
|
```ruby
|
220
227
|
display_meta_tags og: {
|
221
228
|
title: :title,
|
222
|
-
site_name: :site
|
229
|
+
site_name: :site
|
223
230
|
}
|
224
231
|
```
|
225
232
|
|
@@ -227,7 +234,7 @@ The value of `og[:title]` is a symbol and therefore references the value of the
|
|
227
234
|
top level `title` meta tag. With the following in any view:
|
228
235
|
|
229
236
|
```ruby
|
230
|
-
title
|
237
|
+
title "my great view"
|
231
238
|
```
|
232
239
|
|
233
240
|
You get this open graph meta tag for free:
|
@@ -261,10 +268,10 @@ code duplication, you can define a helper in `application_helper.rb`:
|
|
261
268
|
```ruby
|
262
269
|
def default_meta_tags
|
263
270
|
{
|
264
|
-
title:
|
265
|
-
description:
|
266
|
-
keywords:
|
267
|
-
separator:
|
271
|
+
title: "Member Login",
|
272
|
+
description: "Member login page.",
|
273
|
+
keywords: "Site, Login, Members",
|
274
|
+
separator: "—".html_safe
|
268
275
|
}
|
269
276
|
end
|
270
277
|
```
|
@@ -295,11 +302,11 @@ browser are displayed in the title bar. The search engines look at
|
|
295
302
|
the title bar to determine what the page is all about.
|
296
303
|
|
297
304
|
```ruby
|
298
|
-
set_meta_tags title:
|
305
|
+
set_meta_tags title: "Member Login"
|
299
306
|
# <title>Member Login</title>
|
300
|
-
set_meta_tags site:
|
307
|
+
set_meta_tags site: "Site Title", title: "Member Login"
|
301
308
|
# <title>Site Title | Member Login</title>
|
302
|
-
set_meta_tags site:
|
309
|
+
set_meta_tags site: "Site Title", title: "Member Login", reverse: true
|
303
310
|
# <title>Member Login | Site Title</title>
|
304
311
|
```
|
305
312
|
|
@@ -307,7 +314,7 @@ Recommended title tag length: up to <b>70 characters</b>, <b>10 words</b>.
|
|
307
314
|
|
308
315
|
Further reading:
|
309
316
|
|
310
|
-
|
317
|
+
- [Title Tag](https://moz.com/learn/seo/title-tag)
|
311
318
|
|
312
319
|
### Description
|
313
320
|
|
@@ -325,8 +332,8 @@ Recommended description tag length: up to <b>300 characters</b>.
|
|
325
332
|
|
326
333
|
Further reading:
|
327
334
|
|
328
|
-
|
329
|
-
|
335
|
+
- [Meta Description](https://moz.com/learn/seo/meta-description)
|
336
|
+
- [How Long Should Your Meta Description Be? (2018 Edition)](https://moz.com/blog/how-long-should-your-meta-description-be-2018)
|
330
337
|
|
331
338
|
### Keywords
|
332
339
|
|
@@ -352,7 +359,7 @@ include specific pages in their indexes.
|
|
352
359
|
```ruby
|
353
360
|
set_meta_tags noindex: true
|
354
361
|
# <meta name="robots" content="noindex">
|
355
|
-
set_meta_tags noindex:
|
362
|
+
set_meta_tags noindex: "googlebot"
|
356
363
|
# <meta name="googlebot" content="noindex">
|
357
364
|
```
|
358
365
|
|
@@ -360,12 +367,12 @@ This is useful for pages like login, password reset, privacy policy, etc.
|
|
360
367
|
|
361
368
|
Further reading:
|
362
369
|
|
363
|
-
|
364
|
-
|
370
|
+
- [Blocking Google](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=93708)
|
371
|
+
- [Using meta tags to block access to your site](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=93710)
|
365
372
|
|
366
373
|
### Index
|
367
374
|
|
368
|
-
Although it is not required to add
|
375
|
+
Although it is not required to add "index" to "robots" as it is default value for Google, some SEO specialists recommend to add it to website
|
369
376
|
|
370
377
|
```ruby
|
371
378
|
set_meta_tags index: true
|
@@ -382,18 +389,18 @@ still arrives at your undesired page.
|
|
382
389
|
```ruby
|
383
390
|
set_meta_tags nofollow: true
|
384
391
|
# <meta name="robots" content="nofollow">
|
385
|
-
set_meta_tags nofollow:
|
392
|
+
set_meta_tags nofollow: "googlebot"
|
386
393
|
# <meta name="googlebot" content="nofollow">
|
387
394
|
```
|
388
395
|
|
389
396
|
Further reading:
|
390
397
|
|
391
|
-
|
392
|
-
|
398
|
+
- [About rel="nofollow"](http://www.google.com/support/webmasters/bin/answer.py?answer=96569)
|
399
|
+
- [Meta tags](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812)
|
393
400
|
|
394
401
|
### Follow
|
395
402
|
|
396
|
-
Follow will work with Noindex
|
403
|
+
Follow will work with Noindex meta tag
|
397
404
|
|
398
405
|
```ruby
|
399
406
|
set_meta_tags noindex: true, follow: true
|
@@ -409,6 +416,9 @@ Canonical link element tells a search engine what is the canonical or main URL
|
|
409
416
|
for a content which have multiple URLs. The search engine will always return
|
410
417
|
that URL, and link popularity and authority will be applied to that URL.
|
411
418
|
|
419
|
+
Note: If you like follow a hint of John Mueller that you shouldn't mix canonical with noindex, then you can
|
420
|
+
set `MetaTags.config.skip_canonical_links_on_noindex = true` and we'll handle it for you.
|
421
|
+
|
412
422
|
```ruby
|
413
423
|
set_meta_tags canonical: "http://yoursite.com/canonical/url"
|
414
424
|
# <link rel="canonical" href="http://yoursite.com/canonical/url">
|
@@ -416,8 +426,8 @@ set_meta_tags canonical: "http://yoursite.com/canonical/url"
|
|
416
426
|
|
417
427
|
Further reading:
|
418
428
|
|
419
|
-
|
420
|
-
|
429
|
+
- [About rel="canonical"](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=139394)
|
430
|
+
- [Canonicalization](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=139066)
|
421
431
|
|
422
432
|
### Icon
|
423
433
|
|
@@ -426,13 +436,13 @@ icon, tab icon or bookmark icon, is a file containing one or more small icons,
|
|
426
436
|
most commonly 16×16 pixels, associated with a particular website or web page.
|
427
437
|
|
428
438
|
```ruby
|
429
|
-
set_meta_tags icon:
|
439
|
+
set_meta_tags icon: "/favicon.ico"
|
430
440
|
# <link rel="icon" href="/favicon.ico" type="image/x-icon">
|
431
|
-
set_meta_tags icon:
|
441
|
+
set_meta_tags icon: "/favicon.png", type: "image/png"
|
432
442
|
# <link rel="icon" href="/favicon.png" type="image/png">
|
433
443
|
set_meta_tags icon: [
|
434
|
-
{
|
435
|
-
{
|
444
|
+
{href: "/images/icons/icon_96.png", sizes: "32x32 96x96", type: "image/png"},
|
445
|
+
{href: "/images/icons/icon_itouch_precomp_32.png", rel: "apple-touch-icon-precomposed", sizes: "32x32", type: "image/png"}
|
436
446
|
]
|
437
447
|
# <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96">
|
438
448
|
# <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32">
|
@@ -440,9 +450,8 @@ set_meta_tags icon: [
|
|
440
450
|
|
441
451
|
Further reading:
|
442
452
|
|
443
|
-
|
444
|
-
|
445
|
-
|
453
|
+
- [Favicon](https://www.wikiwand.com/en/Favicon)
|
454
|
+
- [Touch Icons](https://mathiasbynens.be/notes/touch-icons)
|
446
455
|
|
447
456
|
### Multi-regional and multilingual URLs, RSS and mobile links
|
448
457
|
|
@@ -450,11 +459,11 @@ Alternate link elements tell a search engine when there is content that's
|
|
450
459
|
translated or targeted to users in a certain region.
|
451
460
|
|
452
461
|
```ruby
|
453
|
-
set_meta_tags alternate: {
|
462
|
+
set_meta_tags alternate: {"fr" => "http://yoursite.fr/alternate/url"}
|
454
463
|
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
|
455
464
|
|
456
|
-
set_meta_tags alternate: {
|
457
|
-
|
465
|
+
set_meta_tags alternate: {"fr" => "http://yoursite.fr/alternate/url",
|
466
|
+
"de" => "http://yoursite.de/alternate/url"}
|
458
467
|
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
|
459
468
|
# <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de">
|
460
469
|
```
|
@@ -463,17 +472,17 @@ If you need more than just multi-lingual links, you can use an alternative synta
|
|
463
472
|
|
464
473
|
```ruby
|
465
474
|
set_meta_tags alternate: [
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
475
|
+
{href: "http://example.fr/base/url", hreflang: "fr"},
|
476
|
+
{href: "http://example.com/feed.rss", type: "application/rss+xml", title: "RSS"},
|
477
|
+
{href: "http://m.example.com/page-1", media: "only screen and (max-width: 640px)"}
|
478
|
+
]
|
470
479
|
```
|
471
480
|
|
472
481
|
Further reading:
|
473
482
|
|
474
|
-
|
475
|
-
|
476
|
-
|
483
|
+
- [Multi-regional and multilingual sites](https://support.google.com/webmasters/answer/182192)
|
484
|
+
- [About rel="alternate" hreflang="x"](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=189077)
|
485
|
+
- [Separate URLs](https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls#annotation-in-the-html)
|
477
486
|
|
478
487
|
### Pagination links
|
479
488
|
|
@@ -490,8 +499,8 @@ set_meta_tags next: "http://yoursite.com/url?page=3"
|
|
490
499
|
|
491
500
|
Further reading:
|
492
501
|
|
493
|
-
|
494
|
-
|
502
|
+
- [Pagination](http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1663744)
|
503
|
+
- [Pagination with rel="next" and rel="prev"](http://googlewebmastercentral.blogspot.ca/2011/09/pagination-with-relnext-and-relprev.html)
|
495
504
|
|
496
505
|
### image_src links
|
497
506
|
|
@@ -518,8 +527,17 @@ set_meta_tags amphtml: url_for(format: :amp, only_path: false)
|
|
518
527
|
|
519
528
|
To link back to normal version, use `canonical`.
|
520
529
|
|
521
|
-
|
522
|
-
|
530
|
+
- [What Is AMP?](https://www.ampproject.org/learn/about-amp/)
|
531
|
+
- [Make Your Page Discoverable](https://www.ampproject.org/docs/guides/discovery)
|
532
|
+
|
533
|
+
### Manifest links
|
534
|
+
|
535
|
+
```ruby
|
536
|
+
set_meta_tags manifest: "manifest.json"
|
537
|
+
# <link rel="manifest" href="manifest.json">
|
538
|
+
```
|
539
|
+
|
540
|
+
- [What is manifest?](https://developer.mozilla.org/en-US/docs/Web/Manifest)
|
523
541
|
|
524
542
|
### Refresh interval and redirect URL
|
525
543
|
|
@@ -533,15 +551,14 @@ meta refresh to be used as a method of URL redirection.
|
|
533
551
|
```ruby
|
534
552
|
set_meta_tags refresh: 5
|
535
553
|
# <meta content="5" http-equiv="refresh">
|
536
|
-
set_meta_tags refresh:
|
554
|
+
set_meta_tags refresh: "5;url=http://example.com"
|
537
555
|
# <meta content="5;url=http://example.com" http-equiv="refresh">
|
538
556
|
```
|
539
557
|
|
540
558
|
Further reading:
|
541
559
|
|
542
|
-
|
543
|
-
|
544
|
-
|
560
|
+
- [Meta refresh](http://en.wikipedia.org/wiki/Meta_refresh)
|
561
|
+
- [What is the Meta Refresh Tag](http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm)
|
545
562
|
|
546
563
|
### Open Search
|
547
564
|
|
@@ -550,15 +567,15 @@ Open Search link element to describe a search engine in a standard and accessibl
|
|
550
567
|
```ruby
|
551
568
|
set_meta_tags open_search: {
|
552
569
|
title: "Open Search",
|
553
|
-
href:
|
570
|
+
href: "/opensearch.xml"
|
554
571
|
}
|
555
572
|
# <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml">
|
556
573
|
```
|
557
574
|
|
558
575
|
Further reading:
|
559
576
|
|
560
|
-
|
561
|
-
|
577
|
+
- [OpenSearch specs](http://www.opensearch.org/Specifications/OpenSearch/1.1)
|
578
|
+
- [OpenSearch wiki](http://en.wikipedia.org/wiki/OpenSearch)
|
562
579
|
|
563
580
|
### Hashes
|
564
581
|
|
@@ -581,7 +598,7 @@ Repeated meta tags can be built just using an Array inside a Hash. For example:
|
|
581
598
|
|
582
599
|
```ruby
|
583
600
|
set_meta_tags og: {
|
584
|
-
|
601
|
+
image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
|
585
602
|
}
|
586
603
|
# <meta property="og:image" content="http://example.com/rock.jpg">
|
587
604
|
# <meta property="og:image" content="http://example.com/rock2.jpg">
|
@@ -596,13 +613,13 @@ and in the future. Here's an example for a movie page:
|
|
596
613
|
|
597
614
|
```ruby
|
598
615
|
set_meta_tags og: {
|
599
|
-
title:
|
600
|
-
type:
|
601
|
-
url:
|
602
|
-
image:
|
603
|
-
video:
|
604
|
-
director:
|
605
|
-
writer:
|
616
|
+
title: "The Rock",
|
617
|
+
type: "video.movie",
|
618
|
+
url: "http://www.imdb.com/title/tt0117500/",
|
619
|
+
image: "http://ia.media-imdb.com/rock.jpg",
|
620
|
+
video: {
|
621
|
+
director: "http://www.imdb.com/name/nm0000881/",
|
622
|
+
writer: ["http://www.imdb.com/name/nm0918711/", "http://www.imdb.com/name/nm0177018/"]
|
606
623
|
}
|
607
624
|
}
|
608
625
|
# <meta property="og:title" content="The Rock">
|
@@ -618,19 +635,21 @@ Multiple images declared as an **array** (look at the `_` character):
|
|
618
635
|
|
619
636
|
```ruby
|
620
637
|
set_meta_tags og: {
|
621
|
-
title:
|
622
|
-
type:
|
623
|
-
url:
|
624
|
-
image:
|
625
|
-
|
626
|
-
|
627
|
-
|
628
|
-
|
629
|
-
|
630
|
-
|
631
|
-
|
632
|
-
|
633
|
-
|
638
|
+
title: "Two structured image properties",
|
639
|
+
type: "website",
|
640
|
+
url: "view-source:http://examples.opengraphprotocol.us/image-array.html",
|
641
|
+
image: [
|
642
|
+
{
|
643
|
+
_: "http://examples.opengraphprotocol.us/media/images/75.png",
|
644
|
+
width: 75,
|
645
|
+
height: 75
|
646
|
+
},
|
647
|
+
{
|
648
|
+
_: "http://examples.opengraphprotocol.us/media/images/50.png",
|
649
|
+
width: 50,
|
650
|
+
height: 50
|
651
|
+
}
|
652
|
+
]
|
634
653
|
}
|
635
654
|
# <meta property="og:title" content="Two structured image properties">
|
636
655
|
# <meta property="og:type" content="website">
|
@@ -647,10 +666,10 @@ Article meta tags are supported too:
|
|
647
666
|
|
648
667
|
```ruby
|
649
668
|
set_meta_tags article: {
|
650
|
-
published_time:
|
651
|
-
modified_time:
|
652
|
-
section:
|
653
|
-
tag:
|
669
|
+
published_time: "2013-09-17T05:59:00+01:00",
|
670
|
+
modified_time: "2013-09-16T19:08:47+01:00",
|
671
|
+
section: "Article Section",
|
672
|
+
tag: "Article Tag"
|
654
673
|
}
|
655
674
|
# <meta property="article:published_time" content="2013-09-17T05:59:00+01:00">
|
656
675
|
# <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00">
|
@@ -660,8 +679,8 @@ set_meta_tags article: {
|
|
660
679
|
|
661
680
|
Further reading:
|
662
681
|
|
663
|
-
|
664
|
-
|
682
|
+
- [Open Graph protocol](http://developers.facebook.com/docs/opengraph/)
|
683
|
+
- [Must-Have Social Meta Tags for Twitter, Google+, Facebook and More](https://moz.com/blog/meta-data-templates-123)
|
665
684
|
|
666
685
|
### Twitter Cards
|
667
686
|
|
@@ -683,11 +702,11 @@ When you need to generate a [Twitter Photo card](https://dev.twitter.com/docs/ca
|
|
683
702
|
|
684
703
|
```ruby
|
685
704
|
set_meta_tags twitter: {
|
686
|
-
card:
|
705
|
+
card: "photo",
|
687
706
|
image: {
|
688
|
-
_:
|
689
|
-
width:
|
690
|
-
height: 100
|
707
|
+
_: "http://example.com/1.png",
|
708
|
+
width: 100,
|
709
|
+
height: 100
|
691
710
|
}
|
692
711
|
}
|
693
712
|
# <meta name="twitter:card" content="photo">
|
@@ -696,9 +715,27 @@ set_meta_tags twitter: {
|
|
696
715
|
# <meta name="twitter:image:height" content="100">
|
697
716
|
```
|
698
717
|
|
718
|
+
Special parameter `itemprop` can be used on a "anonymous" tag "\_" to generate "itemprop" HTML attribute:
|
719
|
+
|
720
|
+
```ruby
|
721
|
+
set_meta_tags twitter: {
|
722
|
+
card: "photo",
|
723
|
+
image: {
|
724
|
+
_: "http://example.com/1.png",
|
725
|
+
width: 100,
|
726
|
+
height: 100,
|
727
|
+
itemprop: "image"
|
728
|
+
}
|
729
|
+
}
|
730
|
+
# <meta name="twitter:card" content="photo">
|
731
|
+
# <meta name="twitter:image" content="http://example.com/1.png" itemprop="image">
|
732
|
+
# <meta name="twitter:image:width" content="100">
|
733
|
+
# <meta name="twitter:image:height" content="100">
|
734
|
+
```
|
735
|
+
|
699
736
|
Further reading:
|
700
737
|
|
701
|
-
|
738
|
+
- [Twitter Cards Documentation](https://dev.twitter.com/cards/)
|
702
739
|
|
703
740
|
### App Links
|
704
741
|
|
@@ -719,7 +756,7 @@ set_meta_tags al: {
|
|
719
756
|
|
720
757
|
Further reading:
|
721
758
|
|
722
|
-
|
759
|
+
- [App Links Documentation](https://developers.facebook.com/docs/applinks)
|
723
760
|
|
724
761
|
### Custom meta tags
|
725
762
|
|
@@ -737,7 +774,7 @@ You can also specify value as an Array, and values will be displayed as a list
|
|
737
774
|
of `meta` tags:
|
738
775
|
|
739
776
|
```ruby
|
740
|
-
set_meta_tags author: [
|
777
|
+
set_meta_tags author: ["Dmytro Shteflyuk", "John Doe"]
|
741
778
|
# <meta name="author" content="Dmytro Shteflyuk">
|
742
779
|
# <meta name="author" content="John Doe">
|
743
780
|
```
|