meta-tags 2.18.0 → 2.20.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- checksums.yaml.gz.sig +0 -0
- data/CHANGELOG.md +24 -3
- data/README.md +208 -232
- data/Rakefile +15 -16
- data/certs/kpumuk.pem +19 -18
- data/lib/generators/meta_tags/install_generator.rb +1 -1
- data/lib/generators/meta_tags/templates/config/initializers/meta_tags.rb +6 -0
- data/lib/meta-tags.rb +1 -1
- data/lib/meta_tags/configuration.rb +24 -16
- data/lib/meta_tags/controller_helper.rb +3 -3
- data/lib/meta_tags/meta_tags_collection.rb +22 -22
- data/lib/meta_tags/railtie.rb +4 -4
- data/lib/meta_tags/renderer.rb +33 -29
- data/lib/meta_tags/text_normalizer.rb +20 -22
- data/lib/meta_tags/version.rb +1 -1
- data/lib/meta_tags/view_helper.rb +2 -2
- data/lib/meta_tags.rb +12 -12
- data/meta-tags.gemspec +39 -30
- data/sig/lib/_internal/rails.rbs +3 -0
- data/sig/lib/meta_tags/configuration.rbs +7 -0
- data/sig/lib/meta_tags/controller_helper.rbs +1 -0
- data/sig/lib/meta_tags/text_normalizer.rbs +2 -2
- data/sig/lib/meta_tags/view_helper.rbs +2 -0
- data/sig/lib/meta_tags.rbs +2 -0
- data.tar.gz.sig +0 -0
- metadata +131 -34
- metadata.gz.sig +0 -0
- data/Gemfile +0 -30
- data/Steepfile +0 -15
data/README.md
CHANGED
@@ -1,7 +1,8 @@
|
|
1
1
|
# MetaTags: a gem to make your Rails application SEO-friendly
|
2
2
|
|
3
|
-
[![
|
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)
|
@@ -11,43 +12,32 @@ Search Engine Optimization (SEO) plugin for Ruby on Rails applications.
|
|
11
12
|
|
12
13
|
## Ruby on Rails
|
13
14
|
|
14
|
-
MetaTags main branch fully supports Ruby on Rails
|
15
|
-
major Rails releases up to 7.0.
|
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
|
-
|
18
|
-
|
19
|
-
_Please note_ that we no longer support Ruby versions older than 2.6.0 and
|
20
|
-
Ruby on Rails older than 5.1, because they reached their [End of Life](https://endoflife.date/ruby).
|
17
|
+
> [!NOTE]
|
18
|
+
> We no longer support Ruby versions older than 2.7 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
|
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
|
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`.
|
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:
|
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
|
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
|
87
|
-
@page_description =
|
88
|
-
@page_keywords
|
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
|
95
|
-
|
96
|
-
|
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
|
107
|
-
<% description
|
108
|
-
<% keywords
|
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
|
109
|
+
Also, the `set_meta_tags` method exists:
|
115
110
|
|
116
111
|
```erb
|
117
|
-
<%
|
118
|
-
|
119
|
-
|
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
|
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
|
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` |
|
158
|
-
| `:title` |
|
159
|
-
| `:description` |
|
160
|
-
| `:keywords` |
|
161
|
-
| `:charset` |
|
162
|
-
| `:prefix` |
|
163
|
-
| `:separator` |
|
164
|
-
| `:suffix` |
|
165
|
-
| `:lowercase` |
|
166
|
-
| `:reverse` |
|
167
|
-
| `:noindex` |
|
168
|
-
| `:index` |
|
169
|
-
| `:nofollow` |
|
170
|
-
| `:follow` |
|
171
|
-
| `:noarchive` |
|
172
|
-
| `:canonical` |
|
173
|
-
| `:prev` |
|
174
|
-
| `:next` |
|
175
|
-
| `:image_src` |
|
176
|
-
| `:og` |
|
177
|
-
| `:twitter` |
|
178
|
-
| `:refresh` |
|
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:
|
188
|
-
<%= display_meta_tags alternate: {
|
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: [
|
195
|
+
set_meta_tags title: ["part1", "part2"], site: "site"
|
197
196
|
# site | part1 | part2
|
198
|
-
set_meta_tags title: [
|
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
|
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: [
|
204
|
+
set_meta_tags keywords: ["tag1", "tag2"]
|
206
205
|
# tag1, tag2
|
207
206
|
```
|
208
207
|
|
209
|
-
|
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
|
-
|
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
|
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
|
226
|
+
title "my great view"
|
231
227
|
```
|
232
228
|
|
233
|
-
You get this open graph meta tag
|
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
|
-
|
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
|
241
239
|
|
242
|
-
|
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.
|
243
241
|
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
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`:
|
243
|
+
|
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:
|
251
|
+
|
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:
|
265
|
-
description:
|
266
|
-
keywords:
|
267
|
-
separator:
|
269
|
+
title: "Member Login",
|
270
|
+
description: "Member login page.",
|
271
|
+
keywords: "Site, Login, Members",
|
272
|
+
separator: "—".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
|
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
|
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:
|
301
|
+
set_meta_tags title: "Member Login"
|
299
302
|
# <title>Member Login</title>
|
300
|
-
set_meta_tags site:
|
303
|
+
set_meta_tags site: "Site Title", title: "Member Login"
|
301
304
|
# <title>Site Title | Member Login</title>
|
302
|
-
set_meta_tags site:
|
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
|
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
|
315
|
-
|
316
|
-
|
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: "
|
321
|
-
# <meta name="description" content="
|
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
|
-
|
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
|
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
|
338
|
+
set_meta_tags keywords: %w[keyword1 keyword2 keyword3]
|
339
339
|
# <meta name="keywords" content="keyword1, keyword2, keyword3">
|
340
340
|
```
|
341
341
|
|
342
|
-
|
342
|
+
It is recommended to keep the length of the keywords tag under **255 characters** or **20 words**.
|
343
343
|
|
344
|
-
|
345
|
-
|
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
|
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:
|
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
|
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
|
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:
|
381
|
+
set_meta_tags nofollow: "googlebot"
|
386
382
|
# <meta name="googlebot" content="nofollow">
|
387
383
|
```
|
388
384
|
|
@@ -393,24 +389,21 @@ Further reading:
|
|
393
389
|
|
394
390
|
### Follow
|
395
391
|
|
396
|
-
|
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
|
-
|
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
|
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.
|
411
404
|
|
412
|
-
|
413
|
-
set `MetaTags.config.skip_canonical_links_on_noindex = true` and we'll handle it for you.
|
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.
|
414
407
|
|
415
408
|
```ruby
|
416
409
|
set_meta_tags canonical: "http://yoursite.com/canonical/url"
|
@@ -424,18 +417,16 @@ Further reading:
|
|
424
417
|
|
425
418
|
### Icon
|
426
419
|
|
427
|
-
A favicon (short for Favorite icon), also known as a shortcut icon,
|
428
|
-
icon, tab icon or bookmark icon, is a file containing one or more small icons,
|
429
|
-
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.
|
430
421
|
|
431
422
|
```ruby
|
432
|
-
set_meta_tags icon:
|
423
|
+
set_meta_tags icon: "/favicon.ico"
|
433
424
|
# <link rel="icon" href="/favicon.ico" type="image/x-icon">
|
434
|
-
set_meta_tags icon:
|
425
|
+
set_meta_tags icon: "/favicon.png", type: "image/png"
|
435
426
|
# <link rel="icon" href="/favicon.png" type="image/png">
|
436
427
|
set_meta_tags icon: [
|
437
|
-
{
|
438
|
-
{
|
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"}
|
439
430
|
]
|
440
431
|
# <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96">
|
441
432
|
# <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32">
|
@@ -448,15 +439,14 @@ Further reading:
|
|
448
439
|
|
449
440
|
### Multi-regional and multilingual URLs, RSS and mobile links
|
450
441
|
|
451
|
-
Alternate link elements tell a search engine when there is content that's
|
452
|
-
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.
|
453
443
|
|
454
444
|
```ruby
|
455
|
-
set_meta_tags alternate: {
|
445
|
+
set_meta_tags alternate: {"fr" => "http://yoursite.fr/alternate/url"}
|
456
446
|
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
|
457
447
|
|
458
|
-
set_meta_tags alternate: {
|
459
|
-
|
448
|
+
set_meta_tags alternate: {"fr" => "http://yoursite.fr/alternate/url",
|
449
|
+
"de" => "http://yoursite.de/alternate/url"}
|
460
450
|
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
|
461
451
|
# <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de">
|
462
452
|
```
|
@@ -465,10 +455,10 @@ If you need more than just multi-lingual links, you can use an alternative synta
|
|
465
455
|
|
466
456
|
```ruby
|
467
457
|
set_meta_tags alternate: [
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
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
|
+
]
|
472
462
|
```
|
473
463
|
|
474
464
|
Further reading:
|
@@ -479,9 +469,7 @@ Further reading:
|
|
479
469
|
|
480
470
|
### Pagination links
|
481
471
|
|
482
|
-
Previous and next links indicate
|
483
|
-
URLs. Using these attributes is a strong hint to Google that you want us to
|
484
|
-
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.
|
485
473
|
|
486
474
|
```ruby
|
487
475
|
set_meta_tags prev: "http://yoursite.com/url?page=1"
|
@@ -497,10 +485,7 @@ Further reading:
|
|
497
485
|
|
498
486
|
### image_src links
|
499
487
|
|
500
|
-
Basically, when you submit/share this to Facebook
|
501
|
-
which image to put next to the link. If this is not present, Facebook tries to
|
502
|
-
put in the first image it finds on the page, which may not be the best one to
|
503
|
-
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.
|
504
489
|
|
505
490
|
```ruby
|
506
491
|
set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
|
@@ -509,24 +494,24 @@ set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
|
|
509
494
|
|
510
495
|
### amphtml links
|
511
496
|
|
512
|
-
AMP is a
|
513
|
-
two versions of the page – non-AMP and AMP, you can link the AMP version from
|
514
|
-
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:
|
515
498
|
|
516
499
|
```ruby
|
517
500
|
set_meta_tags amphtml: url_for(format: :amp, only_path: false)
|
518
501
|
# <link rel="amphtml" href="https://www.example.com/document.amp">
|
519
502
|
```
|
520
503
|
|
521
|
-
To link back to normal version, use `canonical
|
504
|
+
To link back to the normal version, use the `canonical` tag.
|
522
505
|
|
523
506
|
- [What Is AMP?](https://www.ampproject.org/learn/about-amp/)
|
524
507
|
- [Make Your Page Discoverable](https://www.ampproject.org/docs/guides/discovery)
|
525
508
|
|
526
509
|
### Manifest links
|
527
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
|
+
|
528
513
|
```ruby
|
529
|
-
set_meta_tags manifest:
|
514
|
+
set_meta_tags manifest: "manifest.json"
|
530
515
|
# <link rel="manifest" href="manifest.json">
|
531
516
|
```
|
532
517
|
|
@@ -534,17 +519,12 @@ set_meta_tags manifest: 'manifest.json'
|
|
534
519
|
|
535
520
|
### Refresh interval and redirect URL
|
536
521
|
|
537
|
-
Meta refresh is a method of instructing a web browser to automatically
|
538
|
-
refresh the current web page or frame after a given time interval. It is also
|
539
|
-
possible to instruct the browser to fetch a different URL when the page is
|
540
|
-
refreshed, by including the alternative URL in the content parameter. By
|
541
|
-
setting the refresh time interval to zero (or a very low value), this allows
|
542
|
-
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.
|
543
523
|
|
544
524
|
```ruby
|
545
525
|
set_meta_tags refresh: 5
|
546
526
|
# <meta content="5" http-equiv="refresh">
|
547
|
-
set_meta_tags refresh:
|
527
|
+
set_meta_tags refresh: "5;url=http://example.com"
|
548
528
|
# <meta content="5;url=http://example.com" http-equiv="refresh">
|
549
529
|
```
|
550
530
|
|
@@ -555,12 +535,12 @@ Further reading:
|
|
555
535
|
|
556
536
|
### Open Search
|
557
537
|
|
558
|
-
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.
|
559
539
|
|
560
540
|
```ruby
|
561
541
|
set_meta_tags open_search: {
|
562
542
|
title: "Open Search",
|
563
|
-
href:
|
543
|
+
href: "/opensearch.xml"
|
564
544
|
}
|
565
545
|
# <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml">
|
566
546
|
```
|
@@ -572,7 +552,7 @@ Further reading:
|
|
572
552
|
|
573
553
|
### Hashes
|
574
554
|
|
575
|
-
Any namespace can be
|
555
|
+
Any namespace can be created by simply passing a symbol name and a Hash. For example:
|
576
556
|
|
577
557
|
```ruby
|
578
558
|
set_meta_tags foo: {
|
@@ -587,11 +567,11 @@ set_meta_tags foo: {
|
|
587
567
|
|
588
568
|
### Arrays
|
589
569
|
|
590
|
-
Repeated meta tags can be
|
570
|
+
Repeated meta tags can be easily created by using an Array within a Hash. For example:
|
591
571
|
|
592
572
|
```ruby
|
593
573
|
set_meta_tags og: {
|
594
|
-
|
574
|
+
image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
|
595
575
|
}
|
596
576
|
# <meta property="og:image" content="http://example.com/rock.jpg">
|
597
577
|
# <meta property="og:image" content="http://example.com/rock2.jpg">
|
@@ -599,20 +579,17 @@ set_meta_tags og: {
|
|
599
579
|
|
600
580
|
### Open Graph
|
601
581
|
|
602
|
-
To turn your web pages into graph objects, you'll need to add Open Graph
|
603
|
-
protocol `<meta>` tags to your webpages. The tags allow you to specify
|
604
|
-
structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today
|
605
|
-
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:
|
606
583
|
|
607
584
|
```ruby
|
608
585
|
set_meta_tags og: {
|
609
|
-
title:
|
610
|
-
type:
|
611
|
-
url:
|
612
|
-
image:
|
613
|
-
video:
|
614
|
-
director:
|
615
|
-
writer:
|
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/"]
|
616
593
|
}
|
617
594
|
}
|
618
595
|
# <meta property="og:title" content="The Rock">
|
@@ -628,19 +605,21 @@ Multiple images declared as an **array** (look at the `_` character):
|
|
628
605
|
|
629
606
|
```ruby
|
630
607
|
set_meta_tags og: {
|
631
|
-
title:
|
632
|
-
type:
|
633
|
-
url:
|
634
|
-
image:
|
635
|
-
|
636
|
-
|
637
|
-
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
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
|
+
]
|
644
623
|
}
|
645
624
|
# <meta property="og:title" content="Two structured image properties">
|
646
625
|
# <meta property="og:type" content="website">
|
@@ -657,10 +636,10 @@ Article meta tags are supported too:
|
|
657
636
|
|
658
637
|
```ruby
|
659
638
|
set_meta_tags article: {
|
660
|
-
published_time:
|
661
|
-
modified_time:
|
662
|
-
section:
|
663
|
-
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"
|
664
643
|
}
|
665
644
|
# <meta property="article:published_time" content="2013-09-17T05:59:00+01:00">
|
666
645
|
# <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00">
|
@@ -675,8 +654,7 @@ Further reading:
|
|
675
654
|
|
676
655
|
### Twitter Cards
|
677
656
|
|
678
|
-
Twitter cards make it possible for you to attach media experiences to Tweets that link to your content.
|
679
|
-
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:
|
680
658
|
|
681
659
|
```ruby
|
682
660
|
set_meta_tags twitter: {
|
@@ -687,17 +665,17 @@ set_meta_tags twitter: {
|
|
687
665
|
# <meta name="twitter:site" content="@username">
|
688
666
|
```
|
689
667
|
|
690
|
-
Take
|
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.
|
691
669
|
|
692
|
-
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`
|
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:
|
693
671
|
|
694
672
|
```ruby
|
695
673
|
set_meta_tags twitter: {
|
696
|
-
card:
|
674
|
+
card: "photo",
|
697
675
|
image: {
|
698
|
-
_:
|
699
|
-
width:
|
700
|
-
height: 100
|
676
|
+
_: "http://example.com/1.png",
|
677
|
+
width: 100,
|
678
|
+
height: 100
|
701
679
|
}
|
702
680
|
}
|
703
681
|
# <meta name="twitter:card" content="photo">
|
@@ -706,16 +684,16 @@ set_meta_tags twitter: {
|
|
706
684
|
# <meta name="twitter:image:height" content="100">
|
707
685
|
```
|
708
686
|
|
709
|
-
|
687
|
+
A special parameter `itemprop` can be used on an "anonymous" tag "\_" to generate the "itemprop" HTML attribute:
|
710
688
|
|
711
689
|
```ruby
|
712
690
|
set_meta_tags twitter: {
|
713
|
-
card:
|
691
|
+
card: "photo",
|
714
692
|
image: {
|
715
|
-
_:
|
716
|
-
width:
|
717
|
-
height:
|
718
|
-
itemprop: "image"
|
693
|
+
_: "http://example.com/1.png",
|
694
|
+
width: 100,
|
695
|
+
height: 100,
|
696
|
+
itemprop: "image"
|
719
697
|
}
|
720
698
|
}
|
721
699
|
# <meta name="twitter:card" content="photo">
|
@@ -730,7 +708,7 @@ Further reading:
|
|
730
708
|
|
731
709
|
### App Links
|
732
710
|
|
733
|
-
App Links is an open cross
|
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:
|
734
712
|
|
735
713
|
```ruby
|
736
714
|
set_meta_tags al: {
|
@@ -751,8 +729,7 @@ Further reading:
|
|
751
729
|
|
752
730
|
### Custom meta tags
|
753
731
|
|
754
|
-
Starting from version 1.3.1, you can specify arbitrary meta tags, and they will
|
755
|
-
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.
|
756
733
|
|
757
734
|
Example:
|
758
735
|
|
@@ -761,15 +738,14 @@ set_meta_tags author: "Dmytro Shteflyuk"
|
|
761
738
|
# <meta name="author" content="Dmytro Shteflyuk">
|
762
739
|
```
|
763
740
|
|
764
|
-
You can also specify value as an Array, and values will be displayed as a list
|
765
|
-
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:
|
766
742
|
|
767
743
|
```ruby
|
768
|
-
set_meta_tags author: [
|
744
|
+
set_meta_tags author: ["Dmytro Shteflyuk", "John Doe"]
|
769
745
|
# <meta name="author" content="Dmytro Shteflyuk">
|
770
746
|
# <meta name="author" content="John Doe">
|
771
747
|
```
|
772
748
|
|
773
749
|
## Maintainers
|
774
750
|
|
775
|
-
[Dmytro Shteflyuk](https://github.com/kpumuk), [https://
|
751
|
+
[Dmytro Shteflyuk](https://github.com/kpumuk), [https://dmytro.sh](https://dmytro.sh)
|