meta_tags-rails 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (42) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +7 -0
  3. data/.rspec +3 -0
  4. data/.ruby-gemset +1 -0
  5. data/.ruby-version +1 -0
  6. data/.travis.yml +21 -0
  7. data/CHANGELOG.md +135 -0
  8. data/Gemfile +13 -0
  9. data/MIT-LICENSE +22 -0
  10. data/README.md +627 -0
  11. data/Rakefile +28 -0
  12. data/lib/meta_tags-rails.rb +37 -0
  13. data/lib/meta_tags-rails/configuration.rb +21 -0
  14. data/lib/meta_tags-rails/content_tag.rb +14 -0
  15. data/lib/meta_tags-rails/controller_helper.rb +44 -0
  16. data/lib/meta_tags-rails/meta_tags_collection.rb +176 -0
  17. data/lib/meta_tags-rails/renderer.rb +253 -0
  18. data/lib/meta_tags-rails/tag.rb +25 -0
  19. data/lib/meta_tags-rails/text_normalizer.rb +148 -0
  20. data/lib/meta_tags-rails/version.rb +4 -0
  21. data/lib/meta_tags-rails/view_helper.rb +205 -0
  22. data/meta-tags.gemspec +30 -0
  23. data/spec/configuration_spec.rb +14 -0
  24. data/spec/controller_helper_spec.rb +42 -0
  25. data/spec/spec_helper.rb +84 -0
  26. data/spec/text_normalizer/normalize_title_spec.rb +43 -0
  27. data/spec/text_normalizer/truncate_array_spec.rb +60 -0
  28. data/spec/view_helper/charset_spec.rb +16 -0
  29. data/spec/view_helper/custom_spec.rb +67 -0
  30. data/spec/view_helper/description_spec.rb +61 -0
  31. data/spec/view_helper/icon_spec.rb +42 -0
  32. data/spec/view_helper/keywords_spec.rb +58 -0
  33. data/spec/view_helper/links_spec.rb +125 -0
  34. data/spec/view_helper/module_spec.rb +41 -0
  35. data/spec/view_helper/noindex_spec.rb +107 -0
  36. data/spec/view_helper/open_graph_spec.rb +86 -0
  37. data/spec/view_helper/open_search_spec.rb +33 -0
  38. data/spec/view_helper/refresh_spec.rb +32 -0
  39. data/spec/view_helper/title_spec.rb +155 -0
  40. data/spec/view_helper/twitter_spec.rb +31 -0
  41. data/spec/view_helper_spec.rb +57 -0
  42. metadata +172 -0
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 08c61215c330314bcbee5e80a86098d964f102d6
4
+ data.tar.gz: c64995388c5381275aef544dba93aab23249966f
5
+ SHA512:
6
+ metadata.gz: e74bc2a195aa7ebd1c4954452411c0386ca537c3a0307f603f1f568f585deb1ee5b2f25f468eb30f34adfc0f8089e687d474d5eb3a767bd9055abfb47f326819
7
+ data.tar.gz: 5f90b7bb8abb85f3761441c7ba9f3a4e467d3bec8683fb496e52245cfefac602773e050165be7235b9c57074f920962587c15f19beec60cbc9df514094e29930
data/.gitignore ADDED
@@ -0,0 +1,7 @@
1
+ .yardoc
2
+ .DS_Store
3
+ .bundle
4
+ Gemfile.lock
5
+ coverage
6
+ doc
7
+ pkg
data/.rspec ADDED
@@ -0,0 +1,3 @@
1
+ --color
2
+ --warnings
3
+ --require spec_helper
data/.ruby-gemset ADDED
@@ -0,0 +1 @@
1
+ meta-tags
data/.ruby-version ADDED
@@ -0,0 +1 @@
1
+ 2.2.2
data/.travis.yml ADDED
@@ -0,0 +1,21 @@
1
+ rvm:
2
+ - 2.0.0
3
+ - 2.1.7
4
+ - 2.2.3
5
+
6
+ env:
7
+ - "RAILS_VERSION=3.1.0"
8
+ - "RAILS_VERSION=3.2.0"
9
+ - "RAILS_VERSION=4.0.0"
10
+ - "RAILS_VERSION=4.1.0"
11
+ - "RAILS_VERSION=4.2.0"
12
+
13
+ matrix:
14
+
15
+ notifications:
16
+ recipients:
17
+ - kpumuk@kpumuk.info
18
+
19
+ addons:
20
+ code_climate:
21
+ repo_token: "8792cbc0d1780830ddd3dd7eb1c25f09f386ba8f04449ad830039469406a6ab3"
data/CHANGELOG.md ADDED
@@ -0,0 +1,135 @@
1
+ ## 2.1.0 (October 6, 2015)
2
+
3
+ Changes:
4
+
5
+ - Ruby < 2.0 is not longer supported
6
+
7
+ Features:
8
+
9
+ - Added charset meta tag
10
+ - Added ability to configure limits for title, description, keywords
11
+ - Added OpenSearch links support
12
+ - Added icon links support
13
+ - Alternate links can now be generated for RSS or mobile versions
14
+
15
+ Bugfixes
16
+ - Generate `<meta name=""/>` instead of `<meta property=""/>` for custom meta tags
17
+ - Double HTML escaping in meta tags
18
+
19
+ ## 2.0.0 (April 15, 2014)
20
+
21
+ Features:
22
+
23
+ - Fully refactored code base.
24
+
25
+ Bugfixes:
26
+
27
+ - Symlink references in nested hashes include use normalized meta tag values.
28
+
29
+ ## 1.6.0 (April 14, 2014)
30
+
31
+ Features:
32
+
33
+ - Added "alternate" links support
34
+ - Added Google "author" and "publisher" links
35
+ - Implemented mirrored values inside namespaces declared as hashes
36
+
37
+ Breaking changes:
38
+
39
+ - Removed support of Rails older than 3.0.0 due to the bug in `Hash#deep_merge` (does not support `HashWithIndifferentAccess`)
40
+
41
+ ## 1.5.0 (May 7, 2013)
42
+
43
+ Features:
44
+
45
+ - Added "prev" and "next" links support
46
+ - Added refresh meta tag support
47
+
48
+ ## 1.4.1 (March 14, 2013)
49
+
50
+ Bugfixes:
51
+
52
+ - Added support for Hash inside of an Array
53
+
54
+ ## 1.4.0 (March 14, 2013)
55
+
56
+ Features:
57
+
58
+ - Added support of custom meta tags
59
+
60
+ ## 1.3.0 (February 13, 2013)
61
+
62
+ Features:
63
+
64
+ - Added Hash and Array as possible contents for the meta tags. Check README for details
65
+ - Added support of string meta tag names
66
+ - Allow to disable noindex and nofollow using `false` as a value
67
+
68
+ Bugfixes:
69
+
70
+ - Do not display title HTML tag when title is blank
71
+ - Do not display OpenGraph tags when content is empty
72
+
73
+ ## 1.2.6 (March 4, 2012)
74
+
75
+ Features:
76
+
77
+ - jQuery.pjax support via `display_title` method. Check README for details
78
+
79
+ ## 1.2.5 (March 3, 2012)
80
+
81
+ Bugfixes:
82
+
83
+ - Fixed bug with overriding open graph attributes
84
+ - Fixed incorrect page title when `:site` is is blank
85
+ - Normalize `:og` attribute to `:open_graph`
86
+
87
+ ## 1.2.4 (April 26, 2011)
88
+
89
+ Features:
90
+
91
+ - Added support for Open Graph meta tags
92
+
93
+ Bugfixes:
94
+
95
+ - Fixed bug with double HTML escaping in title separator
96
+ - Allow to set meta title without a separator
97
+
98
+ ## 1.2.2, 1.2.3 (June 10, 2010)
99
+
100
+ Bugfixes:
101
+
102
+ - Fixed action\_pack integration (welcome back `alias_method_chain`)
103
+ - Fixed bug when `@page_*` variables did not work
104
+
105
+ ## 1.2.1 (June 2, 2010)
106
+
107
+ Bugfixes:
108
+
109
+ - Fixed deprecation warning about `html_safe!`
110
+
111
+ ## 1.2.0 (May 31, 2010)
112
+
113
+ Bugfixes:
114
+
115
+ - Fixed bug when title is set through Array, and `:lowercase` is true
116
+ - Updated `display_meta_tags` to be compatible with rails_xss
117
+
118
+ ## 1.1.1 (November 21, 2009)
119
+
120
+ Features:
121
+
122
+ - Added support for canonical link element
123
+ - Added YARD documentation
124
+
125
+ ## 1.1.0 (November 5, 2009)
126
+
127
+ Features:
128
+
129
+ - Added ability to specify title as an Array of parts
130
+ - Added helper for `noindex`
131
+ - Added `nofollow` meta tag support
132
+
133
+ Bugfixes:
134
+
135
+ - Fixed Rails 2.3 deprecation warnings
data/Gemfile ADDED
@@ -0,0 +1,13 @@
1
+ source 'http://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in meta-tags.gemspec
4
+ gemspec
5
+
6
+ if ENV['RAILS_VERSION']
7
+ gem 'actionpack', "~> #{ENV['RAILS_VERSION']}"
8
+ end
9
+
10
+ group :test do
11
+ gem 'codeclimate-test-reporter', require: false
12
+ gem 'rspec-html-matchers'
13
+ end
data/MIT-LICENSE ADDED
@@ -0,0 +1,22 @@
1
+ Copyright (c) 2011 Dmytro Shteflyuk
2
+
3
+ MIT License
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining
6
+ a copy of this software and associated documentation files (the
7
+ "Software"), to deal in the Software without restriction, including
8
+ without limitation the rights to use, copy, modify, merge, publish,
9
+ distribute, sublicense, and/or sell copies of the Software, and to
10
+ permit persons to whom the Software is furnished to do so, subject to
11
+ the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be
14
+ included in all copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17
+ EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18
+ MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19
+ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
20
+ LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
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.
data/README.md ADDED
@@ -0,0 +1,627 @@
1
+ # MetaTags: a gem to make your Rails application SEO-friendly
2
+
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)
7
+
8
+ Search Engine Optimization (SEO) plugin for Ruby on Rails applications.
9
+
10
+ ## Ruby on Rails
11
+
12
+ MetaTags master branch now fully supports Rails 3.0+ and is not backward
13
+ compatible. Latest version fully compatible with 2.x is 1.2.3.
14
+
15
+ Ruby versions older than 2.0.0 are no longer officially supported.
16
+
17
+ ## Installation
18
+
19
+ Add the "meta-tags" gem to your `Gemfile`.
20
+
21
+ ```ruby
22
+ gem 'meta_tags-rails'
23
+ ```
24
+
25
+ And run `bundle install` command.
26
+
27
+ ## Configuration
28
+
29
+ MetaTags follows best-practices for meta tags. Although default limits for
30
+ truncation have recommended values, you can change them to reflect your own
31
+ preferences. In order to do that, you can create an initializer
32
+ `config/initializers/meta_tags.rb`, with following code:
33
+
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
+ ```
42
+ ## SEO Basics and MetaTags
43
+
44
+ ### Titles
45
+
46
+ Page titles are very important for Search engines. The titles in the
47
+ browser are displayed in the title bar. The search engines would look at
48
+ the this title bar to determine what the page is all about.
49
+
50
+ ```ruby
51
+ set_meta_tags title: 'Member Login'
52
+ # => <title>Some Page Title</title>
53
+
54
+ set_meta_tags site: 'Site Title', title: 'Member Login'
55
+ # => <title>Site Title | Page Title</title>
56
+
57
+ set_meta_tags site: 'Site Title', title: 'Member Login', reverse: true
58
+ # => <title>Page Title | Site Title</title>
59
+ ```
60
+
61
+ Recommended title tag length: up to <b>70 characters</b>, <b>10 words</b>.
62
+
63
+ ### Description
64
+
65
+ Description tags are called meta tags as they are not displayed by the
66
+ browsers as that of titles. But these descriptions may be displayed by
67
+ some search engines. They are used to describe the contents of a page in
68
+ 2 or 3 sentences.
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
+ ```
73
+
74
+ Recommended description tag length: up to <b>160 characters</b>.
75
+
76
+ ### Keywords
77
+
78
+ Meta keywords tag are used to place your keywords that you think a
79
+ surfer would search in Search engines. Repeating keywords unnecessarily
80
+ would be considered spam and you may get permanently banned from SERP's
81
+
82
+ ```ruby
83
+ set_meta_tags keywords: %w[keyword1 Keyword2 KeyWord3]
84
+ # => <meta name="keywords" content="keyword1, keyword2, keyword3" />
85
+ ```
86
+ Recommended keywords tag length: up to <b>255 characters</b>, <b>20 words</b>.
87
+
88
+ ### Noindex
89
+
90
+ By using the noindex meta tag, you can signal to search engines to not
91
+ include specific pages in their indexes.
92
+
93
+ ```ruby
94
+ set_meta_tags noindex: true
95
+ # => <meta name="robots" content="noindex" />
96
+
97
+ set_meta_tags noindex: 'googlebot'
98
+ # => <meta name="googlebot" content="noindex" />
99
+ ```
100
+ This is useful for pages like login, password reset, privacy policy, etc.
101
+
102
+ Further reading:
103
+
104
+ * [Blocking Google](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=93708)
105
+ * [Using meta tags to block access to your site](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=93710)
106
+
107
+ ### Nofollow
108
+
109
+ Nofollow meta tag tells a search engine not to follow the links on a specific
110
+ page. It's entirely likely that a robot might find the same links on some
111
+ other page without a nofollow (perhaps on some other site), and so
112
+ still arrives at your undesired page.
113
+ ```ruby
114
+ set_meta_tags nofollow: true
115
+ # => <meta name="robots" content="nofollow" />
116
+
117
+ set_meta_tags nofollow: 'googlebot'
118
+ # => <meta name="googlebot" content="nofollow" />
119
+ ```
120
+
121
+ Further reading:
122
+
123
+ * [About rel="nofollow"](http://www.google.com/support/webmasters/bin/answer.py?answer=96569)
124
+ * [Meta tags](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=79812)
125
+
126
+ ### Canonical URL
127
+
128
+ Canonical link element tells a search engine what is the canonical or main URL
129
+ for a content which have multiple URLs. The search engine will always return
130
+ that URL, and link popularity and authority will be applied to that URL.
131
+
132
+ ```ruby
133
+ set_meta_tags canonical: "http://yoursite.com/canonical/url"
134
+ # => <link rel="canonical" href="http://yoursite.com/canonical/url" />
135
+ ```
136
+
137
+ Further reading:
138
+
139
+ * [About rel="canonical"](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=139394)
140
+ * [Canonicalization](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=139066)
141
+
142
+ ### Icon
143
+
144
+ A favicon (short for Favorite icon), also known as a shortcut icon, Web site
145
+ icon, tab icon or bookmark icon, is a file containing one or more small icons,
146
+ most commonly 16×16 pixels, associated with a particular website or web page.
147
+ ```ruby
148
+ set_meta_tags icon: '/favicon.ico'
149
+ # => <link rel="icon" href="/favicon.ico" type="image/x-icon" />
150
+
151
+ set_meta_tags icon: '/favicon.png', type: 'image/png'
152
+ # => <link rel="icon" href="/favicon.png" type="image/png" />
153
+
154
+ set_meta_tags icon: [
155
+ { href: '/images/icons/icon_96.png', sizes: '32x32 96x96', type: 'image/png' },
156
+ { href: '/images/icons/icon_itouch_precomp_32.png', rel: 'apple-touch-icon-precomposed', sizes: '32x32', type: 'image/png' },
157
+ ]
158
+ # => <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96" />
159
+ # <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32" />
160
+ ```
161
+
162
+ Further reading:
163
+
164
+ * [Favicon](https://www.wikiwand.com/en/Favicon)
165
+ * [Touch Icons](https://mathiasbynens.be/notes/touch-icons)
166
+
167
+ ### Author links
168
+
169
+ Link to your Google+ profile using rel="author"
170
+
171
+ ```ruby
172
+ set_meta_tags author: "http://yourgplusprofile.com/profile/url"
173
+ # => <link rel="author" href="http://yourgplusprofile.com/profile/url" />
174
+ ```
175
+
176
+ Further reading:
177
+
178
+ * [About rel="author"](https://support.google.com/webmasters/answer/2539557?hl=en)
179
+
180
+ ### Publisher links
181
+
182
+ Link to your Google+ profile using rel="publisher"
183
+ ```ruby
184
+ set_meta_tags publisher: "http://yourgplusprofile.com/profile/url"
185
+ # => <link rel="publisher" href="http://yourgplusprofile.com/profile/url" />
186
+ ```
187
+
188
+ * [Link to your website](https://support.google.com/plus/answer/1713826?hl=en)
189
+ * [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)
190
+
191
+ ### Multi-regional and multilingual URLs, RSS and mobile links
192
+
193
+ Alternate link elements tell a search engine when there is content that's
194
+ translated or targeted to users in a certain region.
195
+ ```ruby
196
+ set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url" }
197
+ # => <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr" />
198
+
199
+ set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url",
200
+ "de" => "http://yoursite.de/alternate/url" }
201
+ # => <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr" />
202
+ # <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de" />
203
+ ```
204
+
205
+ If you need more than just multi-lingual links, you can use an alternative syntax:
206
+
207
+ ```ruby
208
+ set_meta_tags alternate: [
209
+ { href: 'http://example.fr/base/url', hreflang: 'fr' },
210
+ { href: 'http://example.com/feed.rss', type: 'application/rss+xml', title: 'RSS' },
211
+ { href: 'http://m.example.com/page-1', media: 'only screen and (max-width: 640px)'},
212
+ ]
213
+ ```
214
+ Further reading:
215
+
216
+ * [Multi-regional and multilingual sites](https://support.google.com/webmasters/answer/182192)
217
+ * [About rel="alternate" hreflang="x"](http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=189077)
218
+ * [Separate URLs](https://developers.google.com/webmasters/mobile-sites/mobile-seo/configurations/separate-urls#annotation-in-the-html)
219
+
220
+ ### Pagination links
221
+
222
+ Previous and next links indicate indicate the relationship between individual
223
+ URLs. Using these attributes is a strong hint to Google that you want us to
224
+ treat these pages as a logical sequence.
225
+ ```ruby
226
+ set_meta_tags prev: "http://yoursite.com/url?page=1"
227
+ # => <link rel="prev" href="http://yoursite.com/url?page=1" />
228
+ set_meta_tags next: "http://yoursite.com/url?page=3"
229
+ # => <link rel="next" href="http://yoursite.com/url?page=3" />
230
+ ```
231
+
232
+ Further reading:
233
+
234
+ * [Pagination](http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1663744)
235
+ * [Pagination with rel="next" and rel="prev"](http://googlewebmastercentral.blogspot.ca/2011/09/pagination-with-relnext-and-relprev.html)
236
+
237
+ ### Refresh interval and redirect URL
238
+
239
+ Meta refresh is a method of instructing a web browser to automatically
240
+ refresh the current web page or frame after a given time interval. It is also
241
+ possible to instruct the browser to fetch a different URL when the page is
242
+ refreshed, by including the alternative URL in the content parameter. By
243
+ setting the refresh time interval to zero (or a very low value), this allows
244
+ meta refresh to be used as a method of URL redirection.
245
+ ```ruby
246
+ set_meta_tags refresh: 5
247
+ # => <meta content="5" http-equiv="refresh" />
248
+ set_meta_tags refresh: '5;url=http://example.com'
249
+ # => <meta content="5;url=http://example.com" http-equiv="refresh" />
250
+ ```
251
+ Further reading:
252
+
253
+ * [Meta refresh](http://en.wikipedia.org/wiki/Meta_refresh)
254
+ * [What is the Meta Refresh Tag](http://webdesign.about.com/od/metataglibraries/a/aa080300a.htm)
255
+
256
+
257
+ ### Open Search
258
+
259
+ Open Search link element to describe a search engine in a standard and accessible format.
260
+ ```ruby
261
+ set_meta_tags open_search: {
262
+ title: "Open Search",
263
+ href: "/opensearch.xml"
264
+ }
265
+ # => <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml" />
266
+ ```
267
+ Further reading:
268
+
269
+ * [OpenSearch specs](http://www.opensearch.org/Specifications/OpenSearch/1.1)
270
+ * [OpenSearch wiki](http://en.wikipedia.org/wiki/OpenSearch)
271
+
272
+ ### Hashes
273
+
274
+ Any namespace can be built just passing any symbol name and a Hash. For example:
275
+
276
+ ```ruby
277
+ set_meta_tags foo: {
278
+ bar: "lorem",
279
+ baz: {
280
+ qux: "ipsum"
281
+ }
282
+ }
283
+ # => <meta property="foo:bar" content="lorem"/>
284
+ # <meta property="foo:baz:qux" content="ipsum"/>
285
+ ```
286
+
287
+
288
+ ### Arrays
289
+
290
+ Repeated meta tags can be built just using an Array inside a Hash. For example:
291
+
292
+ ```ruby
293
+ set_meta_tags og: {
294
+ image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
295
+ }
296
+ # => <meta property="og:image" content="http://example.com/rock.jpg" />
297
+ # <meta property="og:image" content="http://example.com/rock2.jpg" />
298
+ ```
299
+
300
+ ### Open Graph
301
+
302
+ To turn your web pages into graph objects, you'll need to add Open Graph
303
+ protocol `<meta>` tags to your webpages. The tags allow you to specify
304
+ structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today
305
+ and in the future. Here's an example for a movie page:
306
+
307
+ ```ruby
308
+ set_meta_tags og: {
309
+ title: 'The Rock',
310
+ type: 'video.movie',
311
+ url: 'http://www.imdb.com/title/tt0117500/',
312
+ image: 'http://ia.media-imdb.com/rock.jpg',
313
+ video: {
314
+ director: 'http://www.imdb.com/name/nm0000881/',
315
+ writer: ['http://www.imdb.com/name/nm0918711/', 'http://www.imdb.com/name/nm0177018/']
316
+ }
317
+ }
318
+ # => <meta property="og:title" content="The Rock"/>
319
+ # <meta property="og:type" content="video.movie"/>
320
+ # <meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
321
+ # <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
322
+ # <meta property="og:video:director" content="http://www.imdb.com/name/nm0000881/"/>
323
+ # <meta property="og:video:writer" content="http://www.imdb.com/name/nm0918711/"/>
324
+ # <meta property="og:video:writer" content="http://www.imdb.com/name/nm0177018/"/>
325
+ ```
326
+
327
+ Multiple images declared as an **array** (look at the `_` character):
328
+
329
+ ```ruby
330
+ set_meta_tags og: {
331
+ title: 'Two structured image properties',
332
+ type: 'website',
333
+ url: 'view-source:http://examples.opengraphprotocol.us/image-array.html',
334
+ image: [
335
+ {
336
+ _: 'http://examples.opengraphprotocol.us/media/images/75.png',
337
+ width: 75,
338
+ height: 75,
339
+ },
340
+ {
341
+ _: 'http://examples.opengraphprotocol.us/media/images/50.png',
342
+ width: 50,
343
+ height: 50,
344
+ }
345
+ ]
346
+ }
347
+ # => <meta property="og:title" content="Two structured image properties">
348
+ # <meta property="og:type" content="website">
349
+ # <meta property="og:url" content="http://examples.opengraphprotocol.us/image-array.html">
350
+ # <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/75.png">
351
+ # <meta property="og:image:width" content="75">
352
+ # <meta property="og:image:height" content="75">
353
+ # <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/50.png">
354
+ # <meta property="og:image:width" content="50">
355
+ # <meta property="og:image:height" content="50">
356
+ ```
357
+
358
+ Further reading:
359
+
360
+ * [Open Graph protocol](http://developers.facebook.com/docs/opengraph/)
361
+
362
+ ### Twitter Cards
363
+
364
+ Twitter cards make it possible for you to attach media experiences to Tweets that link to your content.
365
+ There are 3 card types (summary, photo and player). Here's an example for summary:
366
+
367
+ ```ruby
368
+ set_meta_tags twitter: {
369
+ card: "summary",
370
+ site: "@username"
371
+ }
372
+ # => <meta name="twitter:card" content="summary"/>
373
+ # <meta name="twitter:site" content="@username"/>
374
+ ```
375
+
376
+ 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.
377
+
378
+ 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:
379
+
380
+
381
+ ```ruby
382
+ set_meta_tags twitter: {
383
+ card: "photo",
384
+ image: {
385
+ _: "http://example.com/1.png",
386
+ width: 100,
387
+ height: 100,
388
+ }
389
+ }
390
+ # => <meta name="twitter:card" content="photo"/>
391
+ # <meta name="twitter:image" content="http://example.com/1.png"/>
392
+ # <meta name="twitter:image:width" content="100"/>
393
+ # <meta name="twitter:image:height" content="100"/>
394
+ ```
395
+
396
+ Further reading:
397
+
398
+ * [Twitter Cards Documentation](https://dev.twitter.com/docs/cards/)
399
+
400
+ ### Custom meta tags
401
+
402
+ Starting from version 1.3.1, you can specify arbitrary meta tags, and they will
403
+ be rendered on the page, even if meta-tags gem does not know about them.
404
+
405
+ Example:
406
+
407
+ ```ruby
408
+ set_meta_tags author: "Dmytro Shteflyuk"
409
+ # => <meta name="author" content="Dmytro Shteflyuk"/>
410
+ ```
411
+
412
+ You can also specify value as an Array, and values will be displayed as a list
413
+ of `meta` tags:
414
+
415
+ ```ruby
416
+ set_meta_tags author: [ "Dmytro Shteflyuk", "John Doe" ]
417
+ # => <meta name="author" content="Dmytro Shteflyuk"/>
418
+ # <meta name="author" content="John Doe"/>
419
+ ```
420
+
421
+ ## MetaTags Usage
422
+
423
+ First, add this code to your main layout:
424
+
425
+ ```ruby
426
+ <head>
427
+ <%= display_meta_tags site: 'My website' %>
428
+ </head>
429
+ ```
430
+
431
+ Then, to set the page title, add this to each of your views (see below for other options):
432
+
433
+ ```ruby
434
+ <h1><%= title 'My page title' %></h1>
435
+ ```
436
+
437
+ When views are rendered, the page title will be included in the right spots:
438
+ ```ruby
439
+ <head>
440
+ <title>My website | My page title</title>
441
+ </head>
442
+ <body>
443
+ <h1>My page title</h1>
444
+ </body>
445
+ ```
446
+
447
+ You can find allowed options for `display_meta_tags` method below.
448
+
449
+ ### Using MetaTags in controller
450
+
451
+ You can define following instance variables:
452
+
453
+ ```ruby
454
+ @page_title = 'Member Login'
455
+ @page_description = 'Member login page.'
456
+ @page_keywords = 'Site, Login, Members'
457
+ ```
458
+
459
+ Also you could use `set_meta_tags` method to define all meta tags simultaneously:
460
+
461
+ ```ruby
462
+ set_meta_tags title: 'Member Login',
463
+ description: 'Member login page.',
464
+ keywords: 'Site, Login, Members'
465
+ ```
466
+
467
+ You can find allowed options for `set_meta_tags` method below.
468
+
469
+ ### Using MetaTags in view
470
+
471
+ To set meta tags you can use following methods:
472
+
473
+ ```ruby
474
+ <% title 'Member Login' %>
475
+ <% description 'Member login page.' %>
476
+ <% keywords 'Member login page.' %>
477
+ <% nofollow %>
478
+ <% noindex %>
479
+ <% refresh 3 %>
480
+ ```
481
+
482
+ Also there is `set_meta_tags` method exists:
483
+
484
+ ```ruby
485
+ <% set_meta_tags title: 'Member Login',
486
+ description: 'Member login page.',
487
+ keywords: 'Site, Login, Members' %>
488
+ ```
489
+
490
+ The `title` method returns title itself, so you can use it to show the title
491
+ somewhere on the page:
492
+
493
+ ```ruby
494
+ <h1><%= title 'Member Login' %></h1>
495
+ ```
496
+
497
+ If you want to set the title and display another text, use this:
498
+
499
+ ```ruby
500
+ <h1><%= title 'Member Login', 'Here you can login to the site:' %></h1>
501
+ ```
502
+
503
+ ### Allowed options for `display_meta_tags` and `set_meta_tags` methods
504
+
505
+ Use these options to customize the title format:
506
+
507
+ * `:site` — site title;
508
+ * `:title` — page title;
509
+ * `:description` — page description;
510
+ * `:keywords` — page keywords;
511
+ * `:charset` — page character set;
512
+ * `:prefix` — text between site name and separator;
513
+ * `:separator` — text used to separate website name from page title;
514
+ * `:suffix` — text between separator and page title;
515
+ * `:lowercase` — when true, the page name will be lowercase;
516
+ * `:reverse` — when true, the page and site names will be reversed;
517
+ * `:noindex` — add noindex meta tag; when true, 'robots' will be used, otherwise the string will be used;
518
+ * `:nofollow` — add nofollow meta tag; when true, 'robots' will be used, otherwise the string will be used;
519
+ * `:canonical` — add canonical link tag;
520
+ * `:author` — add author link tag;
521
+ * `:publisher` — add publisher link tag;
522
+ * `:prev` — add prev link tag;
523
+ * `:next` — add next link tag;
524
+ * `:og` — add Open Graph tags (Hash);
525
+ * `:twitter` — add Twitter tags (Hash);
526
+ * `:refresh` — refresh interval and optionally url to redirect to.
527
+
528
+ And here are a few examples to give you ideas.
529
+
530
+ ```ruby
531
+ <%= display_meta_tags separator: "&mdash;".html_safe %>
532
+ <%= display_meta_tags prefix: false, separator: ":" %>
533
+ <%= display_meta_tags lowercase: true %>
534
+ <%= display_meta_tags reverse: true, prefix: false %>
535
+ <%= display_meta_tags og: { title: 'The Rock', type: 'video.movie' } %>
536
+ <%= display_meta_tags alternate: { 'zh-Hant' => 'http://example.com.tw/base/url' } %>
537
+ ```
538
+
539
+ ### Allowed values
540
+
541
+ You can specify `:title` as a string or array:
542
+
543
+ ```ruby
544
+ set_meta_tags title: ['part1', 'part2'], site: 'site'
545
+ # => site | part1 | part2
546
+ set_meta_tags title: ['part1', 'part2'], reverse: true, site: 'site'
547
+ # => part2 | part1 | site
548
+ ```
549
+ Keywords can be passed as string of comma-separated values, or as an array:
550
+
551
+ ```ruby
552
+ set_meta_tags keywords: ['tag1', 'tag2']
553
+ # => tag1, tag2
554
+ ```
555
+
556
+ Description is a string (HTML will be stripped from output string).
557
+
558
+ ### Mirrored values
559
+
560
+ Sometimes, it is desirable to mirror meta tag values down into namespaces. A
561
+ common use case is when you want open graph's `og:title` to be identical to
562
+ the `title`.
563
+
564
+ Say, you have the following in your application layout:
565
+
566
+ ```ruby
567
+ display_meta_tags og: {
568
+ title: :title
569
+ }
570
+ ```
571
+
572
+ The value of `og[:title]` is a symbol and therefore references the value of the
573
+ top level `title` meta tag. With the following in any view:
574
+
575
+ ```ruby
576
+ title 'my great view'
577
+ ```
578
+
579
+ You get this open graph meta tag for free:
580
+
581
+ ```html
582
+ <meta property="og:title" content="my great view"></meta>
583
+ ```
584
+
585
+ ### Using with pjax
586
+
587
+ [jQuery.pjax](https://github.com/defunkt/jquery-pjax) is a nice solution for navigation
588
+ without full page reload. The main difference is that layout file will not be rendered,
589
+ so page title will not change. To fix this, when using a page fragment, pjax will check
590
+ the fragment DOM element for a `title` or `data-title` attribute and use any value it finds.
591
+
592
+ MetaTags simplifies this with `display_title` method, which returns fully resolved
593
+ page title (include site, prefix/suffix, etc.) But in this case you will have to
594
+ set default parameters (e.g, `:site`) both in layout file and in your views. To minimize
595
+ code duplication, you can define a helper in `application_helper.rb`:
596
+
597
+ ```ruby
598
+ def default_meta_tags
599
+ {
600
+ title: 'Member Login',
601
+ description: 'Member login page.',
602
+ keywords: 'Site, Login, Members',
603
+ separator: "&mdash;".html_safe,
604
+ }
605
+ end
606
+ ```
607
+
608
+ Then in your layout file use:
609
+
610
+ ```ruby
611
+ <%= display_meta_tags(default_meta_tags) %>
612
+ ```
613
+
614
+ And in your pjax templates:
615
+
616
+ ```ruby
617
+ <!-- set title here, so we can use it both in "display_title" and in "title" %>
618
+ <% title "My Page title" %>
619
+ <%= content_tag :div, data: { title: display_title(default_meta_tags) } do %>
620
+ <h1><%= title %></h1>
621
+ <!-- HTML goes here -->
622
+ <% end %>
623
+ ```
624
+
625
+ ## Author
626
+
627
+ [Dmytro Shteflyuk](https://github.com/kpumuk), [http://kpumuk.info](http://kpumuk.info/)