creatersnest51

サイトを作るとき、必ずmetaタグに書くべきことまとめ


ホームページを作る際に忘れていけないのは、metaタグの設定です。
metaタグは、ホームページの各種情報を記載するため重要なタグとなっております。
きちんと設定しないと、検索エンジンで検索したとき、検索結果に表示されません。
ですので、ホームページサイトを作る時には、必ずmetaタグの情報をきちんと設定しましょう。

ページの概要を説明するdescription属性

どんなサイトか分かるように説明されてます。

記載例:<meta name=”description” content=”ここに詳細情報を記入します” />

yahooやgoogle等の検索エンジンに向けての「ページ概要説明文」を記入します。
また、ここに記入された文章は、検索結果画面でタイトルの下に表示されます。
ターゲットにアピールする場所でもあるので、しっかり設定しましょう。

<ポイント>
〇文字数は最大120文字程度まで表示される(スマートフォンの場合は50文字程度)
〇検索キーワードは、検索した際タイトル下の紹介文の中で太字で表示される
〇各ページ、必ず違う文章を入力する

 

ターゲットを誘導するkeyword属性

記載例:<meta name=”keywords” content=”…, …” />

meta keywordsは、スパム業者が検索エンジンを騙すために好んで使われたので、
現在、主流検索エンジンは、meta keywordsを見ていないといわれております。
ただし、他の検索エンジンで使われている可能性があるので、
念のために入れておきましょう。

<ポイント>
〇タイトルや本文で、特に重要だと思われるキーワードを使う
〇関連語や表記ゆれ(「サーバー」と「サーバ」等)を入れる
〇キーワードの設定数は3~5個に絞る
(多すぎると検索エンジンを騙そうとしているとみなされるためです)
※複数のキーワードを設定する際は、キーワードを「,(コンマ)」で区切ります。

 

誰が書いたのか分かるauthor属性

記載例:<meta name=”author” content=”ここに著作権表記”>

HTML5では、descriptionやkeywordsだけではなく、authorの記述も
記載するように、推奨されております。

 

検索エンジンに存在を知らせるrobot属性

検索エンジンから見つけられる

記載例:<meta name=”robots” content=”…, …” />

robotタグは、クロールとインデックス登録を制御するタグです。
インデックス登録されたくない時や、コンテンツの質が低いと思われる
ページをgoogleに見せたくない・登録させたくない時に使います。

<主に使う値>
・noindex: ページをインデックスに登録しないようにします
・nofollow: Googlebotがページのリンクを追跡しないようにします
・noimageindex: Google の検索結果に表示される画像の参照元ページとして、ページを表示しないようにします
※複数の値を指定するときは、値を「,(コンマ)」で区切ります。

 

これから重要視されるスマホ対策~viewport属性~

スマートフォンを操作する女性

記載例:<meta name=”viwport” content=”…, …” />

スマートフォン向けに、文章の表示方法を指定するタグです。

googleが検索結果に、ホームページがスマートフォンに対応しているか、
2015年4月21日より検索結果に表示することを公式発表しました。
また、スマートフォンに最適化しているか検索ランキング要素として使用することも
発表されました。(スマートフォンの検索ランキングのみ、適用されます)

スマートフォンユーザーの数は増えつつありますので、
しっかり対応していきましょう。

<主に使う値>
・initial-scale: ホームページが最初に読み込まれた時の拡大・縮小率を指定します
・width: 表示する幅を指定します。初期値は980pxです

 

 SNSできちんと宣伝するOGP属性

facebookやSNSでの設定

OGP”Open Graph Protocol”はfacebook等のSNSと連携を取るために
設定する記述です。

例えば、OGPを設定せず自社のホームページ更新をfacebookで
紹介するとします。そこで「いいね」を押したとしても、
フィードには、「〇〇さんが、リンクについていいね!と言ってます」と
ウォールに表示されるだけで、ニュースフィールドには投稿されません。

OGPを設定する・しないでSNSでの表示のされ方が違うので
SNSを使って集客をしたい人は、きちんと設定しましょう。

<設定する値>
<meta property="og:title" content="ページの名前を書きます" />
<meta property="og:type" content="ページが何のページであるか記載します(blog,website,cafeなど)" />
<meta property="og:url" content="ホームページのURLを書きます" />
<meta property="og:image" content="サムネイルの画像のURLを書きます" />
<meta property="og:site_name" content="ホームページの名前を書きます" />
<meta property="og:description" content="ホームページの説明文を入れて下さい" />

 

文字化けを防ぐcharset属性

記載例:<meta http-equiv=”Content-Type” content=”text/html; charset=…”>

文字エンコーティングを指定するために使われます。
1ペ-ジに使えるのは、1つのみで複数設定できません。

必須というわではありませんが、これを設定することによって、
日本語で作成されたホームページに海外版のブラウザでアクセスした際、
文字化けするというトラブルを未然に防ぐことができます。

utf-8・shift_jis・euc-jp等ありますが、shift_jisを使うことによって、
使えないプログラムもありますので、utf-8での設定をおすすめします。

 

海外からのユーザー対策にcontent-language属性


海外からホームページにアクセスする男性

記載例:<meta http-equiv=”content-language” content=”…….”>

そのコンテンツの主言語を指定します。
そうすることで、海外からのユーザーがホームページに来た際に
ユーザーのブラウザーが対応していれば、
「この言語は○○語表記ですが、翻訳しますか?」とアラートを出してくれます。

<表記例>
日本語:content=”ja”、
英語:content=”en”
中国語:content=”zh”
韓国語:content=”ko”
ギリシャ語:content=”el”

 

まとめ

ホームページを作って、サーバーにアップしただけでは、
yahooやgoogle等の検索ページに掲載されません。

まずは、検索エンジンにホームページの存在を知ってもらう事。
次に、ホームページに来てもらうユーザーに
ホームページを知ってもらうために、必須なmetaタグを紹介しました。

どれも、これからホームページを作成する時に必要なmetaタグですので、
忘れずに設定するようにしましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next ArticleHTML5で進化したフォームの機能と実装の仕方が分かる!おすすめ記事20選