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.
Files changed (37) hide show
  1. checksums.yaml +4 -4
  2. checksums.yaml.gz.sig +0 -0
  3. data.tar.gz.sig +0 -0
  4. data/.gitignore +2 -0
  5. data/.travis.yml +3 -3
  6. data/CHANGELOG.md +10 -0
  7. data/Gemfile +0 -1
  8. data/MIT-LICENSE +2 -2
  9. data/README.md +324 -218
  10. data/Rakefile +0 -20
  11. data/bin/console +14 -0
  12. data/bin/setup +8 -0
  13. data/lib/meta_tags/renderer.rb +1 -0
  14. data/lib/meta_tags/version.rb +1 -1
  15. data/meta-tags.gemspec +24 -26
  16. metadata +24 -67
  17. metadata.gz.sig +2 -4
  18. data/.ruby-gemset +0 -1
  19. data/spec/configuration_spec.rb +0 -14
  20. data/spec/controller_helper_spec.rb +0 -45
  21. data/spec/spec_helper.rb +0 -84
  22. data/spec/text_normalizer/normalize_title_spec.rb +0 -48
  23. data/spec/text_normalizer/truncate_array_spec.rb +0 -60
  24. data/spec/view_helper/charset_spec.rb +0 -16
  25. data/spec/view_helper/custom_spec.rb +0 -67
  26. data/spec/view_helper/description_spec.rb +0 -61
  27. data/spec/view_helper/icon_spec.rb +0 -42
  28. data/spec/view_helper/keywords_spec.rb +0 -58
  29. data/spec/view_helper/links_spec.rb +0 -146
  30. data/spec/view_helper/module_spec.rb +0 -41
  31. data/spec/view_helper/noindex_spec.rb +0 -107
  32. data/spec/view_helper/open_graph_spec.rb +0 -86
  33. data/spec/view_helper/open_search_spec.rb +0 -33
  34. data/spec/view_helper/refresh_spec.rb +0 -32
  35. data/spec/view_helper/title_spec.rb +0 -183
  36. data/spec/view_helper/twitter_spec.rb +0 -31
  37. data/spec/view_helper_spec.rb +0 -83
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: a2237d93baeb49dacab9028fc358013bea67697c
4
- data.tar.gz: dddec0aef4a0a7300ae17ae139f77eeab276ff9c
3
+ metadata.gz: 2c0faa1dc2d5ab1ffe4f6f6e3a63e57f5f1fbe60
4
+ data.tar.gz: d19eece643bc09cb81f5a316f513d7882c35913e
5
5
  SHA512:
6
- metadata.gz: f1dc232230e0e03de0c6b8a6b23b3efd637fdba437c4a7e7e155c18e4bab170c23e62e9fc09ebf7c7668f86b695e6d80443dc715cac0bb365e22aecca33ab01b
7
- data.tar.gz: c4feddb58e7f4ebd2d1e338340f3feb59686681dd84483881eeb498d198ae64c23c06ded10020ef606d88d1d0ce7cd968001036c88e42d8ecc7963f70a2d9329
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
@@ -2,6 +2,8 @@
2
2
  .DS_Store
3
3
  .bundle
4
4
  Gemfile.lock
5
+ .ruby-gemset
5
6
  coverage
6
7
  doc
7
8
  pkg
9
+ *.gem
data/.travis.yml CHANGED
@@ -3,8 +3,8 @@ cache: bundler
3
3
 
4
4
  rvm:
5
5
  - 2.0.0
6
- - 2.1.7
7
- - 2.2.4
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.7
21
+ - rvm: 2.1.10
22
22
  env: "RAILS_VERSION=5.0.0"
23
23
 
24
24
  notifications:
data/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 2.3.1 (September 13, 2016)
2
+
3
+ Changes:
4
+ - Added follow meta tag support
5
+
6
+ Features:
7
+ - Added support for article meta tags
8
+
9
+ Bugfixes:
10
+
1
11
  ## 2.2.0 (August 24, 2016)
2
12
 
3
13
  Changes:
data/Gemfile CHANGED
@@ -9,5 +9,4 @@ end
9
9
 
