metaタグ（メタタグ）とは？SEO対策のためのメタタグの書き方

2022.2.14

metaタグ（メタタグ）とは？SEO対策のためのメタタグの書き方

メタタグとは

メタタグとはwebサイトの情報を記載しているタグのことで、検索エンジンにWebサイトの情報を伝える役割を果たします。
ここでは、設定しておくべきメタタグ、必要に応じて便利なメタタグをご紹介します。

メタタグ一覧

キャラセット

文字コードを指定する為のタグです。

<meta charset="utf-8">

ビューポート

スマホやタブレットでの表示を最適化させるためのタグです。

<meta name="viewport" content="width=device-width,initial-scale=1">

IE向け

「X-UA-Compatible」とは、ここで指定した互換モードで表示させることができます。
「IE=edge」とは、IEでサイトを表示する場合インストール済みの最新のIEのバージョンで表示されます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

検索避け

「noindex」…　検索結果に登録しない
「nofollow」…　ページ内のリンクを辿らない
「noarchive」…　検索エンジンのアーカイブに登録しない

<meta name="robots" content="noindex,nofollow,noarchive">

タイトルタグ

タイトルタグはページのタイトルであり、検索結果ページに表示されSEOに直接関係するタグとなります。
30字程度で設置しましょう。

<title>サイトタイトル</title>

メタディスクリプション

ページの概要を120字程度で設定します。メタディスクリプションは検索結果ページに表示されるページ説明文となり、SEOに直接効果があるわけではありませんが、ユーザーがページを表示するかどうかの判断基準となります。

<meta name="description" content="120字程度でページの説明文を記載">

キーワード

ページ内のキーワードを記載「,」カンマで区切ります。検索順位には影響しません。
書かなくても問題ありません。

<meta name="keywords" content="キーワード01,キーワード02,キーワード03">

電話番号やメールアドレスをリンクに変換しない

スマホではメールアドレスや電話番号が勝手にリンクになってしまいます。
そこで、勝手にリンクに変換させない様にメタタグを入れておきます。

<meta name="format-detection" content="email=no,telephone=no,address=no">

Google翻訳で翻訳させない

このタグを設置していると、Google翻訳で翻訳されません。

<meta name="google" content="notranslate">

urlを正規化

重複コンテンツがあると、Googleからの評価が下がってしまうなど、SEOに影響が出ます。
canonicalタグを設置して、クローラーに対して優先度の高いページを伝えましょう。

<link rel="canonical" href="正規化するurl">

リダイレクト

リダイレクトは.htaccessでリダイレクトを記載すると思いますが、なぜか反映されない、動かない、.htaccessを触れない！？といったこともごくまれにあります。
そんな時はページ内にメタタグを記載してリダイレクトできます。
秒数は0でOK！！

<meta http-equiv="refresh" content="秒数;URL=URL">

メタタグ一気載せ

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="format-detection" content="email=no,telephone=no,address=no">
    <meta name="google" content="notranslate" />
    <title>サイトタイトル</title>
    <meta name="keywords" content="キーワード01,キーワード02,キーワード03">
    <meta name="description" content="120字程度でページの説明文を記載">
    <link rel="canonical" href="正規化するurl">
    <meta property="og:site_name" content="サイト名" />
    <meta property="og:title" content="ページタイトル" />
    <meta property="og:type" content="website" /> 
    <meta property="og:url" content="ページのurl" />
    <meta property="og:image" content="シェアされた時のサムネイル" />
    <meta property="fb:app_id" content="アプリid" />
    <meta property="og:description" content="ページの説明"/>
    <meta property="og:locale" content="ja_JP" />
    <meta name="twitter:card" content="カード表示の種類" />
    <meta name="twitter:site" content="@ユーザー名" />
    <meta name="twitter:description" content="ページの説明" />
    <meta name="twitter:image:src" content="投稿時の画像" />
</head>