mirror of
https://github.com/jbranchaud/til
synced 2026-01-03 23:28:02 +00:00
Add Set Meta Tags In ERB Views as a Rails TIL
This commit is contained in:
@@ -10,7 +10,7 @@ pairing with smart people at Hashrocket.
|
|||||||
|
|
||||||
For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
|
For a steady stream of TILs, [sign up for my newsletter](https://crafty-builder-6996.ck.page/e169c61186).
|
||||||
|
|
||||||
_1577 TILs and counting..._
|
_1578 TILs and counting..._
|
||||||
|
|
||||||
See some of the other learning resources I work on:
|
See some of the other learning resources I work on:
|
||||||
- [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
|
- [Ruby Operator Lookup](https://www.visualmode.dev/ruby-operators)
|
||||||
@@ -1074,6 +1074,7 @@ See some of the other learning resources I work on:
|
|||||||
- [Set DateTime To Include Time Zone In Migrations](rails/set-datetime-to-include-time-zone-in-migrations.md)
|
- [Set DateTime To Include Time Zone In Migrations](rails/set-datetime-to-include-time-zone-in-migrations.md)
|
||||||
- [Set Default As SQL Function In Migration](rails/set-default-as-sql-function-in-migration.md)
|
- [Set Default As SQL Function In Migration](rails/set-default-as-sql-function-in-migration.md)
|
||||||
- [Set default_url_options For Entire Application](rails/set-default-url-options-for-entire-application.md)
|
- [Set default_url_options For Entire Application](rails/set-default-url-options-for-entire-application.md)
|
||||||
|
- [Set Meta Tags In ERB Views](rails/set-meta-tags-in-erb-views.md)
|
||||||
- [Set Schema Search Path](rails/set-schema-search-path.md)
|
- [Set Schema Search Path](rails/set-schema-search-path.md)
|
||||||
- [Set Statement Timeout For All Postgres Connections](rails/set-statement-timeout-for-all-postgres-connections.md)
|
- [Set Statement Timeout For All Postgres Connections](rails/set-statement-timeout-for-all-postgres-connections.md)
|
||||||
- [Set The Default Development Port](rails/set-the-default-development-port.md)
|
- [Set The Default Development Port](rails/set-the-default-development-port.md)
|
||||||
|
|||||||
52
rails/set-meta-tags-in-erb-views.md
Normal file
52
rails/set-meta-tags-in-erb-views.md
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
# Set Meta Tags In ERB Views
|
||||||
|
|
||||||
|
There are all kinds of meta tags that we may want to set for the pages that our
|
||||||
|
Rails app serves. A lot of these are for SEO and social sharing. Let's look at
|
||||||
|
how to add `og:description` meta tags to our views.
|
||||||
|
|
||||||
|
I'll start with a helper method in `app/helpers/application_helper.rb`:
|
||||||
|
|
||||||
|
```ruby
|
||||||
|
module ApplicationHelper
|
||||||
|
def meta_description(desc)
|
||||||
|
content_for(:description) { desc }
|
||||||
|
end
|
||||||
|
end
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, I'll update my `app/views/layouts/application.html.erb` to consume the
|
||||||
|
description when provided.
|
||||||
|
|
||||||
|
```ruby
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- ... -->
|
||||||
|
|
||||||
|
<meta
|
||||||
|
property="og:description"
|
||||||
|
content="<%= content_for?(:description) ? yield(:description) : 'Default description' %>"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- ... -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<!-- ... -->
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
Now I have a default description for all my views that I can override as needed
|
||||||
|
with the `meta_description` helper.
|
||||||
|
|
||||||
|
```ruby
|
||||||
|
# app/views/posts/show.html.erb
|
||||||
|
<%= meta_description @post.body.split("\n").first %>
|
||||||
|
|
||||||
|
<!-- ... -->
|
||||||
|
```
|
||||||
|
|
||||||
|
If I reload the page and inspect the meta tags in `<head>`, I should find the
|
||||||
|
`og:description` tag with the corresponding value.
|
||||||
|
|
||||||
|
This can be extended to apply all the different meta tags (e.g. Open Graph and
|
||||||
|
Twitter) to make links to these pages render well across the internet.
|
||||||
Reference in New Issue
Block a user