meta-tags 2.14.0 → 2.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/README.md CHANGED
@@ -1,53 +1,43 @@
1
1
  # MetaTags: a gem to make your Rails application SEO-friendly
2
2
 
3
- [![CircleCI](https://circleci.com/gh/kpumuk/meta-tags.svg?style=shield)](https://circleci.com/gh/kpumuk/meta-tags)
3
+ [![Tests](https://github.com/kpumuk/meta-tags/actions/workflows/tests.yml/badge.svg)](https://github.com/kpumuk/meta-tags/actions/workflows/tests.yml)
4
4
  [![Gem Version](https://badge.fury.io/rb/meta-tags.svg)](https://badge.fury.io/rb/meta-tags)
5
+ [![Ruby Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://github.com/testdouble/standard)
5
6
  [![Code Climate](https://codeclimate.com/github/kpumuk/meta-tags/badges/gpa.svg)](https://codeclimate.com/github/kpumuk/meta-tags)
6
7
  [![Test Coverage](https://codeclimate.com/github/kpumuk/meta-tags/badges/coverage.svg)](https://codeclimate.com/github/kpumuk/meta-tags/coverage)
7
8
  [![Gem Downloads](https://img.shields.io/gem/dt/meta-tags.svg)](https://badge.fury.io/rb/meta-tags)
8
- [![Changelog](https://img.shields.io/badge/Changelog-latest-blue.svg)](https://github.com/kpumuk/meta-tags/blob/master/CHANGELOG.md)
9
+ [![Changelog](https://img.shields.io/badge/Changelog-latest-blue.svg)](https://github.com/kpumuk/meta-tags/blob/main/CHANGELOG.md)
9
10
 
10
11
  Search Engine Optimization (SEO) plugin for Ruby on Rails applications.
11
12
 
12
13
  ## Ruby on Rails
13
14
 
14
- MetaTags master branch fully supports Ruby on Rails 5.1+, and is tested against all
15
- major Rails releases up to 6.1.
15
+ The MetaTags main branch fully supports Ruby on Rails 6.0+ and is tested against all major Ruby on Rails releases.
16
16
 
17
- Ruby versions older than 2.5 are no longer officially supported.
18
-
19
- _Please note_ that we are no longer support Ruby versions older than 2.4.0 and
20
- Ruby on Rails older than 5.1, because they [reached their End of Life](https://github.com/kpumuk/meta-tags/pull/143).
17
+ > [!NOTE]
18
+ > We no longer support Ruby versions older than 3.0 and Ruby on Rails older than 6.0 since they reached their end of life (see [Ruby](https://endoflife.date/ruby) and [Ruby on Rails](https://endoflife.date/rails)).
21
19
 
22
20
  ## Installation
23
21
 
24
22
  Add the "meta-tags" gem to your `Gemfile`.
25
23
 
26
24
  ```ruby
27
- gem 'meta-tags'
25
+ gem "meta-tags"
28
26
  ```
29
27
 
30
28
  And run `bundle install` command.
31
29
 
32
30
  ## Configuration
33
31
 
34
- MetaTags follows best-practices for meta tags. Although default limits for
35
- truncation have recommended values, you can change them to reflect your own
36
- preferences. Keywords are converted to lowercase by default, but this is also
37
- configurable.
32
+ MetaTags follows best practices for meta tags. Although default limits for truncation have recommended values, you can change them to reflect your own preferences. Keywords are converted to lowercase by default, but this is also configurable.
38
33
 
39
- To override the defaults, create an initializer
40
- `config/initializers/meta_tags.rb` using the following command:
34
+ To override the defaults, create an initializer `config/initializers/meta_tags.rb` using the following command:
41
35
 
42
36
  ```bash
43
37
  rails generate meta_tags:install
44
38
  ```
45
39
 
46
- By default meta tags are rendered with the key `name`. Since, some meta tags are
47
- required to use `property` instead (like Facebook Open Graph object), MetaTags gem
48
- allows to configure which tags to render with `property` attribute. By default
49
- the pre-configured list includes all possible Facebook Open Graph object types, but
50
- you can add your own in case you need it.
40
+ By default, meta tags are rendered with the key `name`. However, some meta tags are required to use `property` instead (like Facebook Open Graph object). The MetaTags gem allows you to configure which tags to render with the `property` attribute. The pre-configured list includes all possible Facebook Open Graph object types by default, but you can add your own in case you need it.
51
41
 
52
42
  ## MetaTags Usage
53
43
 
@@ -55,14 +45,14 @@ First, add this code to your main layout:
55
45
 
56
46
  ```erb
57
47
  <head>
58
- <%= display_meta_tags site: 'My website' %>
48
+ <%= display_meta_tags site: "My website" %>
59
49
  </head>
60
50
  ```
61
51
 
62
52
  Then, to set the page title, add this to each of your views (see below for other options):
63
53
 
64
54
  ```erb
65
- <h1><%= title 'My page title' %></h1>
55
+ <h1><%= title "My page title" %></h1>
66
56
  ```
67
57
 
68
58
  When views are rendered, the page title will be included in the right spots:
@@ -76,57 +66,66 @@ When views are rendered, the page title will be included in the right spots:
76
66
  </body>
77
67
  ```
78
68
 
79
- You can find allowed options for `display_meta_tags` method below.
69
+ You can find allowed options for the `display_meta_tags` method below.
70
+
71
+ > [!IMPORTANT]
72
+ > You **must** use `display_meta_tags` in the layout files to render the meta tags. In the views, you will instead use `set_meta_tags`, which accepts the same arguments but does not render anything in the place where it is called.
80
73
 
81
74
  ### Using MetaTags in controller
82
75
 
83
- You can define following instance variables:
76
+ You can define the following instance variables:
84
77
 
85
78
  ```ruby
86
- @page_title = 'Member Login'
87
- @page_description = 'Member login page.'
88
- @page_keywords = 'Site, Login, Members'
79
+ @page_title = "Member Login"
80
+ @page_description = "Member login page."
81
+ @page_keywords = "Site, Login, Members"
89
82
  ```
90
83
 
91
- Also you could use `set_meta_tags` method to define all meta tags simultaneously:
84
+ Also, you could use the `set_meta_tags` method to define all meta tags simultaneously:
92
85
 
93
86
  ```ruby
94
- set_meta_tags title: 'Member Login',
95
- description: 'Member login page.',
96
- keywords: 'Site, Login, Members'
87
+ set_meta_tags(
88
+ title: "Member Login",
89
+ description: "Member login page.",
90
+ keywords: "Site, Login, Members"
91
+ )
97
92
  ```
98
93
 
99
- You can find allowed options for `set_meta_tags` method below.
94
+ You can find the allowed options for the `set_meta_tags` method below.
100
95
 
101
96
  ### Using MetaTags in view
102
97
 
103
- To set meta tags you can use following methods:
98
+ To set meta tags, you can use the following methods:
104
99
 
105
100
  ```erb
106
- <% title 'Member Login' %>
107
- <% description 'Member login page.' %>
108
- <% keywords 'Site, Login, Members' %>
101
+ <% title "Member Login" %>
102
+ <% description "Member login page." %>
103
+ <% keywords "Site, Login, Members" %>
109
104
  <% nofollow %>
110
105
  <% noindex %>
111
106
  <% refresh 3 %>
112
107
  ```
113
108
 
114
- Also there is `set_meta_tags` method exists:
109
+ Also, the `set_meta_tags` method exists:
115
110
 
116
111
  ```erb
117
- <% set_meta_tags title: 'Member Login',
118
- description: 'Member login page.',
119
- keywords: 'Site, Login, Members' %>
112
+ <%
113
+ set_meta_tags(
114
+ title: "Member Login",
115
+ description: "Member login page.",
116
+ keywords: "Site, Login, Members"
117
+ )
118
+ %>
120
119
  ```
121
120
 
122
- You can pass an object that implements `#to_meta_tags` method and returns a Hash:
121
+ You can pass an object that implements the `#to_meta_tags` method and returns a Hash:
123
122
 
124
123
  ```ruby
125
124
  class Document < ApplicationRecord
126
125
  def to_meta_tags
127
126
  {
128
127
  title: title,
129
- description: summary,
128
+ description: summary
130
129
  }
131
130
  end
132
131
  end
@@ -135,47 +134,47 @@ end
135
134
  set_meta_tags @document
136
135
  ```
137
136
 
138
- The `title` method returns title itself, so you can use it to show the title
137
+ The `title` method returns the title itself, so you can use it to show the title
139
138
  somewhere on the page:
140
139
 
141
140
  ```erb
142
- <h1><%= title 'Member Login' %></h1>
141
+ <h1><%= title "Member Login" %></h1>
143
142
  ```
144
143
 
145
144
  If you want to set the title and display another text, use this:
146
145
 
147
146
  ```erb
148
- <h1><%= title 'Member Login', 'Here you can login to the site:' %></h1>
147
+ <h1><%= title "Member Login", "Here you can login to the site:" %></h1>
149
148
  ```
150
149
 
151
150
  ### Allowed options for `display_meta_tags` and `set_meta_tags` methods
152
151
 
153
152
  Use these options to customize the title format:
154
153
 
155
- | Option | Description |
156
- | -------------- | -------------------------------------------------------------------------------------------------------------------- |
157
- | `:site` | site title |
158
- | `:title` | page title |
159
- | `:description` | page description |
160
- | `:keywords` | page keywords |
161
- | `:charset` | page character set |
162
- | `:prefix` | text between site name and separator |
163
- | `:separator` | text used to separate website name from page title |
164
- | `:suffix` | text between separator and page title |
165
- | `:lowercase` | when true, the page name will be lowercase |
166
- | `:reverse` | when true, the page and site names will be reversed |
167
- | `:noindex` | add noindex meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings |
168
- | `:index` | add index meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings |
169
- | `:nofollow` | add nofollow meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings |
170
- | `:follow` | add follow meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings |
171
- | `:noarchive` | add noarchive meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings |
172
- | `:canonical` | add canonical link tag |
173
- | `:prev` | add prev link tag |
174
- | `:next` | add next link tag |
175
- | `:image_src` | add image_src link tag |
176
- | `:og` | add Open Graph tags (Hash) |
177
- | `:twitter` | add Twitter tags (Hash) |
178
- | `:refresh` | refresh interval and optionally url to redirect to |
154
+ | Option | Description |
155
+ | -------------- | ------------------------------------------------------------------------------------------------------------------- |
156
+ | `:site` | Site title |
157
+ | `:title` | Page title |
158
+ | `:description` | Page description |
159
+ | `:keywords` | Page keywords |
160
+ | `:charset` | Page character set |
161
+ | `:prefix` | Text between site name and separator |
162
+ | `:separator` | Text used to separate the website name from the page title |
163
+ | `:suffix` | Text between separator and page title |
164
+ | `:lowercase` | When true, the page name will be lowercase |
165
+ | `:reverse` | When true, the page and site names will be reversed |
166
+ | `:noindex` | Add noindex meta tag; when true, "robots" will be used; accepts a string with a robot name or an array of strings |
167
+ | `:index` | Add index meta tag; when true, "robots" will be used; accepts a string with a robot name or an array of strings |
168
+ | `:nofollow` | Add nofollow meta tag; when true, "robots" will be used; accepts a string with a robot name or an array of strings |
169
+ | `:follow` | Add follow meta tag; when true, "robots" will be used; accepts a string with a robot name or an array of strings |
170
+ | `:noarchive` | Add noarchive meta tag; when true, "robots" will be used; accepts a string with a robot name or an array of strings |
171
+ | `:canonical` | Add canonical link tag |
172
+ | `:prev` | Add prev link tag |
173
+ | `:next` | Add next link tag |
174
+ | `:image_src` | Add image_src link tag |
175
+ | `:og` | Add Open Graph tags (Hash) |
176
+ | `:twitter` | Add Twitter tags (Hash) |
177
+ | `:refresh` | Refresh interval and optionally URL to redirect to |
179
178
 
180
179
  And here are a few examples to give you ideas.
181
180
 
@@ -184,8 +183,8 @@ And here are a few examples to give you ideas.
184
183
  <%= display_meta_tags prefix: false, separator: ":" %>
185
184
  <%= display_meta_tags lowercase: true %>
186
185
  <%= display_meta_tags reverse: true, prefix: false %>
187
- <%= display_meta_tags og: { title: 'The Rock', type: 'video.movie' } %>
188
- <%= display_meta_tags alternate: { 'zh-Hant' => 'http://example.com.tw/base/url' } %>
186
+ <%= display_meta_tags og: { title: "The Rock", type: "video.movie" } %>
187
+ <%= display_meta_tags alternate: { "zh-Hant" => "http://example.com.tw/base/url" } %>
189
188
  ```
190
189
 
191
190
  ### Allowed values
@@ -193,83 +192,89 @@ And here are a few examples to give you ideas.
193
192
  You can specify `:title` as a string or array:
194
193
 
195
194
  ```ruby
196
- set_meta_tags title: ['part1', 'part2'], site: 'site'
195
+ set_meta_tags title: ["part1", "part2"], site: "site"
197
196
  # site | part1 | part2
198
- set_meta_tags title: ['part1', 'part2'], reverse: true, site: 'site'
197
+ set_meta_tags title: ["part1", "part2"], reverse: true, site: "site"
199
198
  # part2 | part1 | site
200
199
  ```
201
200
 
202
- Keywords can be passed as string of comma-separated values, or as an array:
201
+ Keywords can be passed as a string of comma-separated values or as an array:
203
202
 
204
203
  ```ruby
205
- set_meta_tags keywords: ['tag1', 'tag2']
204
+ set_meta_tags keywords: ["tag1", "tag2"]
206
205
  # tag1, tag2
207
206
  ```
208
207
 
209
- Description is a string (HTML will be stripped from output string).
208
+ The description is a string (HTML will be stripped from the output string).
210
209
 
211
210
  ### Mirrored values
212
211
 
213
- Sometimes, it is desirable to mirror meta tag values down into namespaces. A
214
- common use case is when you want open graph's `og:title` to be identical to
215
- the `title`.
212
+ Sometimes, it is desirable to mirror meta tag values down into namespaces. A common use case is when you want the open graph's `og:title` to be identical to the `title`.
216
213
 
217
- Say, you have the following in your application layout:
214
+ Let's say you have the following code in your application layout:
218
215
 
219
216
  ```ruby
220
217
  display_meta_tags og: {
221
218
  title: :title,
222
- site_name: :site,
219
+ site_name: :site
223
220
  }
224
221
  ```
225
222
 
226
- The value of `og[:title]` is a symbol and therefore references the value of the
227
- top level `title` meta tag. With the following in any view:
223
+ The value of `og[:title]` is a symbol, which refers to the value of the top-level `title` meta tag. In any view with the following code:
228
224
 
229
225
  ```ruby
230
- title 'my great view'
226
+ title "my great view"
231
227
  ```
232
228
 
233
- You get this open graph meta tag for free:
229
+ You will get this open graph meta tag automatically:
234
230
 
235
231
  ```html
236
232
  <meta property="og:title" content="my great view"></meta>
237
233
  ```
238
234
 
239
- Please note, that title does not include site. If you need to reference the exact
240
- value rendered in the `<title>` meta tag, use `:full_title`.
235
+ > [!NOTE]
236
+ > The `title` does not include the site name. If you need to reference the exact value rendered in the `<title>` meta tag, use `:full_title`.
237
+
238
+ ### Using with Turbo
239
+
240
+ [Turbo](https://github.com/hotwired/turbo) is a simple solution for getting the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. MetaTags supports Turbo out of the box, so no configuration is necessary.
241
+
242
+ In order to update the page title, you can use the following trick. First, set the ID for the `<title>` HTML tag using MetaTags configuration in your initializer `config/initializers/meta_tags.rb`:
241
243
 
242
- ### Using with Turbolinks
244
+ ```ruby
245
+ MetaTags.configure do |config|
246
+ config.title_tag_attributes = {id: "page-title"}
247
+ end
248
+ ````
249
+
250
+ Now in your turbo frame, you can update the title using a turbo stream:
243
251
 
244
- [Turbolinks](https://github.com/turbolinks/turbolinks) is a simple solution for getting
245
- the performance benefits of a single-page application without the added complexity of a
246
- client-side JavaScript framework. MetaTags supports Turbolinks out of the box, no
247
- configuration is necessary.
252
+ ```html
253
+ <turbo-frame ...>
254
+ <turbo-stream action="update" target="page-title">
255
+ <template>My new title</template>
256
+ </turbo-stream>
257
+ </turbo-frame>
258
+ ```
248
259
 
249
260
  ### Using with pjax
250
261
 
251
- [jQuery.pjax](https://github.com/defunkt/jquery-pjax) is a nice solution for navigation
252
- without full page reload. The main difference is that layout file will not be rendered,
253
- so page title will not change. To fix this, when using a page fragment, pjax will check
254
- the fragment DOM element for a `title` or `data-title` attribute and use any value it finds.
262
+ [jQuery.pjax](https://github.com/defunkt/jquery-pjax) is a nice solution for navigation without a full-page reload. The main difference is that the layout file will not be rendered, so the page title will not change. To fix this, when using a page fragment, pjax will check the fragment DOM element for a `title` or `data-title` attribute and use any value it finds.
255
263
 
256
- MetaTags simplifies this with `display_title` method, which returns fully resolved
257
- page title (include site, prefix/suffix, etc.) But in this case you will have to
258
- set default parameters (e.g, `:site`) both in layout file and in your views. To minimize
259
- code duplication, you can define a helper in `application_helper.rb`:
264
+ MetaTags simplifies this with the `display_title` method, which returns the fully resolved page title (including site, prefix/suffix, etc.). But in this case, you will have to set default parameters (e.g., `:site`) both in the layout file and in your views. To minimize code duplication, you can define a helper in `application_helper.rb`:
260
265
 
261
266
  ```ruby
262
267
  def default_meta_tags
263
268
  {
264
- title: 'Member Login',
265
- description: 'Member login page.',
266
- keywords: 'Site, Login, Members',
267
- separator: "&mdash;".html_safe,
269
+ title: "Member Login",
270
+ description: "Member login page.",
271
+ keywords: "Site, Login, Members",
272
+ separator: "&mdash;".html_safe
268
273
  }
269
274
  end
270
275
  ```
271
276
 
272
- Then in your layout file use:
277
+ Then, in your layout file, use:
273
278
 
274
279
  ```erb
275
280
  <%= display_meta_tags(default_meta_tags) %>
@@ -278,7 +283,7 @@ Then in your layout file use:
278
283
  And in your pjax templates:
279
284
 
280
285
  ```erb
281
- <!-- set title here, so we can use it both in "display_title" and in "title" -->
286
+ <!-- set title here so we can use it both in "display_title" and in "title" -->
282
287
  <% title "My Page title" %>
283
288
  <%= content_tag :div, data: { title: display_title(default_meta_tags) } do %>
284
289
  <h1><%= title %></h1>
@@ -290,20 +295,18 @@ And in your pjax templates:
290
295
 
291
296
  ### Titles
292
297
 
293
- Page titles are very important for Search engines. The titles in the
294
- browser are displayed in the title bar. The search engines look at
295
- the title bar to determine what the page is all about.
298
+ Page titles are very important for search engines. The titles in the browser are displayed in the title bar. Search engines look at the title bar to determine what the page is all about.
296
299
 
297
300
  ```ruby
298
- set_meta_tags title: 'Member Login'
301
+ set_meta_tags title: "Member Login"
299
302
  # <title>Member Login</title>
300
- set_meta_tags site: 'Site Title', title: 'Member Login'
303
+ set_meta_tags site: "Site Title", title: "Member Login"
301
304
  # <title>Site Title | Member Login</title>
302
- set_meta_tags site: 'Site Title', title: 'Member Login', reverse: true
305
+ set_meta_tags site: "Site Title", title: "Member Login", reverse: true
303
306
  # <title>Member Login | Site Title</title>
304
307
  ```
305
308
 
306
- Recommended title tag length: up to <b>70 characters</b>, <b>10 words</b>.
309
+ Recommended title tag length: up to **70 characters** in **10 words**.
307
310
 
308
311
  Further reading:
309
312
 
@@ -311,17 +314,16 @@ Further reading:
311
314
 
312
315
  ### Description
313
316
 
314
- Description tags are called meta tags as they are not displayed by the
315
- browsers unlike the titles. However, these descriptions may be displayed by
316
- some search engines. They are used to describe the contents of a page in
317
- 2 or 3 sentences.
317
+ Description meta tags are not displayed by browsers, unlike titles. However, some search engines may choose to display them. These tags are utilized to provide a concise summary of a webpage's content, typically within 2 or 3 sentences.
318
+
319
+ Below is an example of how to set a description tag using Ruby:
318
320
 
319
321
  ```ruby
320
- set_meta_tags description: "All text about keywords, other keywords"
321
- # <meta name="description" content="All text about keywords, other keywords">
322
+ set_meta_tags description: "This is a sample description"
323
+ # <meta name="description" content="This is a sample description">
322
324
  ```
323
325
 
324
- Recommended description tag length: up to <b>300 characters</b>.
326
+ It is advisable to limit the length of the description tag to **300 characters**.
325
327
 
326
328
  Further reading:
327
329
 
@@ -330,29 +332,26 @@ Further reading:
330
332
 
331
333
  ### Keywords
332
334
 
333
- Meta keywords tag are used to place your keywords that you think a
334
- surfer would search in Search engines. Repeating keywords unnecessarily
335
- would be considered spam and you may get permanently banned from SERP's
335
+ Meta keywords tags are used to place keywords that you believe users would search for in search engines. It is important to avoid unnecessary repetition of keywords, as this could be considered spam and may result in a permanent ban from search engine results pages (SERPs).
336
336
 
337
337
  ```ruby
338
- set_meta_tags keywords: %w[keyword1 Keyword2 KeyWord3]
338
+ set_meta_tags keywords: %w[keyword1 keyword2 keyword3]
339
339
  # <meta name="keywords" content="keyword1, keyword2, keyword3">
340
340
  ```
341
341
 
342
- Recommended keywords tag length: up to <b>255 characters</b>, <b>20 words</b>.
342
+ It is recommended to keep the length of the keywords tag under **255 characters** or **20 words**.
343
343
 
344
- **Please note**, that both Google and Bing publicly indicated that keywords
345
- meta tags is completely ignored.
344
+ > [!NOTE]
345
+ > Both Google and Bing have publicly stated that they completely ignore keywords meta tags.
346
346
 
347
347
  ### Noindex
348
348
 
349
- By using the noindex meta tag, you can signal to search engines to not
350
- include specific pages in their indexes.
349
+ By using the noindex meta tag, you can signal to search engines not to include specific pages in their indexes.
351
350
 
352
351
  ```ruby
353
352
  set_meta_tags noindex: true
354
353
  # <meta name="robots" content="noindex">
355
- set_meta_tags noindex: 'googlebot'
354
+ set_meta_tags noindex: "googlebot"
356
355
  # <meta name="googlebot" content="noindex">
357
356
  ```
358
357
 
@@ -365,7 +364,7 @@ Further reading:
365
364
 
366
365
  ### Index
367
366
 
368
- Although it is not required to add 'index' to 'robots' as it is default value for Google, some SEO specialists recommend to add it to website
367
+ Although it is not required to add "index" to "robots" as it is the default value for Google, some SEO specialists recommend adding it to the website.
369
368
 
370
369
  ```ruby
371
370
  set_meta_tags index: true
@@ -374,15 +373,12 @@ set_meta_tags index: true
374
373
 
375
374
  ### Nofollow
376
375
 
377
- Nofollow meta tag tells a search engine not to follow the links on a specific
378
- page. It's entirely likely that a robot might find the same links on some
379
- other page without a nofollow (perhaps on some other site), and so
380
- still arrives at your undesired page.
376
+ Nofollow meta tags tell a search engine not to follow the links on a specific page. It is entirely possible that a robot might find the same links on another page without a nofollow attribute, perhaps on another site, and still arrive at your undesired page.
381
377
 
382
378
  ```ruby
383
379
  set_meta_tags nofollow: true
384
380
  # <meta name="robots" content="nofollow">
385
- set_meta_tags nofollow: 'googlebot'
381
+ set_meta_tags nofollow: "googlebot"
386
382
  # <meta name="googlebot" content="nofollow">
387
383
  ```
388
384
 
@@ -393,21 +389,21 @@ Further reading:
393
389
 
394
390
  ### Follow
395
391
 
396
- Follow will work with Noindex meta tag
392
+ You can use the Noindex meta tag in conjunction with Follow.
397
393
 
398
394
  ```ruby
399
395
  set_meta_tags noindex: true, follow: true
400
396
  # <meta name="robots" content="noindex, follow">
401
397
  ```
402
398
 
403
- It will not look at this page but will crawl through the rest of the pages on
404
- your website.
399
+ This tag will prevent search engines from indexing this specific page, but it will still allow them to crawl and index the remaining pages on your website.
405
400
 
406
401
  ### Canonical URL
407
402
 
408
- Canonical link element tells a search engine what is the canonical or main URL
409
- for a content which have multiple URLs. The search engine will always return
410
- that URL, and link popularity and authority will be applied to that URL.
403
+ Canonical link elements tell search engines what the canonical or main URL is for content that has multiple URLs. The search engine will always return that URL, and link popularity and authority will be applied to that URL.
404
+
405
+ > [!NOTE]
406
+ > If you follow John Mueller's suggestion not to mix canonical with noindex, then you can set `MetaTags.config.skip_canonical_links_on_noindex = true` and we'll handle it for you.
411
407
 
412
408
  ```ruby
413
409
  set_meta_tags canonical: "http://yoursite.com/canonical/url"
@@ -421,18 +417,16 @@ Further reading:
421
417
 
422
418
  ### Icon
423
419
 
424
- A favicon (short for Favorite icon), also known as a shortcut icon, Web site
425
- icon, tab icon or bookmark icon, is a file containing one or more small icons,
426
- most commonly 16×16 pixels, associated with a particular website or web page.
420
+ A favicon (short for Favorite icon), also known as a shortcut icon, website icon, tab icon, or bookmark icon, is a file containing one or more small icons, most commonly 16x16 pixels, associated with a particular website or web page.
427
421
 
428
422
  ```ruby
429
- set_meta_tags icon: '/favicon.ico'
423
+ set_meta_tags icon: "/favicon.ico"
430
424
  # <link rel="icon" href="/favicon.ico" type="image/x-icon">
431
- set_meta_tags icon: '/favicon.png', type: 'image/png'
425
+ set_meta_tags icon: "/favicon.png", type: "image/png"
432
426
  # <link rel="icon" href="/favicon.png" type="image/png">
433
427
  set_meta_tags icon: [
434
- { href: '/images/icons/icon_96.png', sizes: '32x32 96x96', type: 'image/png' },
435
- { href: '/images/icons/icon_itouch_precomp_32.png', rel: 'apple-touch-icon-precomposed', sizes: '32x32', type: 'image/png' },
428
+ {href: "/images/icons/icon_96.png", sizes: "32x32 96x96", type: "image/png"},
429
+ {href: "/images/icons/icon_itouch_precomp_32.png", rel: "apple-touch-icon-precomposed", sizes: "32x32", type: "image/png"}
436
430
  ]
437
431
  # <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96">
438
432
  # <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32">
@@ -445,15 +439,14 @@ Further reading:
445
439
 
446
440
  ### Multi-regional and multilingual URLs, RSS and mobile links
447
441
 
448
- Alternate link elements tell a search engine when there is content that's
449
- translated or targeted to users in a certain region.
442
+ Alternate link elements tell a search engine when there is content that's translated or targeted to users in a certain region.
450
443
 
451
444
  ```ruby
452
- set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url" }
445
+ set_meta_tags alternate: {"fr" => "http://yoursite.fr/alternate/url"}
453
446
  # <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
454
447
 
455
- set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url",
456
- "de" => "http://yoursite.de/alternate/url" }
448
+ set_meta_tags alternate: {"fr" => "http://yoursite.fr/alternate/url",
449
+ "de" => "http://yoursite.de/alternate/url"}
457
450
  # <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
458
451
  # <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de">
459
452
  ```
@@ -462,10 +455,10 @@ If you need more than just multi-lingual links, you can use an alternative synta
462
455
 
463
456
  ```ruby
464
457
  set_meta_tags alternate: [
465
- { href: 'http://example.fr/base/url', hreflang: 'fr' },
466
- { href: 'http://example.com/feed.rss', type: 'application/rss+xml', title: 'RSS' },
467
- { href: 'http://m.example.com/page-1', media: 'only screen and (max-width: 640px)'},
468
- ]
458
+ {href: "http://example.fr/base/url", hreflang: "fr"},
459
+ {href: "http://example.com/feed.rss", type: "application/rss+xml", title: "RSS"},
460
+ {href: "http://m.example.com/page-1", media: "only screen and (max-width: 640px)"}
461
+ ]
469
462
  ```
470
463
 
471
464
  Further reading:
@@ -476,9 +469,7 @@ Further reading:
476
469
 
477
470
  ### Pagination links
478
471
 
479
- Previous and next links indicate indicate the relationship between individual
480
- URLs. Using these attributes is a strong hint to Google that you want us to
481
- treat these pages as a logical sequence.
472
+ Previous and next links indicate the relationship between individual URLs. Using these attributes is a strong hint to Google that you want us to treat these pages as a logical sequence.
482
473
 
483
474
  ```ruby
484
475
  set_meta_tags prev: "http://yoursite.com/url?page=1"
@@ -494,10 +485,7 @@ Further reading:
494
485
 
495
486
  ### image_src links
496
487
 
497
- Basically, when you submit/share this to Facebook , this helps Facebook determine
498
- which image to put next to the link. If this is not present, Facebook tries to
499
- put in the first image it finds on the page, which may not be the best one to
500
- represent your site.
488
+ Basically, when you submit/share this to Facebook, it 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.
501
489
 
502
490
  ```ruby
503
491
  set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
@@ -506,33 +494,37 @@ set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
506
494
 
507
495
  ### amphtml links
508
496
 
509
- AMP is a way to build web pages for static content that render fast. If you have
510
- two versions of the page – non-AMP and AMP, you can link the AMP version from
511
- normal one using `amphtml` tag:
497
+ AMP is a method of building web pages for static content that renders quickly. If you have two versions of a page - non-AMP and AMP - you can link the AMP version from the normal one using the `amphtml` tag:
512
498
 
513
499
  ```ruby
514
500
  set_meta_tags amphtml: url_for(format: :amp, only_path: false)
515
501
  # <link rel="amphtml" href="https://www.example.com/document.amp">
516
502
  ```
517
503
 
518
- To link back to normal version, use `canonical`.
504
+ To link back to the normal version, use the `canonical` tag.
519
505
 
520
506
  - [What Is AMP?](https://www.ampproject.org/learn/about-amp/)
521
507
  - [Make Your Page Discoverable](https://www.ampproject.org/docs/guides/discovery)
522
508
 
509
+ ### Manifest links
510
+
511
+ By including the `rel="manifest"` attribute in the `<link>` element of an HTML page, you can specify the location of the manifest file that describes the web application. This allows the browser to understand that the web page is an application and to provide features like offline access and the ability to add the application to the home screen of a mobile device.
512
+
513
+ ```ruby
514
+ set_meta_tags manifest: "manifest.json"
515
+ # <link rel="manifest" href="manifest.json">
516
+ ```
517
+
518
+ - [What is manifest?](https://developer.mozilla.org/en-US/docs/Web/Manifest)
519
+
523
520
  ### Refresh interval and redirect URL
524
521
 
525
- Meta refresh is a method of instructing a web browser to automatically
526
- refresh the current web page or frame after a given time interval. It is also
527
- possible to instruct the browser to fetch a different URL when the page is
528
- refreshed, by including the alternative URL in the content parameter. By
529
- setting the refresh time interval to zero (or a very low value), this allows
530
- meta refresh to be used as a method of URL redirection.
522
+ Meta refresh is a method of instructing a web browser to automatically refresh the current web page or frame after a given time interval. It is also possible to instruct the browser to fetch a different URL when the page is refreshed, by including the alternative URL in the content parameter. By setting the refresh time interval to zero (or a very low value), this allows meta refresh to be used as a method of URL redirection.
531
523
 
532
524
  ```ruby
533
525
  set_meta_tags refresh: 5
534
526
  # <meta content="5" http-equiv="refresh">
535
- set_meta_tags refresh: '5;url=http://example.com'
527
+ set_meta_tags refresh: "5;url=http://example.com"
536
528
  # <meta content="5;url=http://example.com" http-equiv="refresh">
537
529
  ```
538
530
 
@@ -543,12 +535,12 @@ Further reading:
543
535
 
544
536
  ### Open Search
545
537
 
546
- Open Search link element to describe a search engine in a standard and accessible format.
538
+ Open Search is a link element used to describe a search engine in a standard and accessible format.
547
539
 
548
540
  ```ruby
549
541
  set_meta_tags open_search: {
550
542
  title: "Open Search",
551
- href: "/opensearch.xml"
543
+ href: "/opensearch.xml"
552
544
  }
553
545
  # <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml">
554
546
  ```
@@ -560,7 +552,7 @@ Further reading:
560
552
 
561
553
  ### Hashes
562
554
 
563
- Any namespace can be built just passing any symbol name and a Hash. For example:
555
+ Any namespace can be created by simply passing a symbol name and a Hash. For example:
564
556
 
565
557
  ```ruby
566
558
  set_meta_tags foo: {
@@ -575,11 +567,11 @@ set_meta_tags foo: {
575
567
 
576
568
  ### Arrays
577
569
 
578
- Repeated meta tags can be built just using an Array inside a Hash. For example:
570
+ Repeated meta tags can be easily created by using an Array within a Hash. For example:
579
571
 
580
572
  ```ruby
581
573
  set_meta_tags og: {
582
- image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
574
+ image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
583
575
  }
584
576
  # <meta property="og:image" content="http://example.com/rock.jpg">
585
577
  # <meta property="og:image" content="http://example.com/rock2.jpg">
@@ -587,20 +579,17 @@ set_meta_tags og: {
587
579
 
588
580
  ### Open Graph
589
581
 
590
- To turn your web pages into graph objects, you'll need to add Open Graph
591
- protocol `<meta>` tags to your webpages. The tags allow you to specify
592
- structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today
593
- and in the future. Here's an example for a movie page:
582
+ To turn your web pages into graph objects, you'll need to add Open Graph protocol `<meta>` tags to your webpages. The tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future. Here's an example for a movie page:
594
583
 
595
584
  ```ruby
596
585
  set_meta_tags og: {
597
- title: 'The Rock',
598
- type: 'video.movie',
599
- url: 'http://www.imdb.com/title/tt0117500/',
600
- image: 'http://ia.media-imdb.com/rock.jpg',
601
- video: {
602
- director: 'http://www.imdb.com/name/nm0000881/',
603
- writer: ['http://www.imdb.com/name/nm0918711/', 'http://www.imdb.com/name/nm0177018/']
586
+ title: "The Rock",
587
+ type: "video.movie",
588
+ url: "http://www.imdb.com/title/tt0117500/",
589
+ image: "http://ia.media-imdb.com/rock.jpg",
590
+ video: {
591
+ director: "http://www.imdb.com/name/nm0000881/",
592
+ writer: ["http://www.imdb.com/name/nm0918711/", "http://www.imdb.com/name/nm0177018/"]
604
593
  }
605
594
  }
606
595
  # <meta property="og:title" content="The Rock">
@@ -616,19 +605,21 @@ Multiple images declared as an **array** (look at the `_` character):
616
605
 
617
606
  ```ruby
618
607
  set_meta_tags og: {
619
- title: 'Two structured image properties',
620
- type: 'website',
621
- url: 'view-source:http://examples.opengraphprotocol.us/image-array.html',
622
- image: [{
623
- _: 'http://examples.opengraphprotocol.us/media/images/75.png',
624
- width: 75,
625
- height: 75,
626
- },
627
- {
628
- _: 'http://examples.opengraphprotocol.us/media/images/50.png',
629
- width: 50,
630
- height: 50,
631
- }]
608
+ title: "Two structured image properties",
609
+ type: "website",
610
+ url: "view-source:http://examples.opengraphprotocol.us/image-array.html",
611
+ image: [
612
+ {
613
+ _: "http://examples.opengraphprotocol.us/media/images/75.png",
614
+ width: 75,
615
+ height: 75
616
+ },
617
+ {
618
+ _: "http://examples.opengraphprotocol.us/media/images/50.png",
619
+ width: 50,
620
+ height: 50
621
+ }
622
+ ]
632
623
  }
633
624
  # <meta property="og:title" content="Two structured image properties">
634
625
  # <meta property="og:type" content="website">
@@ -645,10 +636,10 @@ Article meta tags are supported too:
645
636
 
646
637
  ```ruby
647
638
  set_meta_tags article: {
648
- published_time: '2013-09-17T05:59:00+01:00',
649
- modified_time: '2013-09-16T19:08:47+01:00',
650
- section: 'Article Section',
651
- tag: 'Article Tag',
639
+ published_time: "2013-09-17T05:59:00+01:00",
640
+ modified_time: "2013-09-16T19:08:47+01:00",
641
+ section: "Article Section",
642
+ tag: "Article Tag"
652
643
  }
653
644
  # <meta property="article:published_time" content="2013-09-17T05:59:00+01:00">
654
645
  # <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00">
@@ -663,8 +654,7 @@ Further reading:
663
654
 
664
655
  ### Twitter Cards
665
656
 
666
- Twitter cards make it possible for you to attach media experiences to Tweets that link to your content.
667
- There are 3 card types (summary, photo and player). Here's an example for summary:
657
+ Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. There are 3 card types (summary, photo, and player). Here's an example for summary:
668
658
 
669
659
  ```ruby
670
660
  set_meta_tags twitter: {
@@ -675,17 +665,17 @@ set_meta_tags twitter: {
675
665
  # <meta name="twitter:site" content="@username">
676
666
  ```
677
667
 
678
- 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.
668
+ Take into 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 both to be defined on the page independently and minimizes the amount of duplicate markup required to describe your content and experience.
679
669
 
680
- 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:
670
+ When you need to generate a [Twitter Photo card](https://dev.twitter.com/docs/cards/types/photo-card), the `twitter:image` property is a string, while image dimensions are specified using `twitter:image:width` and `twitter:image:height`, or a `Hash` object in terms of MetaTags gems. There is a special syntax to make this work:
681
671
 
682
672
  ```ruby
683
673
  set_meta_tags twitter: {
684
- card: "photo",
674
+ card: "photo",
685
675
  image: {
686
- _: "http://example.com/1.png",
687
- width: 100,
688
- height: 100,
676
+ _: "http://example.com/1.png",
677
+ width: 100,
678
+ height: 100
689
679
  }
690
680
  }
691
681
  # <meta name="twitter:card" content="photo">
@@ -694,13 +684,31 @@ set_meta_tags twitter: {
694
684
  # <meta name="twitter:image:height" content="100">
695
685
  ```
696
686
 
687
+ A special parameter `itemprop` can be used on an "anonymous" tag "\_" to generate the "itemprop" HTML attribute:
688
+
689
+ ```ruby
690
+ set_meta_tags twitter: {
691
+ card: "photo",
692
+ image: {
693
+ _: "http://example.com/1.png",
694
+ width: 100,
695
+ height: 100,
696
+ itemprop: "image"
697
+ }
698
+ }
699
+ # <meta name="twitter:card" content="photo">
700
+ # <meta name="twitter:image" content="http://example.com/1.png" itemprop="image">
701
+ # <meta name="twitter:image:width" content="100">
702
+ # <meta name="twitter:image:height" content="100">
703
+ ```
704
+
697
705
  Further reading:
698
706
 
699
707
  - [Twitter Cards Documentation](https://dev.twitter.com/cards/)
700
708
 
701
709
  ### App Links
702
710
 
703
- 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:
711
+ App Links is an open cross-platform solution for deep linking to content in your mobile app. Here's an example of iOS app integration:
704
712
 
705
713
  ```ruby
706
714
  set_meta_tags al: {
@@ -721,8 +729,7 @@ Further reading:
721
729
 
722
730
  ### Custom meta tags
723
731
 
724
- Starting from version 1.3.1, you can specify arbitrary meta tags, and they will
725
- be rendered on the page, even if meta-tags gem does not know about them.
732
+ Starting from version 1.3.1, you can specify arbitrary meta tags, and they will be rendered on the page, even if the meta-tags gem does not know about them.
726
733
 
727
734
  Example:
728
735
 
@@ -731,15 +738,14 @@ set_meta_tags author: "Dmytro Shteflyuk"
731
738
  # <meta name="author" content="Dmytro Shteflyuk">
732
739
  ```
733
740
 
734
- You can also specify value as an Array, and values will be displayed as a list
735
- of `meta` tags:
741
+ You can also specify the value as an Array, and the values will be displayed as a list of `meta` tags:
736
742
 
737
743
  ```ruby
738
- set_meta_tags author: [ "Dmytro Shteflyuk", "John Doe" ]
744
+ set_meta_tags author: ["Dmytro Shteflyuk", "John Doe"]
739
745
  # <meta name="author" content="Dmytro Shteflyuk">
740
746
  # <meta name="author" content="John Doe">
741
747
  ```
742
748
 
743
749
  ## Maintainers
744
750
 
745
- [Dmytro Shteflyuk](https://github.com/kpumuk), [https://kpumuk.info](http://kpumuk.info/)
751
+ [Dmytro Shteflyuk](https://github.com/kpumuk), [https://dmytro.sh](https://dmytro.sh)