meta-tagって何？

前回の記事で少し説明したmeta-tagの説明をします。

meta-tagsとは、SEO対策のうちの１つで絶対設定した方がいいものです。

これを設定することでサイト名やタイトル名の他

OGP設定や、Google検索に載せたくないページを設定することができます。

僕のブログサイトももちろん設定しています。

これはOGP設定した後のGoogle検索上で出た僕のサイトになります。

他にもフェイスブックのOGPやTwitterのOGPも設定できます。

TwitterでのOGPはこんな感じになっています。

いいね少ないけど気にしないで下さいね...。

これから伸びっから....違う記事で....w

とまーこんな感じの設定ができちゃうのでぜひやってみて下さい！

ここから導入するやり方

gem 'meta-tags'

bundle install

bin/rails g meta_tags:install

# frozen_string_literal: true

# Use this setup block to configure all options available in MetaTags.
MetaTags.configure do |config|
  # How many characters should the title meta tag have at most. Default is 70.
  # Set to nil or 0 to remove limits.
  # config.title_limit = 70

  # When true, site title will be truncated instead of title. Default is false.
  # config.truncate_site_title_first = false

  # Maximum length of the page description. Default is 300.
  # Set to nil or 0 to remove limits.
  # config.description_limit = 300

  # Maximum length of the keywords meta tag. Default is 255.
  # config.keywords_limit = 255

  # Default separator for keywords meta tag (used when an Array passed with
  # the list of keywords). Default is ", ".
  # config.keywords_separator = ', '

  # When true, keywords will be converted to lowercase, otherwise they will
  # appear on the page as is. Default is true.
  # config.keywords_lowercase = true

  # When true, the output will not include new line characters between meta tags.
  # Default is false.
  # config.minify_output = false

  # When false, generated meta tags will be self-closing (<meta ... />) instead
  # of open (`<meta ...>`). Default is true.
  # config.open_meta_tags = true

  # List of additional meta tags that should use "property" attribute instead
  # of "name" attribute in <meta> tags.
  # config.property_tags.push(
  #   'x-hearthstone:deck',
  # )
end

OGPの設定

デフォルトのmeta-tagsの設定

def default_meta_tags
    {
      site: 'PGMG',
      title: 'トップページ',
      reverse: true,
      charset: 'utf-8',
      description: '初学者がRuby on Railsで製作 ご訪問ありがとうございます。​こちらは初学者の僕が独学で勉強して製作したブログサイトになります。僕が勉強した事や、このBlogサイトのUPDATE（デザインや機能追加）する度に記事に残して少しでも同じ初学者の力になれればいいなと思います。そして自分自身もどんどん成長していきたいのでどんなことでもいいです、助言していただければ嬉しいです。',
      keywords: 'Rails,Ruby,プログラミング',
      canonical: request.original_url,
      separator: '|',
      icon: [
        { href: asset_pack_url('media/images/favicon.ico')},
        { href: asset_pack_url('media/images/meta_tags.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: request.original_url,
        image: asset_pack_url('media/images/chomeko blog....jpg'),
        local: 'ja-JP',
      },
      twitter: {
        card: 'summary',
        site: '@chomeko3o',
        image: asset_pack_url('media/images/twitter_icon.png'),
        width: 100,
        height: 100
      }
    }
  end

•  site: 'PGMG',

• title: 'トップページ',

• reverse: true,

•  charset: 'utf-8',

• description:

•  keywords:

• canonical:

•  separator:

•  icon:

• site_name: :site,

•  title: :title,

• description: :description,

• type: 'website',

• url: request.original_url,

•  image: asset_pack_url('media/images/chomeko blog....jpg'),

•  local: 'ja-JP',

•  card: 'summary',

•  site: '@chomeko3o',

•  image: asset_pack_url('media/images/twitter_icon.png'),

•  width: 100,
  height: 100

ハマったポイント

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'

asset_pack_url('media/images/twitter_icon.png')

<％= display_meta_tags（default_meta_tags）％>

<% set_meta_tags title: @blog.title , description: @blog.body.to_s.gsub(/\r\n|\r|\n|\s|\t/, ""), og:{image: image_url(url_for(@blog.image))}, twitter:{image: image_url(url_for(@blog.image))}%>

<％= display_meta_tags（default_meta_tags）％>

og{image:image_url(url_for(@blog.image))},

image_url(url_for(@blog.image))

twitter:{image: image_url(url_for(@blog.image))}%>

<％= display_meta_tags（default_meta_tags）％>

Google検索に載せたくないページ

<% set_meta_tags noindex: true %>

<meta name="robots" content="noindex">