Neste Screencast você vai aprender como melhorar rapidamente o SEO do seus APPs Ruby On Rails através do uso de três gems fáceis de usar.
Caso você ainda não conheça, SEO é uma técnica de otimização que tem como objetivo aumentar o trafego orgânico do seu site através do melhoramento no ranking dos mecanismos de busca.
Portanto, se você deseja que seus projetos tenha mais visibilidade é fundamental melhorar o SEO deles, fazer isso no Ruby On Rails é especialmente simples, então vem com a gente aprender essas técnicas 💪😁
Ferramentas utilizadas:
-
Ruby
-
Ruby On Rails
-
FriendlyId (gem): https://github.com/norman/friendly_id
-
MetaTags (gem): https://github.com/kpumuk/meta-tags
-
SitemapGenerator (gem): https://github.com/kjvarga/sitemap_generator
Preparando o Projeto de exemplo
1 – Gere seu projeto rodando:
|
1 |
rails new seo |
2 – Entre no projeto:
|
1 |
cd seo |
3 – Gere o Scaffold Article rodando:
|
1 |
rails g scaffold Article title body |
4 – Crie o banco de dados e rode:
|
1 |
rails db:create db:migrate |
Urls amigáveis
1 – Coloque no Gemfile:
|
1 |
gem 'friendly_id', '~> 5.2.4' |
2 – Instale a biblioteca rodando:
|
1 |
bundle install |
3 – Inclua o Slug na tabela Article rodando:
|
1 |
rails g migration AddSlugToArticles slug:uniq |
4 – Gere a configuração do FriendlyId:
|
1 |
rails generate friendly_id |
5 – Atualize o Model do Article:
|
1 2 3 4 |
class Article < ApplicationRecord extend FriendlyId friendly_id :title, use: :slugged end |
6 – Atualize o set_article do Controller Article:
|
1 2 3 |
def set_article @article = Article.friendly.find(params[:id]) end |
Meta Tags
1 – Coloque no seu Gemfile:
|
1 |
gem 'meta-tags' |
2 – Instale rodando:
|
1 |
bundle install |
3 – Para gerar o arquivo de configurações rode:
|
1 |
rails generate meta_tags:install |
4 – Na view application.html.erb substitua:
|
1 |
<title>...</title> |
por:
|
1 |
<%= display_meta_tags site: 'OneBitCode' %> |
5 – Na view articles/show.html.erb substitua:
|
1 2 3 4 |
<p> <strong>Title:</strong> <%= @article.title %> </p> |
por:
|
1 |
<h1><%= title @article.title %></h1> |
6 – Inclua na primeira linha da view articles/show.html.erb:
|
1 |
<% description @article.body %> |
7 – Inclua no começo da view articles/show.html.erb:
|
1 2 3 4 5 6 7 |
<% set_meta_tags og: { title: @article.title, description: @article.body, type: 'article', url: 'https://onebitcode.com/meu-seo', image: 'https://onebitcode.com/meu-seo/img.png', } %> |
Sitemap
1 – Inclua a gem no seu Gemfile:
|
1 |
gem 'sitemap_generator' |
2 – Instale rodando:
|
1 |
bundle install |
3 – Crie o arquivo de configuração rodando:
|
1 |
bundle exec rake sitemap:install |
4 – Atualize o config/sitemap.rb colocando o nome do seu site:
|
1 |
SitemapGenerator::Sitemap.default_host = "https://www.onebitcode.com" |
5 – Atualize novamente sua configuração para incluir os links para o index do articles e também para cada um dos articles:
|
1 2 3 4 |
add articles_path, :priority => 0.7, :changefreq => 'daily' Article.all.each do |article| add article_path(article), :lastmod => article.updated_at end |
6 – Para criar o sitemap (ou atualizar) rode:
|
1 |
rails sitemap:refresh |
7 – Inclua no robots.txt o link para o sitemap (colocando seu site):
|
1 |
Sitemap: https://www.onebitcode.com/sitemap.xml.gz |
Neste Screencast você aprendeu como realizar melhorias básicas no SEO do seu site Ruby On Rails através do uso de algumas gems, para se aprofundar no tema vale a pena olhar a documentação das Gems e os links técnicos a baixo.
Links para aprender mais sobre SEO:
-
Meta Tags: https://www.seomarketing.com.br/meta-tags-google.php
-
URls é o SEO: https://neilpatel.com/br/blog/url-amigavel-seo/
Se você curtiu esse Screencast deixa um comentário e compartilha o link dele com seus amigos(as) programadores(as), isso realmente incentiva a continuação do nosso trabalho 💪😁
Muito obrigado,
Não perca nenhum conteúdo
Receba nosso resumo semanal com os novos posts, cursos, talks e vagas o/
Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!
O OneBitCode traz conteúdos de qualidade, e em português, sobre programação com foco em Ruby on Rails e também JavaScript.
Além disso, aqui sempre levamos à você conteúdos valiosos sobre a carreira de programação, dicas sobre currículos, portfólios, perfil profissional, soft skills, enfim, tudo o que você precisa saber para continuar evoluindo como Programador(a)!
Fique por dentro de todos os conteúdos o/
Nossas redes sociais:
📹 • https://youtube.com/Onebitcode [Live todas as terças-feiras às 19h)
💻 • https://linkedin.com/company/onebitcode
🙂 • https://facebook.com/onebitcode
📱 • https://instagram.com/one_bit_code
🐦 • https://twitter.com/onebitcode
Nossos cursos:
🥇 • Programador Full Stack Javascript em 8 Semanas
💎 • Curso Completo de Ruby
⚙ • Minicurso: API Rails 5 Completo
🐞 • Minicurso de Testes para Ruby on Rails com RSpec
Espero que curta nossos conteúdos e sempre que precisar de ajuda, fala com a gente!
Estamos aqui para você 🙂
Bem-vindo à família OneBitCode o/
seria bom se o link do metatags fosse dinâmico tambem para cada post
<% set_meta_tags og: {
title: @article.title,
description: @article.body,
type: ‘article’,
url: ‘https://onebitcode.com/‘ + “#{@article.slug}”,
image: ‘https://onebitcode.com/meu-seo/img.png’,
} %>
Gracias, esto de incluir SEO a mis desarrollos, es lo que me hacía falta.