10
10
  group :test do
11
11
  gem 'codeclimate-test-reporter', require: false
12
- gem 'rspec-html-matchers'
13
12
  end
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
  [![Travis-CI build status](https://secure.travis-ci.org/kpumuk/meta-tags.svg)](http://travis-ci.org/kpumuk/meta-tags)
4
- [![Gem Version](https://badge.fury.io/rb/meta-tags.svg)](http://badge.fury.io/rb/meta-tags)
5
- [![Code Climate](https://codeclimate.com/github/kpumuk/meta-tags.png)](https://codeclimate.com/github/kpumuk/meta-tags)
6
- [![Coverage](https://codeclimate.com/github/kpumuk/meta-tags/coverage.png)](https://codeclimate.com/github/kpumuk/meta-tags)
4
+ [![Gem Version](https://badge.fury.io/rb/meta-tags.svg)](https://badge.fury.io/rb/meta-tags)
5
+ [![Code Climate](https://codeclimate.com/github/kpumuk/meta-tags/badges/gpa.svg)](https://codeclimate.com/github/kpumuk/meta-tags)
6
+ [![Test Coverage](https://codeclimate.com/github/kpumuk/meta-tags/badges/coverage.svg)](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
- gem 'meta-tags'
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
- MetaTags.configure do |c|
33
- c.title_limit = 70
34
- c.description_limit = 160
35
- c.keywords_limit = 255
36
- c.keywords_separator = ', '
37
- end
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
- set_meta_tags title: 'Member Login'
48
- # <title>Some Page Title</title>
49
- set_meta_tags site: 'Site Title', title: 'Member Login'
50
- # <title>Site Title | Page Title</title>
51
- set_meta_tags site: 'Site Title', title: 'Member Login', reverse: true
52
- # <title>Page Title | Site Title</title>
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
- set_meta_tags description: "All text about keywords, other keywords"
64
- # <meta name="description" content="All text about keywords, other keywords" />
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
- set_meta_tags keywords: %w[keyword1 Keyword2 KeyWord3]
75
- # <meta name="keywords" content="keyword1, keyword2, keyword3" />
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
- set_meta_tags noindex: true
85
- # <meta name="robots" content="noindex" />
86
- set_meta_tags noindex: 'googlebot'
87
- # <meta name="googlebot" content="noindex" />
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
- set_meta_tags nofollow: true
104
- # <meta name="robots" content="nofollow" />
105
- set_meta_tags nofollow: 'googlebot'
106
- # <meta name="googlebot" content="nofollow" />
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
- set_meta_tags noindex: true, follow: true
118
- # <meta name="robots" content="noindex, follow" />
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
- set_meta_tags canonical: "http://yoursite.com/canonical/url"
130
- # <link rel="canonical" href="http://yoursite.com/canonical/url" />
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
- set_meta_tags icon: '/favicon.ico'
144
- # <link rel="icon" href="/favicon.ico" type="image/x-icon" />
145
- set_meta_tags icon: '/favicon.png', type: 'image/png'
146
- # <link rel="icon" href="/favicon.png" type="image/png" />
147
- set_meta_tags icon: [
148
- { href: '/images/icons/icon_96.png', sizes: '32x32 96x96', type: 'image/png' },
149
- { href: '/images/icons/icon_itouch_precomp_32.png', rel: 'apple-touch-icon-precomposed', sizes: '32x32', type: 'image/png' },
150
- ]
151
- # <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96" />
152
- # <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32" />
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
- set_meta_tags author: "http://yourgplusprofile.com/profile/url"
164
- # <link rel="author" href="http://yourgplusprofile.com/profile/url" />
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
- set_meta_tags publisher: "http://yourgplusprofile.com/profile/url"
175
- # <link rel="publisher" href="http://yourgplusprofile.com/profile/url" />
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
- set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url" }
186
- # <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr" />
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
- set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url",
189
- "de" => "http://yoursite.de/alternate/url" }
190
- # <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr" />
191
- # <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de" />
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
- set_meta_tags alternate: [
196
- { href: 'http://example.fr/base/url', hreflang: 'fr' },
197
- { href: 'http://example.com/feed.rss', type: 'application/rss+xml', title: 'RSS' },
198
- { href: 'http://m.example.com/page-1', media: 'only screen and (max-width: 640px)'},
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
- set_meta_tags prev: "http://yoursite.com/url?page=1"
214
- # <link rel="prev" href="http://yoursite.com/url?page=1" />
215
- set_meta_tags next: "http://yoursite.com/url?page=3"
216
- # <link rel="next" href="http://yoursite.com/url?page=3" />
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
- set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
228
- # <link rel="image_src" href="http://yoursite.com/icons/icon_32.png" />
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
- set_meta_tags refresh: 5
240
- # <meta content="5" http-equiv="refresh" />
241
- set_meta_tags refresh: '5;url=http://example.com'
242
- # <meta content="5;url=http://example.com" http-equiv="refresh" />
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
- set_meta_tags open_search: {
255
- title: "Open Search",
256
- href: "/opensearch.xml"
257
- }
258
- # <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml" />
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
- set_meta_tags foo: {
270
- bar: "lorem",
271
- baz: {
272
- qux: "ipsum"
273
- }
274
- }
275
- # <meta property="foo:bar" content="lorem"/>
276
- # <meta property="foo:baz:qux" content="ipsum"/>
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
- set_meta_tags og: {
283
- image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
284
- }
285
- #<meta property="og:image" content="http://example.com/rock.jpg" />
286
- #<meta property="og:image" content="http://example.com/rock2.jpg" />
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
- set_meta_tags og: {
296
- title: 'The Rock',
297
- type: 'video.movie',
298
- url: 'http://www.imdb.com/title/tt0117500/',
299
- image: 'http://ia.media-imdb.com/rock.jpg',
300
- video: {
301
- director: 'http://www.imdb.com/name/nm0000881/',
302
- writer: ['http://www.imdb.com/name/nm0918711/', 'http://www.imdb.com/name/nm0177018/']
303
- }
304
- }
305
- # <meta property="og:title" content="The Rock"/>
306
- # <meta property="og:type" content="video.movie"/>
307
- # <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
308
- # <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
309
- # <meta property="og:video:director" content="http://www.imdb.com/name/nm0000881/"/>
310
- # <meta property="og:video:writer" content="http://www.imdb.com/name/nm0918711/"/>
311
- # <meta property="og:video:writer" content="http://www.imdb.com/name/nm0177018/"/>
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
- set_meta_tags og: {
316
- title: 'Two structured image properties',
317
- type: 'website',
318
- url: 'view-source:http://examples.opengraphprotocol.us/image-array.html',
319
- image: [{
320
- _: 'http://examples.opengraphprotocol.us/media/images/75.png',
321
- width: 75,
322
- height: 75,
323
- },
324
- {
325
- _: 'http://examples.opengraphprotocol.us/media/images/50.png',
326
- width: 50,
327
- height: 50,
328
- }]
329
- }
330
- # <meta property="og:title" content="Two structured image properties">
331
- # <meta property="og:type" content="website">
332
- # <meta property="og:url" content="http://examples.opengraphprotocol.us/image-array.html">
333
- # <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/75.png">
334
- # <meta property="og:image:width" content="75">
335
- # <meta property="og:image:height" content="75">
336
- # <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/50.png">
337
- # <meta property="og:image:width" content="50">
338
- # <meta property="og:image:height" content="50">
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
- set_meta_tags twitter: {
350
- card: "summary",
351
- site: "@username"
352
- }
353
- # <meta name="twitter:card" content="summary"/>
354
- # <meta name="twitter:site" content="@username"/>
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
- set_meta_tags twitter: {
361
- card: "photo",
362
- image: {
363
- _: "http://example.com/1.png",
364
- width: 100,
365
- height: 100,
366
- }
367
- }
368
- # <meta name="twitter:card" content="photo"/>
369
- # <meta name="twitter:image" content="http://example.com/1.png"/>
370
- # <meta name="twitter:image:width" content="100"/>
371
- # <meta name="twitter:image:height" content="100"/>
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
- set_meta_tags al: {
382
- ios: {
383
- url: "example://applinks",
384
- app_store_id: 12345,
385
- app_name: "Example App"
386
- }
387
- }
388
- # <meta property="al:ios:url" content="example://applinks" />
389
- # <meta property="al:ios:app_store_id" content="12345" />
390
- # <meta property="al:ios:app_name" content="Example App" />
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
- set_meta_tags author: "Dmytro Shteflyuk"
404
- # <meta name="author" content="Dmytro Shteflyuk"/>
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
- set_meta_tags author: [ "Dmytro Shteflyuk", "John Doe" ]
410
- # <meta name="author" content="Dmytro Shteflyuk"/>
411
- # <meta name="author" content="John Doe"/>
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
- <head>
418
- <%= display_meta_tags site: 'My website' %>
419
- </head>
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
- <h1><%= title 'My page title' %></h1>
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
- <head>
428
- <title>My website | My page title</title>
429
- </head>
430
- <body>
431
- <h1>My page title</h1>
432
- </body>
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
- @page_title = 'Member Login'
441
- @page_description = 'Member login page.'
442
- @page_keywords = 'Site, Login, Members'
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
- set_meta_tags title: 'Member Login',
447
- description: 'Member login page.',
448
- keywords: 'Site, Login, Members'
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
- <% title 'Member Login' %>
457
- <% description 'Member login page.' %>
458
- <% keywords 'Member login page.' %>
459
- <% nofollow %>
460
- <% noindex %>
461
- <% refresh 3 %>
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
- <% set_meta_tags title: 'Member Login',
466
- description: 'Member login page.',
467
- keywords: 'Site, Login, Members' %>
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
- <h1><%= title 'Member Login' %></h1>
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
- <h1><%= title 'Member Login', 'Here you can login to the site:' %></h1>
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
- <%= display_meta_tags separator: "&mdash;".html_safe %>
508
- <%= display_meta_tags prefix: false, separator: ":" %>
509
- <%= display_meta_tags lowercase: true %>
510
- <%= display_meta_tags reverse: true, prefix: false %>
511
- <%= display_meta_tags og: { title: 'The Rock', type: 'video.movie' } %>
512
- <%= display_meta_tags alternate: { 'zh-Hant' => 'http://example.com.tw/base/url' } %>
595
+ ```erb
596
+ <%= display_meta_tags separator: "&mdash;".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
- set_meta_tags title: ['part1', 'part2'], site: 'site'
519
- # site | part1 | part2
520
- set_meta_tags title: ['part1', 'part2'], reverse: true, site: 'site'
521
- # part2 | part1 | site
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
- set_meta_tags keywords: ['tag1', 'tag2']
526
- # tag1, tag2
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
- display_meta_tags og: {
539
- title: :title
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
- title 'my great view'
641
+ ```ruby
642
+ title 'my great view'
643
+ ```
546
644
 
547
645
  You get this open graph meta tag for free:
548
646
 
549
- <meta property="og:title" content="my great view"></meta>
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
- def default_meta_tags
564
- {
565
- title: 'Member Login',
566
- description: 'Member login page.',
567
- keywords: 'Site, Login, Members',
568
- separator: "&mdash;".html_safe,
569
- }
570
- end
663
+ ```ruby
664
+ def default_meta_tags
665
+ {
666
+ title: 'Member Login',
667
+ description: 'Member login page.',
668
+ keywords: 'Site, Login, Members',
669
+ separator: "&mdash;".html_safe,
670
+ }
671
+ end
672
+ ```
571
673
 
572
674
  Then in your layout file use:
573
675
 
574
- <%= display_meta_tags(default_meta_tags) %>
676
+ ```erb
677
+ <%= display_meta_tags(default_meta_tags) %>
678
+ ```
575
679
 
576
680
  And in your pjax templates:
577
681
 
578
- <!-- set title here, so we can use it both in "display_title" and in "title" %>
579
- <% title "My Page title" %>
580
- <%= content_tag :div, data: { title: display_title(default_meta_tags) } do %>
581
- <h1><%= title %></h1>
582
- <!-- HTML goes here -->
583
- <% end %>
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