meta-tags 2.2.0 → 2.3.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- checksums.yaml.gz.sig +0 -0
- data.tar.gz.sig +0 -0
- data/.gitignore +2 -0
- data/.travis.yml +3 -3
- data/CHANGELOG.md +10 -0
- data/Gemfile +0 -1
- data/MIT-LICENSE +2 -2
- data/README.md +324 -218
- data/Rakefile +0 -20
- data/bin/console +14 -0
- data/bin/setup +8 -0
- data/lib/meta_tags/renderer.rb +1 -0
- data/lib/meta_tags/version.rb +1 -1
- data/meta-tags.gemspec +24 -26
- metadata +24 -67
- metadata.gz.sig +2 -4
- data/.ruby-gemset +0 -1
- data/spec/configuration_spec.rb +0 -14
- data/spec/controller_helper_spec.rb +0 -45
- data/spec/spec_helper.rb +0 -84
- data/spec/text_normalizer/normalize_title_spec.rb +0 -48
- data/spec/text_normalizer/truncate_array_spec.rb +0 -60
- data/spec/view_helper/charset_spec.rb +0 -16
- data/spec/view_helper/custom_spec.rb +0 -67
- data/spec/view_helper/description_spec.rb +0 -61
- data/spec/view_helper/icon_spec.rb +0 -42
- data/spec/view_helper/keywords_spec.rb +0 -58
- data/spec/view_helper/links_spec.rb +0 -146
- data/spec/view_helper/module_spec.rb +0 -41
- data/spec/view_helper/noindex_spec.rb +0 -107
- data/spec/view_helper/open_graph_spec.rb +0 -86
- data/spec/view_helper/open_search_spec.rb +0 -33
- data/spec/view_helper/refresh_spec.rb +0 -32
- data/spec/view_helper/title_spec.rb +0 -183
- data/spec/view_helper/twitter_spec.rb +0 -31
- data/spec/view_helper_spec.rb +0 -83
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2c0faa1dc2d5ab1ffe4f6f6e3a63e57f5f1fbe60
|
|
4
|
+
data.tar.gz: d19eece643bc09cb81f5a316f513d7882c35913e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 4af5c30565b86a315478893521a7014dd9f4efaf4fb6dc2b0b10272ccc10e5bb11d0029fbe9c7f79f4175dd8c2008e8a8fc6eb5b17e9c5f8eeab2f53ff0ee9f2
|
|
7
|
+
data.tar.gz: 0de6ee391e6d72547d6ba08258c578ea09c6808927a1035bdf9fb76bf8b1ef3e2cb52b6ac34ec0ea146f734cedd35f5fc88da15dad73c9a5302d8d883a28b555
|
checksums.yaml.gz.sig
CHANGED
|
Binary file
|
data.tar.gz.sig
CHANGED
|
Binary file
|
data/.gitignore
CHANGED
data/.travis.yml
CHANGED
|
@@ -3,8 +3,8 @@ cache: bundler
|
|
|
3
3
|
|
|
4
4
|
rvm:
|
|
5
5
|
- 2.0.0
|
|
6
|
-
- 2.1.
|
|
7
|
-
- 2.2.
|
|
6
|
+
- 2.1.10
|
|
7
|
+
- 2.2.5
|
|
8
8
|
- 2.3.1
|
|
9
9
|
|
|
10
10
|
env:
|
|
@@ -18,7 +18,7 @@ matrix:
|
|
|
18
18
|
exclude:
|
|
19
19
|
- rvm: 2.0.0
|
|
20
20
|
env: "RAILS_VERSION=5.0.0"
|
|
21
|
-
- rvm: 2.1.
|
|
21
|
+
- rvm: 2.1.10
|
|
22
22
|
env: "RAILS_VERSION=5.0.0"
|
|
23
23
|
|
|
24
24
|
notifications:
|
data/CHANGELOG.md
CHANGED
data/Gemfile
CHANGED
data/MIT-LICENSE
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
Copyright (c) 2011 Dmytro Shteflyuk
|
|
1
|
+
Copyright (c) 2011 - 2016 Dmytro Shteflyuk
|
|
2
2
|
|
|
3
3
|
MIT License
|
|
4
4
|
|
|
@@ -19,4 +19,4 @@ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
|
|
19
19
|
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
|
20
20
|
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
|
21
21
|
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
|
22
|
-
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
# MetaTags: a gem to make your Rails application SEO-friendly
|
|
2
2
|
|
|
3
3
|
[](http://travis-ci.org/kpumuk/meta-tags)
|
|
4
|
-
[](
|
|
5
|
-
[](https://badge.fury.io/rb/meta-tags)
|
|
5
|
+
[](https://codeclimate.com/github/kpumuk/meta-tags)
|
|
6
|
+
[](https://codeclimate.com/github/kpumuk/meta-tags/coverage)
|
|
7
7
|
|
|
8
8
|
Search Engine Optimization (SEO) plugin for Ruby on Rails applications.
|
|
9
9
|
|
|
@@ -18,7 +18,9 @@ Ruby versions older than 2.0.0 are no longer officially supported.
|
|
|
18
18
|
|
|
19
19
|
Add the "meta-tags" gem to your `Gemfile`.
|
|
20
20
|
|
|
21
|
-
|
|
21
|
+
```ruby
|
|
22
|
+
gem 'meta-tags'
|
|
23
|
+
```
|
|
22
24
|
|
|
23
25
|
And run `bundle install` command.
|
|
24
26
|
|
|
@@ -29,12 +31,14 @@ truncation have recommended values, you can change them to reflect your own
|
|
|
29
31
|
preferences. In order to do that, you can create an initializer
|
|
30
32
|
`config/initializers/meta_tags.rb`, with following code:
|
|
31
33
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
```ruby
|
|
35
|
+
MetaTags.configure do |c|
|
|
36
|
+
c.title_limit = 70
|
|
37
|
+
c.description_limit = 160
|
|
38
|
+
c.keywords_limit = 255
|
|
39
|
+
c.keywords_separator = ', '
|
|
40
|
+
end
|
|
41
|
+
```
|
|
38
42
|
|
|
39
43
|
## SEO Basics and MetaTags
|
|
40
44
|
|
|
@@ -44,12 +48,14 @@ Page titles are very important for Search engines. The titles in the
|
|
|
44
48
|
browser are displayed in the title bar. The search engines would look at
|
|
45
49
|
the this title bar to determine what the page is all about.
|
|
46
50
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
51
|
+
```ruby
|
|
52
|
+
set_meta_tags title: 'Member Login'
|
|
53
|
+
# <title>Some Page Title</title>
|
|
54
|
+
set_meta_tags site: 'Site Title', title: 'Member Login'
|
|
55
|
+
# <title>Site Title | Page Title</title>
|
|
56
|
+
set_meta_tags site: 'Site Title', title: 'Member Login', reverse: true
|
|
57
|
+
# <title>Page Title | Site Title</title>
|
|
58
|
+
```
|
|
53
59
|
|
|
54
60
|
Recommended title tag length: up to <b>70 characters</b>, <b>10 words</b>.
|
|
55
61
|
|
|
@@ -60,8 +66,10 @@ browsers as that of titles. But these descriptions may be displayed by
|
|
|
60
66
|
some search engines. They are used to describe the contents of a page in
|
|
61
67
|
2 or 3 sentences.
|
|
62
68
|
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
```ruby
|
|
70
|
+
set_meta_tags description: "All text about keywords, other keywords"
|
|
71
|
+
# <meta name="description" content="All text about keywords, other keywords" />
|
|
72
|
+
```
|
|
65
73
|
|
|
66
74
|
Recommended description tag length: up to <b>160 characters</b>.
|
|
67
75
|
|
|
@@ -71,8 +79,10 @@ Meta keywords tag are used to place your keywords that you think a
|
|
|
71
79
|
surfer would search in Search engines. Repeating keywords unnecessarily
|
|
72
80
|
would be considered spam and you may get permanently banned from SERP's
|
|
73
81
|
|
|
74
|
-
|
|
75
|
-
|
|
82
|
+
```ruby
|
|
83
|
+
set_meta_tags keywords: %w[keyword1 Keyword2 KeyWord3]
|
|
84
|
+
# <meta name="keywords" content="keyword1, keyword2, keyword3" />
|
|
85
|
+
```
|
|
76
86
|
|
|
77
87
|
Recommended keywords tag length: up to <b>255 characters</b>, <b>20 words</b>.
|
|
78
88
|
|
|
@@ -81,10 +91,12 @@ Recommended keywords tag length: up to <b>255 characters</b>, <b>20 words</b>.
|
|
|
81
91
|
By using the noindex meta tag, you can signal to search engines to not
|
|
82
92
|
include specific pages in their indexes.
|
|
83
93
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
94
|
+
```ruby
|
|
95
|
+
set_meta_tags noindex: true
|
|
96
|
+
# <meta name="robots" content="noindex" />
|
|
97
|
+
set_meta_tags noindex: 'googlebot'
|
|
98
|
+
# <meta name="googlebot" content="noindex" />
|
|
99
|
+
```
|
|
88
100
|
|
|
89
101
|
This is useful for pages like login, password reset, privacy policy, etc.
|
|
90
102
|
|
|
@@ -100,10 +112,12 @@ page. It's entirely likely that a robot might find the same links on some
|
|
|
100
112
|
other page without a nofollow (perhaps on some other site), and so
|
|
101
113
|
still arrives at your undesired page.
|
|
102
114
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
115
|
+
```ruby
|
|
116
|
+
set_meta_tags nofollow: true
|
|
117
|
+
# <meta name="robots" content="nofollow" />
|
|
118
|
+
set_meta_tags nofollow: 'googlebot'
|
|
119
|
+
# <meta name="googlebot" content="nofollow" />
|
|
120
|
+
```
|
|
107
121
|
|
|
108
122
|
Further reading:
|
|
109
123
|
|
|
@@ -114,8 +128,10 @@ Further reading:
|
|
|
114
128
|
|
|
115
129
|
Follow will work with Noindex meta tag
|
|
116
130
|
|
|
117
|
-
|
|
118
|
-
|
|
131
|
+
```ruby
|
|
132
|
+
set_meta_tags noindex: true, follow: true
|
|
133
|
+
# <meta name="robots" content="noindex, follow" />
|
|
134
|
+
```
|
|
119
135
|
|
|
120
136
|
It will not look at this page but will crawl through the rest of the pages on
|
|
121
137
|
your website.
|
|
@@ -126,8 +142,10 @@ Canonical link element tells a search engine what is the canonical or main URL
|
|
|
126
142
|
for a content which have multiple URLs. The search engine will always return
|
|
127
143
|
that URL, and link popularity and authority will be applied to that URL.
|
|
128
144
|
|
|
129
|
-
|
|
130
|
-
|
|
145
|
+
```ruby
|
|
146
|
+
set_meta_tags canonical: "http://yoursite.com/canonical/url"
|
|
147
|
+
# <link rel="canonical" href="http://yoursite.com/canonical/url" />
|
|
148
|
+
```
|
|
131
149
|
|
|
132
150
|
Further reading:
|
|
133
151
|
|
|
@@ -140,16 +158,18 @@ A favicon (short for Favorite icon), also known as a shortcut icon, Web site
|
|
|
140
158
|
icon, tab icon or bookmark icon, is a file containing one or more small icons,
|
|
141
159
|
most commonly 16×16 pixels, associated with a particular website or web page.
|
|
142
160
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
161
|
+
```ruby
|
|
162
|
+
set_meta_tags icon: '/favicon.ico'
|
|
163
|
+
# <link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
164
|
+
set_meta_tags icon: '/favicon.png', type: 'image/png'
|
|
165
|
+
# <link rel="icon" href="/favicon.png" type="image/png" />
|
|
166
|
+
set_meta_tags icon: [
|
|
167
|
+
{ href: '/images/icons/icon_96.png', sizes: '32x32 96x96', type: 'image/png' },
|
|
168
|
+
{ href: '/images/icons/icon_itouch_precomp_32.png', rel: 'apple-touch-icon-precomposed', sizes: '32x32', type: 'image/png' },
|
|
169
|
+
]
|
|
170
|
+
# <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96" />
|
|
171
|
+
# <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32" />
|
|
172
|
+
```
|
|
153
173
|
|
|
154
174
|
Further reading:
|
|
155
175
|
|
|
@@ -160,8 +180,10 @@ Further reading:
|
|
|
160
180
|
|
|
161
181
|
Link to your Google+ profile using rel="author"
|
|
162
182
|
|
|
163
|
-
|
|
164
|
-
|
|
183
|
+
```ruby
|
|
184
|
+
set_meta_tags author: "http://yourgplusprofile.com/profile/url"
|
|
185
|
+
# <link rel="author" href="http://yourgplusprofile.com/profile/url" />
|
|
186
|
+
```
|
|
165
187
|
|
|
166
188
|
Further reading:
|
|
167
189
|
|
|
@@ -171,8 +193,10 @@ Further reading:
|
|
|
171
193
|
|
|
172
194
|
Link to your Google+ profile using rel="publisher"
|
|
173
195
|
|
|
174
|
-
|
|
175
|
-
|
|
196
|
+
```ruby
|
|
197
|
+
set_meta_tags publisher: "http://yourgplusprofile.com/profile/url"
|
|
198
|
+
# <link rel="publisher" href="http://yourgplusprofile.com/profile/url" />
|
|
199
|
+
```
|
|
176
200
|
|
|
177
201
|
* [Link to your website](https://support.google.com/plus/answer/1713826?hl=en)
|
|
178
202
|
* [The Difference Between rel=author & rel=publisher](http://www.websitemagazine.com/content/blogs/posts/archive/2013/02/05/the-difference-between-rel-author-amp-rel-publisher.aspx)
|
|
@@ -182,21 +206,25 @@ Link to your Google+ profile using rel="publisher"
|
|
|
182
206
|
Alternate link elements tell a search engine when there is content that's
|
|
183
207
|
translated or targeted to users in a certain region.
|
|
184
208
|
|
|
185
|
-
|
|
186
|
-
|
|
209
|
+
```ruby
|
|
210
|
+
set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url" }
|
|
211
|
+
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr" />
|
|
187
212
|
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
213
|
+
set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url",
|
|
214
|
+
"de" => "http://yoursite.de/alternate/url" }
|
|
215
|
+
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr" />
|
|
216
|
+
# <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de" />
|
|
217
|
+
```
|
|
192
218
|
|
|
193
219
|
If you need more than just multi-lingual links, you can use an alternative syntax:
|
|
194
220
|
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
221
|
+
```ruby
|
|
222
|
+
set_meta_tags alternate: [
|
|
223
|
+
{ href: 'http://example.fr/base/url', hreflang: 'fr' },
|
|
224
|
+
{ href: 'http://example.com/feed.rss', type: 'application/rss+xml', title: 'RSS' },
|
|
225
|
+
{ href: 'http://m.example.com/page-1', media: 'only screen and (max-width: 640px)'},
|
|
226
|
+
]
|
|
227
|
+
```
|
|
200
228
|
|
|
201
229
|
Further reading:
|
|
202
230
|
|
|
@@ -210,10 +238,12 @@ Previous and next links indicate indicate the relationship between individual
|
|
|
210
238
|
URLs. Using these attributes is a strong hint to Google that you want us to
|
|
211
239
|
treat these pages as a logical sequence.
|
|
212
240
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
241
|
+
```ruby
|
|
242
|
+
set_meta_tags prev: "http://yoursite.com/url?page=1"
|
|
243
|
+
# <link rel="prev" href="http://yoursite.com/url?page=1" />
|
|
244
|
+
set_meta_tags next: "http://yoursite.com/url?page=3"
|
|
245
|
+
# <link rel="next" href="http://yoursite.com/url?page=3" />
|
|
246
|
+
```
|
|
217
247
|
|
|
218
248
|
Further reading:
|
|
219
249
|
|
|
@@ -224,8 +254,10 @@ Further reading:
|
|
|
224
254
|
|
|
225
255
|
Basically, when you submit/share this to Facebook , this helps Facebook determine which image to put next to the link. If this is not present, Facebook tries to put in the first image it finds on the page, which may not be the best one to represent your site.
|
|
226
256
|
|
|
227
|
-
|
|
228
|
-
|
|
257
|
+
```ruby
|
|
258
|
+
set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
|
|
259
|
+
# <link rel="image_src" href="http://yoursite.com/icons/icon_32.png" />
|
|
260
|
+
```
|
|
229
261
|
|
|
230
262
|
### Refresh interval and redirect URL
|
|
231
263
|
|
|
@@ -236,10 +268,12 @@ refreshed, by including the alternative URL in the content parameter. By
|
|
|
236
268
|
setting the refresh time interval to zero (or a very low value), this allows
|
|
237
269
|
meta refresh to be used as a method of URL redirection.
|
|
238
270
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
271
|
+
```ruby
|
|
272
|
+
set_meta_tags refresh: 5
|
|
273
|
+
# <meta content="5" http-equiv="refresh" />
|
|
274
|
+
set_meta_tags refresh: '5;url=http://example.com'
|
|
275
|
+
# <meta content="5;url=http://example.com" http-equiv="refresh" />
|
|
276
|
+
```
|
|
243
277
|
|
|
244
278
|
Further reading:
|
|
245
279
|
|
|
@@ -251,11 +285,13 @@ Further reading:
|
|
|
251
285
|
|
|
252
286
|
Open Search link element to describe a search engine in a standard and accessible format.
|
|
253
287
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
288
|
+
```ruby
|
|
289
|
+
set_meta_tags open_search: {
|
|
290
|
+
title: "Open Search",
|
|
291
|
+
href: "/opensearch.xml"
|
|
292
|
+
}
|
|
293
|
+
# <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml" />
|
|
294
|
+
```
|
|
259
295
|
|
|
260
296
|
Further reading:
|
|
261
297
|
|
|
@@ -266,24 +302,28 @@ Further reading:
|
|
|
266
302
|
|
|
267
303
|
Any namespace can be built just passing any symbol name and a Hash. For example:
|
|
268
304
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
305
|
+
```ruby
|
|
306
|
+
set_meta_tags foo: {
|
|
307
|
+
bar: "lorem",
|
|
308
|
+
baz: {
|
|
309
|
+
qux: "ipsum"
|
|
310
|
+
}
|
|
311
|
+
}
|
|
312
|
+
# <meta property="foo:bar" content="lorem"/>
|
|
313
|
+
# <meta property="foo:baz:qux" content="ipsum"/>
|
|
314
|
+
```
|
|
277
315
|
|
|
278
316
|
### Arrays
|
|
279
317
|
|
|
280
318
|
Repeated meta tags can be built just using an Array inside a Hash. For example:
|
|
281
319
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
320
|
+
```ruby
|
|
321
|
+
set_meta_tags og: {
|
|
322
|
+
image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
|
|
323
|
+
}
|
|
324
|
+
# <meta property="og:image" content="http://example.com/rock.jpg" />
|
|
325
|
+
# <meta property="og:image" content="http://example.com/rock2.jpg" />
|
|
326
|
+
```
|
|
287
327
|
|
|
288
328
|
### Open Graph
|
|
289
329
|
|
|
@@ -292,83 +332,107 @@ protocol `<meta>` tags to your webpages. The tags allow you to specify
|
|
|
292
332
|
structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today
|
|
293
333
|
and in the future. Here's an example for a movie page:
|
|
294
334
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
335
|
+
```ruby
|
|
336
|
+
set_meta_tags og: {
|
|
337
|
+
title: 'The Rock',
|
|
338
|
+
type: 'video.movie',
|
|
339
|
+
url: 'http://www.imdb.com/title/tt0117500/',
|
|
340
|
+
image: 'http://ia.media-imdb.com/rock.jpg',
|
|
341
|
+
video: {
|
|
342
|
+
director: 'http://www.imdb.com/name/nm0000881/',
|
|
343
|
+
writer: ['http://www.imdb.com/name/nm0918711/', 'http://www.imdb.com/name/nm0177018/']
|
|
344
|
+
}
|
|
345
|
+
}
|
|
346
|
+
# <meta property="og:title" content="The Rock"/>
|
|
347
|
+
# <meta property="og:type" content="video.movie"/>
|
|
348
|
+
# <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
|
|
349
|
+
# <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
|
|
350
|
+
# <meta property="og:video:director" content="http://www.imdb.com/name/nm0000881/"/>
|
|
351
|
+
# <meta property="og:video:writer" content="http://www.imdb.com/name/nm0918711/"/>
|
|
352
|
+
# <meta property="og:video:writer" content="http://www.imdb.com/name/nm0177018/"/>
|
|
353
|
+
```
|
|
312
354
|
|
|
313
355
|
Multiple images declared as an **array** (look at the `_` character):
|
|
314
356
|
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
image
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
357
|
+
```ruby
|
|
358
|
+
set_meta_tags og: {
|
|
359
|
+
title: 'Two structured image properties',
|
|
360
|
+
type: 'website',
|
|
361
|
+
url: 'view-source:http://examples.opengraphprotocol.us/image-array.html',
|
|
362
|
+
image: [{
|
|
363
|
+
_: 'http://examples.opengraphprotocol.us/media/images/75.png',
|
|
364
|
+
width: 75,
|
|
365
|
+
height: 75,
|
|
366
|
+
},
|
|
367
|
+
{
|
|
368
|
+
_: 'http://examples.opengraphprotocol.us/media/images/50.png',
|
|
369
|
+
width: 50,
|
|
370
|
+
height: 50,
|
|
371
|
+
}]
|
|
372
|
+
}
|
|
373
|
+
# <meta property="og:title" content="Two structured image properties">
|
|
374
|
+
# <meta property="og:type" content="website">
|
|
375
|
+
# <meta property="og:url" content="http://examples.opengraphprotocol.us/image-array.html">
|
|
376
|
+
# <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/75.png">
|
|
377
|
+
# <meta property="og:image:width" content="75">
|
|
378
|
+
# <meta property="og:image:height" content="75">
|
|
379
|
+
# <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/50.png">
|
|
380
|
+
# <meta property="og:image:width" content="50">
|
|
381
|
+
# <meta property="og:image:height" content="50">
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
Article meta tags are supported too:
|
|
385
|
+
|
|
386
|
+
```ruby
|
|
387
|
+
set_meta_tags article: {
|
|
388
|
+
published_time: '2013-09-17T05:59:00+01:00',
|
|
389
|
+
modified_time: '2013-09-16T19:08:47+01:00',
|
|
390
|
+
section: 'Article Section',
|
|
391
|
+
tag: 'Article Tag',
|
|
392
|
+
}
|
|
393
|
+
# <meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
|
|
394
|
+
# <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
|
|
395
|
+
# <meta property="article:section" content="Article Section" />
|
|
396
|
+
# <meta property="article:tag" content="Article Tag" />
|
|
397
|
+
```
|
|
339
398
|
|
|
340
399
|
Further reading:
|
|
341
400
|
|
|
342
401
|
* [Open Graph protocol](http://developers.facebook.com/docs/opengraph/)
|
|
402
|
+
* [Must-Have Social Meta Tags for Twitter, Google+, Facebook and More](https://moz.com/blog/meta-data-templates-123)
|
|
343
403
|
|
|
344
404
|
### Twitter Cards
|
|
345
405
|
|
|
346
406
|
Twitter cards make it possible for you to attach media experiences to Tweets that link to your content.
|
|
347
407
|
There are 3 card types (summary, photo and player). Here's an example for summary:
|
|
348
408
|
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
409
|
+
```ruby
|
|
410
|
+
set_meta_tags twitter: {
|
|
411
|
+
card: "summary",
|
|
412
|
+
site: "@username"
|
|
413
|
+
}
|
|
414
|
+
# <meta name="twitter:card" content="summary"/>
|
|
415
|
+
# <meta name="twitter:site" content="@username"/>
|
|
416
|
+
```
|
|
355
417
|
|
|
356
418
|
Take in consideration that if you're already using OpenGraph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience.
|
|
357
419
|
|
|
358
420
|
When you need to generate a [Twitter Photo card](https://dev.twitter.com/docs/cards/types/photo-card), `twitter:image` property is a string, while image dimensions are specified using `twitter:image:width` and `twitter:image:height`, or a `Hash` objects in terms of MetaTags gems. There is a special syntax to make this work:
|
|
359
421
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
422
|
+
```ruby
|
|
423
|
+
set_meta_tags twitter: {
|
|
424
|
+
card: "photo",
|
|
425
|
+
image: {
|
|
426
|
+
_: "http://example.com/1.png",
|
|
427
|
+
width: 100,
|
|
428
|
+
height: 100,
|
|
429
|
+
}
|
|
430
|
+
}
|
|
431
|
+
# <meta name="twitter:card" content="photo"/>
|
|
432
|
+
# <meta name="twitter:image" content="http://example.com/1.png"/>
|
|
433
|
+
# <meta name="twitter:image:width" content="100"/>
|
|
434
|
+
# <meta name="twitter:image:height" content="100"/>
|
|
435
|
+
```
|
|
372
436
|
|
|
373
437
|
Further reading:
|
|
374
438
|
|
|
@@ -378,16 +442,18 @@ Further reading:
|
|
|
378
442
|
|
|
379
443
|
App Links is an open cross platform solution for deep linking to content in your mobile app. Here's an example for iOS app integration:
|
|
380
444
|
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
445
|
+
```ruby
|
|
446
|
+
set_meta_tags al: {
|
|
447
|
+
ios: {
|
|
448
|
+
url: "example://applinks",
|
|
449
|
+
app_store_id: 12345,
|
|
450
|
+
app_name: "Example App"
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
# <meta property="al:ios:url" content="example://applinks" />
|
|
454
|
+
# <meta property="al:ios:app_store_id" content="12345" />
|
|
455
|
+
# <meta property="al:ios:app_name" content="Example App" />
|
|
456
|
+
```
|
|
391
457
|
|
|
392
458
|
Further reading:
|
|
393
459
|
|
|
@@ -400,36 +466,46 @@ be rendered on the page, even if meta-tags gem does not know about them.
|
|
|
400
466
|
|
|
401
467
|
Example:
|
|
402
468
|
|
|
403
|
-
|
|
404
|
-
|
|
469
|
+
```ruby
|
|
470
|
+
set_meta_tags author: "Dmytro Shteflyuk"
|
|
471
|
+
# <meta name="author" content="Dmytro Shteflyuk"/>
|
|
472
|
+
```
|
|
405
473
|
|
|
406
474
|
You can also specify value as an Array, and values will be displayed as a list
|
|
407
475
|
of `meta` tags:
|
|
408
476
|
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
477
|
+
```ruby
|
|
478
|
+
set_meta_tags author: [ "Dmytro Shteflyuk", "John Doe" ]
|
|
479
|
+
# <meta name="author" content="Dmytro Shteflyuk"/>
|
|
480
|
+
# <meta name="author" content="John Doe"/>
|
|
481
|
+
```
|
|
412
482
|
|
|
413
483
|
## MetaTags Usage
|
|
414
484
|
|
|
415
485
|
First, add this code to your main layout:
|
|
416
486
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
487
|
+
```erb
|
|
488
|
+
<head>
|
|
489
|
+
<%= display_meta_tags site: 'My website' %>
|
|
490
|
+
</head>
|
|
491
|
+
```
|
|
420
492
|
|
|
421
493
|
Then, to set the page title, add this to each of your views (see below for other options):
|
|
422
494
|
|
|
423
|
-
|
|
495
|
+
```erb
|
|
496
|
+
<h1><%= title 'My page title' %></h1>
|
|
497
|
+
```
|
|
424
498
|
|
|
425
499
|
When views are rendered, the page title will be included in the right spots:
|
|
426
500
|
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
501
|
+
```html
|
|
502
|
+
<head>
|
|
503
|
+
<title>My website | My page title</title>
|
|
504
|
+
</head>
|
|
505
|
+
<body>
|
|
506
|
+
<h1>My page title</h1>
|
|
507
|
+
</body>
|
|
508
|
+
```
|
|
433
509
|
|
|
434
510
|
You can find allowed options for `display_meta_tags` method below.
|
|
435
511
|
|
|
@@ -437,15 +513,19 @@ You can find allowed options for `display_meta_tags` method below.
|
|
|
437
513
|
|
|
438
514
|
You can define following instance variables:
|
|
439
515
|
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
516
|
+
```ruby
|
|
517
|
+
@page_title = 'Member Login'
|
|
518
|
+
@page_description = 'Member login page.'
|
|
519
|
+
@page_keywords = 'Site, Login, Members'
|
|
520
|
+
```
|
|
443
521
|
|
|
444
522
|
Also you could use `set_meta_tags` method to define all meta tags simultaneously:
|
|
445
523
|
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
524
|
+
```ruby
|
|
525
|
+
set_meta_tags title: 'Member Login',
|
|
526
|
+
description: 'Member login page.',
|
|
527
|
+
keywords: 'Site, Login, Members'
|
|
528
|
+
```
|
|
449
529
|
|
|
450
530
|
You can find allowed options for `set_meta_tags` method below.
|
|
451
531
|
|
|
@@ -453,27 +533,35 @@ You can find allowed options for `set_meta_tags` method below.
|
|
|
453
533
|
|
|
454
534
|
To set meta tags you can use following methods:
|
|
455
535
|
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
536
|
+
```erb
|
|
537
|
+
<% title 'Member Login' %>
|
|
538
|
+
<% description 'Member login page.' %>
|
|
539
|
+
<% keywords 'Member login page.' %>
|
|
540
|
+
<% nofollow %>
|
|
541
|
+
<% noindex %>
|
|
542
|
+
<% refresh 3 %>
|
|
543
|
+
```
|
|
462
544
|
|
|
463
545
|
Also there is `set_meta_tags` method exists:
|
|
464
546
|
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
547
|
+
```erb
|
|
548
|
+
<% set_meta_tags title: 'Member Login',
|
|
549
|
+
description: 'Member login page.',
|
|
550
|
+
keywords: 'Site, Login, Members' %>
|
|
551
|
+
```
|
|
468
552
|
|
|
469
553
|
The `title` method returns title itself, so you can use it to show the title
|
|
470
554
|
somewhere on the page:
|
|
471
555
|
|
|
472
|
-
|
|
556
|
+
```erb
|
|
557
|
+
<h1><%= title 'Member Login' %></h1>
|
|
558
|
+
```
|
|
473
559
|
|
|
474
560
|
If you want to set the title and display another text, use this:
|
|
475
561
|
|
|
476
|
-
|
|
562
|
+
```erb
|
|
563
|
+
<h1><%= title 'Member Login', 'Here you can login to the site:' %></h1>
|
|
564
|
+
```
|
|
477
565
|
|
|
478
566
|
### Allowed options for `display_meta_tags` and `set_meta_tags` methods
|
|
479
567
|
|
|
@@ -504,26 +592,32 @@ Use these options to customize the title format:
|
|
|
504
592
|
|
|
505
593
|
And here are a few examples to give you ideas.
|
|
506
594
|
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
595
|
+
```erb
|
|
596
|
+
<%= display_meta_tags separator: "—".html_safe %>
|
|
597
|
+
<%= display_meta_tags prefix: false, separator: ":" %>
|
|
598
|
+
<%= display_meta_tags lowercase: true %>
|
|
599
|
+
<%= display_meta_tags reverse: true, prefix: false %>
|
|
600
|
+
<%= display_meta_tags og: { title: 'The Rock', type: 'video.movie' } %>
|
|
601
|
+
<%= display_meta_tags alternate: { 'zh-Hant' => 'http://example.com.tw/base/url' } %>
|
|
602
|
+
```
|
|
513
603
|
|
|
514
604
|
### Allowed values
|
|
515
605
|
|
|
516
606
|
You can specify `:title` as a string or array:
|
|
517
607
|
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
608
|
+
```ruby
|
|
609
|
+
set_meta_tags title: ['part1', 'part2'], site: 'site'
|
|
610
|
+
# site | part1 | part2
|
|
611
|
+
set_meta_tags title: ['part1', 'part2'], reverse: true, site: 'site'
|
|
612
|
+
# part2 | part1 | site
|
|
613
|
+
```
|
|
522
614
|
|
|
523
615
|
Keywords can be passed as string of comma-separated values, or as an array:
|
|
524
616
|
|
|
525
|
-
|
|
526
|
-
|
|
617
|
+
```ruby
|
|
618
|
+
set_meta_tags keywords: ['tag1', 'tag2']
|
|
619
|
+
# tag1, tag2
|
|
620
|
+
```
|
|
527
621
|
|
|
528
622
|
Description is a string (HTML will be stripped from output string).
|
|
529
623
|
|
|
@@ -535,18 +629,24 @@ the `title`.
|
|
|
535
629
|
|
|
536
630
|
Say, you have the following in your application layout:
|
|
537
631
|
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
632
|
+
```ruby
|
|
633
|
+
display_meta_tags og: {
|
|
634
|
+
title: :title
|
|
635
|
+
}
|
|
636
|
+
```
|
|
541
637
|
|
|
542
638
|
The value of `og[:title]` is a symbol and therefore references the value of the
|
|
543
639
|
top level `title` meta tag. With the following in any view:
|
|
544
640
|
|
|
545
|
-
|
|
641
|
+
```ruby
|
|
642
|
+
title 'my great view'
|
|
643
|
+
```
|
|
546
644
|
|
|
547
645
|
You get this open graph meta tag for free:
|
|
548
646
|
|
|
549
|
-
|
|
647
|
+
```html
|
|
648
|
+
<meta property="og:title" content="my great view"></meta>
|
|
649
|
+
```
|
|
550
650
|
|
|
551
651
|
### Using with pjax
|
|
552
652
|
|
|
@@ -560,27 +660,33 @@ page title (include site, prefix/suffix, etc.) But in this case you will have to
|
|
|
560
660
|
set default parameters (e.g, `:site`) both in layout file and in your views. To minimize
|
|
561
661
|
code duplication, you can define a helper in `application_helper.rb`:
|
|
562
662
|
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
663
|
+
```ruby
|
|
664
|
+
def default_meta_tags
|
|
665
|
+
{
|
|
666
|
+
title: 'Member Login',
|
|
667
|
+
description: 'Member login page.',
|
|
668
|
+
keywords: 'Site, Login, Members',
|
|
669
|
+
separator: "—".html_safe,
|
|
670
|
+
}
|
|
671
|
+
end
|
|
672
|
+
```
|
|
571
673
|
|
|
572
674
|
Then in your layout file use:
|
|
573
675
|
|
|
574
|
-
|
|
676
|
+
```erb
|
|
677
|
+
<%= display_meta_tags(default_meta_tags) %>
|
|
678
|
+
```
|
|
575
679
|
|
|
576
680
|
And in your pjax templates:
|
|
577
681
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
682
|
+
```erb
|
|
683
|
+
<!-- set title here, so we can use it both in "display_title" and in "title" -->
|
|
684
|
+
<% title "My Page title" %>
|
|
685
|
+
<%= content_tag :div, data: { title: display_title(default_meta_tags) } do %>
|
|
686
|
+
<h1><%= title %></h1>
|
|
687
|
+
<!-- HTML goes here -->
|
|
688
|
+
<% end %>
|
|
689
|
+
```
|
|
584
690
|
|
|
585
691
|
## Author
|
|
586
692
|
|