metaタグの基本をおさらい！

metaタグは、ページを閲覧するユーザーではなく

検索エンジンやブラウザに向けにWebページについての説明を行います。

ユーザーはあまり見る事の無いheadタグ内に書くタグになりますが、記述次第ではSEO対策にもつながる重要なタグです。

htmlを記述するのに必ず必要な「meta charset」「title」以外にも

設定すると良いmetaタグを紹介します。

基本のmetaタグ

description

<meta name="description" content="サイトの概要" >

サイトの概要を説明するタグです。

こちらは検索結果の詳細分にも反映されるため、ユーザーも触れる機会が多く

検索結果のフォーマット上120文字程度が良いとされます。

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">

スマートフォンなどのモバイル端末での表示を適応化するタグです。

基本的には暗記・コピペでOKですが、各構文を理解しておくとより良いでしょう。

ちなみに私はiPhoneX対応用に「viewport-fit=cover」を設定しています。

OGPタグ

<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの概要文">
<meta property="og:type" content="ページの種類">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="サムネイル画像">

SNSでリンクをシェアされた際に表示させるコンテンツを指定するタグです。

noindex nofollow

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

検索エンジンのクローラーにページを登録させないように設定するタグです。

不要なページを検索結果から除外する事でSEOの向上に繋がります。

こんな設定にも！

電話番号自動リンクの無効化

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

主にiPhone用の設定ですが、上記のように記述すると

000-0000-0000のような数列に電話の発信機能が自動でリンクされる設定を無効化してくれます。

iPhoneユーザーの割合を考えても設定するとより良いサイトの制作に繋がるでしょう。

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。