메타 태그를 설정하여 Rails 애플리케이션을 SEO 친화적으로 만드십시오.

5374 단어 webdevrailsoptimizationseo
roserodionova/Freepik에 의해 설계됨

SEO 및 메타 태그



검색 엔진 최적화(SEO)는 검색 엔진에서 웹 사이트로의 트래픽 양과 품질을 높이는 방법입니다. 소셜 미디어에서 웹사이트를 공유하는 것은 웹사이트의 SEO를 개선하는 데 매우 중요합니다.

메타 태그는 검색 엔진에 웹 페이지에 대한 정보(메타데이터)를 제공하는 HTML 태그 유형입니다. 페이지 자체에는 표시되지 않습니다. 검색 엔진은 이 메타데이터를 사용하여 크롤링 및 인덱싱을 위한 웹 페이지에 대한 추가 정보를 이해합니다.

개방형 그래프 프로토콜



Open Graph는 개발자가 소셜 미디어에서 웹사이트를 공유할 때 미리보기를 제어할 수 있는 프로토콜입니다. 요즘 소셜 미디어에서 매력적인 이미지와 눈에 띄는 설명이 있는 웹 사이트의 풍부한 미리보기를 보는 것이 매우 일반적입니다.

구현



메타 태그 gem 설치


meta-tags 보석을 Gemfile에 추가합니다.

gem 'meta-tags'


그리고 번들 설치 명령을 실행하십시오.

구성




# app/helpers/application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'MyMovies.dev',
      title: 'MyMovies',
      reverse: true,
      separator: '|',
      description: 'The most popular movie website in the world',
      keywords: 'action, horror, drama',
      canonical: request.original_url,
      noindex: !Rails.env.production?,
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'MyMovies.dev',
        title: 'MyMovies',
        description: 'The most popular movie website in the world', 
        type: 'website',
        url: request.original_url,
        image: image_url('login-page.png')
      }
    }
  end
end


이미지 파일은 app/assets/images에 있어야 합니다. Open Graph 이미지의 표준 크기는 1200×627px입니다.

보기에 메타 태그 추가



메타 태그를 설정하려면 기본 레이아웃에 다음을 추가하세요.

# app/views/layouts/application.html.erb

<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>


그러면 app/helpers/application-helper.rb에서 구성한 기본 메타 태그가 표시됩니다. 이는 특히 웹사이트의 각 페이지에 메타 태그를 설정하지 않은 경우에 필요합니다.

이제 개별 페이지에 대한 메타 태그를 설정해 보겠습니다. html.erb 파일의 시작 부분에서:

<% set_meta_tags title: 'Contact page', description: 'Contact us from...' %>

<head> 태그가 <head> 에서 공유되는 경우 app/views/layouts/application.html.erb 태그 안에 배치할 필요가 없습니다.


이거 야! 메타 태그가 어떻게 설정되어 있는지 확인하려면 웹 사이트로 이동하여 페이지 소스를 보십시오.
게임을 하기 위해서 삼각함수를 배웁니다.
SpriteKit의 여섯 캐릭터를 학급화하고 무적의 시간을 갖도록 하겠습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage