SEOにも重要なmetaタグの意味と書き方メタタグ(meta要素)とは何か、HTMLのどこに書くのか、という基本から、最低限書いておきたい3つのmetaタグ、charset、description、viewportの書き方を解説。Cardsの書き方、メタタグの簡単な確認方法も紹介。SEOやアクセス向上に役立つメタタグをしっかり押さえておきましょう。文宏ホームページ作成ガイドメタタグとは?メタタグとは、メタデータを記述しておくためのタグのことで、HTMLではmeta要素と呼ばれます。メタデータとは、データを記述するためのデータのことで、それ自体に特定の意味があるわけではありません。そのウェブページに関する様々な情報を付加する用途に使われます。書いておきたいメタタグとして、文字コード(charset)、要約文(description)、ビューポート(viewport)の3点があります。今回は、ウェブページとして公開するHTMLソース内に「これだけは書いておきたい!」というメタタグの書き方を中心に、メタタグの意味や用途などの全般をご紹介いたします。ツイート内に表示されるメタタグの書き方メタタグの確認方法メタタグ(metaタグ)の書き方と記述場所メタタグ(metaタグ)とも呼ばれるHTMLのmeta要素は、開始タグだけがあって終了タグのない空要素です。HTMLでは以下のような感じでタグを記述します。」で終わる形でタグを記述します。/>HTML5の場合はどちらの書き方を使っても構いません。name属性値にメタデータの名称を指定し、content属性値にメタデータの中身を指定する書き方が多いですが、すべてがこの書式というわけではありません。このメタタグの用途は多種ありますが、どの場合でもHTMLソースのhead要素内(=<head>~</head>の間)に記述します。冒頭でも述べた通り、meta要素とはメタデータを記述するための要素であり、meta要素そのものに特定の意味はありません。meta要素の意味を強いて言えば「何らかのデータを記述するための要素」です。HTMLでは主に、そのウェブページに関係する様々な情報を付加しておく用途に使われます。■meta要素を使わずに記述するメタデータもあるウェブページのタイトルを表すtitle要素もメタデータの一種ですし、適用するCSSを指定するlink要素もメタデータの一種です。meta要素は、それらのような専用の書き方(要素)が用意されていないメタデータ全般を記述するために使われます。■meta要素の用途は様々meta要素を使って記述するメタデータには、ウェブページの表示に影響する記述もあれば、まったく何にも関係しない記述もあります。ウェブページの描画には関係なくても、検索サイトの検索結果ページに反映される記述もありますし、表示には一切関係しないものの「そのウェブページの所有権」を確認する目的で指定の文字列を記述しておく用途に使われることもあります。そのように多岐にわたる様々な情報の記述に使われるのがmeta要素です。使われるmeta要素だけでも多数あるため、本記事ではぜひ書いておきたいmeta要素だけに絞って紹介します。HTMLソースにこれだけは書いておきたいメタタグ3つHTMLソース内に記述できるメタタグ(meta要素)は多数ありますが、ウェブ上で一般公開するページであれば「これだけは絶対に書いておきたい」と言えるメタタグが3つあります。(モバイル端末でも見やすく表示させるため)上記の3種類のメタタグは、それぞれ1行で記述できる簡単なものです。どれもとても有用ですから必ず書いておきましょう。それぞれの書き方を以下に解説いたします。書き方コンピュータ上で日本語を表現する文字コードは複数あります。最近はUTF-8コードで書かれたウェブページも多くなりましたが、昔から使われているSHIFT-JISコードやEUC-JPコードなどで書かれているページも多数あります。正しい文字コードを指定しないと文字化けの原因になりますから注意して下さい。メタタグ(meta要素)を使えば、そのウェブページで採用している文字コードを示せます。以下に紹介する書き方で、必ず書いておきましょう。文字コードの基本はUTF-8備考:HTTPヘッダで出力される文字コードの方が優先される■HTML5で文字コードを指定するメタタグの書き方そのHTMLで採用している文字コードを示すには、HTML5では以下のように記述します。charset="文字コード名">この記述は、HTMLソースのhead要素内のできるだけ最初の方に書いておきます。この記述よりも前に日本語文字など半角英数字以外の文字(=非ASCII文字)が出てこないようにしましょう。具体的には以下のように記述します。charset="shift_jis">文字コード名は大文字・小文字を区別しません。「UTF-8」と書いても「utf-8」と書いても同じ意味です。同様に、「SHIFT_JIS」と書いても「Shift_JIS」と書いても「shift_jis」と書いても同じ意味です。■HTML5未満で文字コードを指定するメタタグの書き方HTML5未満では、以下のようなメタタグの記述方法が使われていました。古いブラウザに対処するために今でもこう書いているページもあります。charset=文字コード名">この書き方を使う場合は、引用符の位置に注意して下さい。文字コードだけを引用符で囲むわけではありません。HTML5を解釈できないような古いブラウザは既にかなり少数ですから、わざわざこの書き方を採用する必要性はあまりないでしょう。■文字コードの基本はUTF-8HTML5では、文字コードにUTF-8が推奨されています。理由がなければ、UTF-8を使いましょう。SHIFT-JISやEUC-JPなどとは異なり、UTF-8ならUnicodeで定義されている様々な絵文字や特殊記号もそのままHTMLソース内に記述できるメリットもあります。※SHIFT-JISなどを使っているページで絵文字などの特殊文字を表示するには、数値文字参照のような特殊な書き方が必要です。詳しくは記事「丸囲み数字などの環境依存文字を使う方法」で解説しています。■備考:HTTPヘッダで出力される文字コードの方が優先されるウェブサーバは、ブラウザへデータ本体を送る前に「HTTPヘッダ」と呼ばれる情報を送ります。そこで文字コード名が指定されていれば、ブラウザはメタタグで記述された文字コードは無視します。その場合は、メタタグで文字コードを記述しておく必要はありません。いえ、HTMLはウェブサーバだけから送られてくるわけではありません。ローカルで閲覧したり編集したりする場合もあります。メタタグを使ってHTMLソース内に文字コードを書いておけば、ローカル環境(テキストエディタなど)でも文字化けする心配がなくて安心でしょう。descriptionの書き方、望ましい文字数は?Googleなどの検索サイトでの検索結果には、ページタイトルだけではなく要約文も表示されます。その要約文は、ウェブページの本文中から抜粋されることもありますが、メタタグ(meta要素)に記述した文章がそのまま掲載されることもよくあります。ページの内容を分かりやすく要約した文章を用意しておけば、より多くのアクセス者を獲得しやすくなるでしょう。descriptionの書き方ウェブページの要約文は、以下のメタタグを使って記述します。content="要約文">name属性値に「description」を指定し、content属性値に文章を記述するだけです。■検索結果ページの要約文には何文字が抜粋して表示される?検索結果ページに表示される要約文の最大文字数は、検索に使われた環境によって異なります。検索サイト側も試行錯誤の過程で最大文字数を増やしたり減らしたりしています。したがって、最大文字数は固定されているわけではありません。本稿執筆時点のPC環境でGoogleを使用した場合は、概ね全角換算で120文字程度(半角換算だと240文字程度)が表示されていました。ページの更新日付が先頭に入る場合は、その分(全角換算で7文字分程度)だけ減ります。同じGoogleでの検索でも、スマートフォンを使った場合には全角換算で57文字~78文字(半角換算で114~157文字)しか表示されない場合もありました。descriptionに記述しておきたい望ましい文字数は?メタタグのdescriptionに短い文章しか書かなかった場合は、検索結果にも短い文章だけしか掲載されず、せっかくのスペースを無駄にしてしまうことがあります。そこで、少なくとも全角120文字は超える文字数を書いておきましょう。要約文が短すぎてせっかくの紹介スペースを無駄にしてしまうよりは、表示しきれないほど長い要約文を書いておく方が空間を有効活用できます。いえ、長い文章が中途半端に途切れてしまうのも望ましくはないかもしれません。そこで、要約文はできるだけ1文を短めに区切って、複数の文で構成するのがおすすめです。すると、中途半端に途切れるのは最後の1文だけで済むので、あまり中途半端な印象を持たれることなく要約文を読んでもらえるでしょう。スマートフォンでの検索時のように掲載される最大文字数が少ない環境でもちゃんと紹介内容が伝わるように、重要なキーワードを含む文ほど前の方に書いておきましょう。最低でも全角120文字(半角240文字)は超える分量を書いておく。重要な内容(キーワード)はできるだけ最初の方に書いておく。1文を短めに区切って、中途半端な印象を持たれにくくする。以上の3点に気をつけて書けば問題ないでしょう。keywordsがあります。そのページで語られている内容を単語で示しておき、検索エンジンに伝えるために使われていました。記述する場合には、以下のように「そのページを訪れようとする人々が使う検索語として想定しているキーワード」を半角カンマ記号で区切って列挙します。keywordsを設定する意味はない昔は上記の用途があったメタタグですが、今ではGoogleもBingも利用しないと公表(※)しており、わざわざ書く意味はありません。短い記述ですから書いても害はありませんが、利点もないでしょう。keywordsの記述は無視している」とも回答されています。keywordsにSEO面での意味がないことは明らかだ」といった意味のことが書かれています。keywordsに書かれた単語を今でも重視する検索エンジンも存在するかもしれません。本稿執筆時点の過去1年間に日本国内で利用された検索エンジンのシェアは、GoogleとBingだけで99%を超えています(※)。keywordsを読まない以上、書いておく意味はないと言っても過言ではないでしょう。(StatCounter)上記のページで公開されている解析データによると、Googleが72%、Yahoo!が22.68%、Bingが4.5%です。Japanは独立した検索サイトではありますが、検索エンジンにはGoogleを採用しています。したがって、検索エンジンとしてのGoogleのシェアは、72%+22.68%で合計94.68%だと言えます。Google+Bingで99.18%です。書き方Viewport(ビューポート)とは、ウェブページを描画する領域のサイズを表す用語です。スマートフォンやタブレットなどのモバイル端末でウェブページを表示する際に必要になる情報で、メタタグ(meta要素)を使って以下のように指定します。viewportは、モバイル端末専用ページや、PC・モバイル両対応のページを作る際には必須の記述と言えます。この記述がない場合、iOSやAndroid用の代表的なブラウザはページ全体をかなり縮小して描画するため、かなり読みづらくなってしまいます。viewportの記述がない場合のiOS版Safariでの表示例です。PCで閲覧した場合と同じようなレイアウトで見えていますが、その分だけ全体が縮小されており、文字が小さくて読めません。viewportを適切に記述した場合の表示例です。画像も文字も見やすいでしょう。viewportは下記のように書けば充分です。content="initial-scale=1">initial-scaleは、ウェブページを表示する際の拡大縮小率を指定します。値に「1」を指定すると「1倍」という意味になるため、拡大も縮小もせず端末の大きさに合わせたサイズで表示されます。名称に「initial(初めの)」と付いているとおり、この倍率はページにアクセスした直後の倍率です。閲覧者は、自分の指などを使って必要に応じて拡大できます。上記と同じ効果が得られる別の書き方として、「ページを描画する横幅をデバイスの横幅に一致させる」という意味を示す下記の方法もあります。この書き方もよく使われています。content="width=device-width">ただし、古いiOS版Safariでは「device-width」が示す横幅サイズが、端末を横向きに持ち替えても「縦向きに持った際の値」のまま変わらない問題がありました。それを気にするならこの書き方は避ける方が良いでしょうが、もはや今となっては考慮する必要はないでしょう。viewportの記述例モバイル対応ができていないページ(=極端に狭い画面幅ではうまく閲覧できないページ)を「なんとかモバイル端末でもそれなりに見えるようにしたい」という場合は、レイアウトが崩れることなく閲覧可能な最低横幅を調べた上で、その横幅を以下のように記述します。content="width=740">上記のように記述すると、モバイル端末では以下のように表示されます。ウェブページを「横幅740pxのウインドウで表示したと仮定して描画」し、その描画結果を、実際の端末に合うように縮小して表示する。したがって、画面の横幅が740pxを下回っている端末ではページ全体が縮小されます。文字は小さくなるでしょうが、レイアウトが崩れて読めなくなることは避けられるでしょう。閲覧者は、指を使うなどしてページを拡大して閲覧できます。この方法は、何も書かないよりはマシですが充分というわけではありません。一時的な措置だと考え、将来的には狭い画面でも問題なく閲覧できるようにデザインを作り替える方が望ましいでしょう。viewportの記述例リキッドレイアウトではなく固定幅でページをレイアウトしているなら、その固定幅をviewportに指定するしかありません。横幅850pxで固定されたレイアウトなら以下のように記述します。content="width=850">この場合は、画面の横幅が850pxより小さければ全体が縮小されて描画されます。横幅850pxで固定されたレイアウトのうち、右端の250pxは「見えなくても構わないサブ領域」だという場合には、あえて「width=600」と書いても良いかもしれません。その場合は、右端の250px分は画面に収まらないため横スクロールしないと見えなくなりますが、その分、文字が小さくなりすぎるのを少しだけ避けられます。いずれにしても、モバイル端末に対応したいなら固定幅ではレイアウトしない方が良いでしょう。加えておきたい、SNS連携ができるメタタグ群FacebookやTwitter上の投稿にURLが書かれた際に、ページの紹介文と画像が表示される仕組みがあります。この2つはどちらも、HTMLソース内にメタタグ(meta要素)を使って指定の書式で情報を書いておくことで、SNS側がそれを読み取って表示してくれる仕組みです。Aboutの記事のURLを書いた例です(※実際に表示を確認するにはこちら)。緑色矢印の先には記事タイトルと紹介文が表示され、橙色矢印の先には記事画像が表示されています。このように表示されると、ただURLだけが単独で掲載されているよりもアクセスされやすいでしょう。Protocol(オープン・グラフ・プロトコル)の略で、ウェブページに関する様々な情報をHTML内に含めておくためのメタデータのことです。HTMLのmeta要素を使って記述します。FacebookやGoogle+などのSNSで投稿本文内にURLを書くと、このOGPの記述が自動的に読み取られて表示に使われます。そのため、適切なOGPをHTMLに含めておけば、先の画像のように望みの紹介文やサムネイル画像を表示させられます。以下の5行をコピーして必要な情報を書き換え、HTMLのhead要素内に書くだけで使えます。最初の属性名はnameではなくpropertyになっているので間違えないよう注意して下さい。content="(ページの紹介文:任意)">例えば本記事のOGPなら、以下のような感じで記述します。content="メタタグ(meta要素)とは何か、HTMLのどこに書くのか~以下略~">最後の「og:description」は必須ではありません。望ましい紹介文を表示させるためには書いておきましょう。descriptionと同じにしておきます。同じ内容を2度書くのは手間と容量の無駄ですが、本稿執筆時点の仕様ではそのように書くしかありません。種別名欄に何を指定するのかなど、OGPの書き方に関して詳しくは、記事「SNSでの言及時に望みの情報や画像を出すOGPの記述方法」で解説していますので、併せてご参照下さい。Cardsとは、ツイート内にURLが記述された際に、そのURLにあるページタイトル・紹介文・サムネイル画像をツイート内に埋め込んで表示できるようにするためのTwitter専用の仕様です。OGPと同様にメタタグ(meta要素)を使って記述します。Twitterでは、OGPの記述だけではツイート内に情報は埋め込まれません。Cardsの記述を加える必要があります。上図では、ツイート内に書かれたURLについて、紫色矢印の先にサムネイル画像が表示されており、黄色矢印の先にはページタイトルや紹介文などが表示されています(※実際に表示を確認するにはこちら)。URLだけがリンクになるよりもリンク先の情報が分かりやすいため、クリックされやすくなるでしょう。Cardsを加えるなら、下記の1行を追加するだけです。OGPの記述5行に下記の1行を加えた計6行です。OGPでは最初の属性名がpropertyでしたが、ここでは最初の属性名はnameです。混同しないようご注意下さい。content="summary">content属性の値に「summary」を指定すると、小さな画像として表示されます。その場合は、画像の横にタイトルや紹介文が表示されます。値を「summary_large_image」にすると、大きな画像として表示されます。その場合は、画像の下にタイトルや紹介文が表示されます。どちらの場合でも、表示に使われる画像はOGP側の「og:image」で指定した画像です。Cardsには他にもいくつか情報を追加できますが、ここでは話を簡単にするために割愛しました。validator」で確認できます。Twitterにログインしてからアクセスし、調べたいURLを入力すると、そのURLのHTMLが読み込まれて内容がチェックされます。結果は、下図のようにプレビューと共に表示されます。Validatorでメタタグの記述が正しいかどうかを確認できる記述に不足や誤りがあれば「Log」枠内に赤色の文字で表示されます。上記のように緑色でsuccessfullyと表示されていれば問題ありません。successfullyと表示されていても、たまにサムネイル画像が見えない場合があります。その場合は、1分程度待ってから再度チェックしてみて下さい。メタタグの確認方法ウェブページに記述したメタタグ(meta要素)は、HTMLソースを見れば確認できます。複数人で管理しているページや、何らかのCMSツールによって生成されているページなどでは、必ずしもHTMLソースが見やすく整形されているとは限りません。そのような場合には、下記のような機能を使うと簡単にメタタグの記述内容を確認できて便利です。■Firefoxの標準機能「ページ情報」ウインドウでメタタグを確認する方法ブラウザFirefoxには、ウェブページ上で右クリックすると表示されるコンテキストメニューの中に「ページの情報を表示」という項目があります。それをクリックすると、下図のように「ページ情報」というウインドウが開きます。その下部に「meta要素一覧」という枠があり、現在表示しているページに含まれているメタタグの中身がリストアップされています。ブラウザのFirefoxなら標準機能でmeta要素の確認ができるこれは最初から搭載されている機能であり、アドオンなどは不要です。画像やリンクの上で右クリックした場合には表示されませんので注意して下さい。ウェブページ上の何もない空間で右クリックするのが確実です。viewer」などをインストールして使うことでメタタグの一覧を確認できます。viewer」を使えば、表示中のウェブページにあるmeta要素を確認できる■OGP用のメタタグが正しく書けているかどうかを確認する方法OGPは必要なメタタグの数が多いため、一覧を見ただけでチェックするのは面倒です。そこで、OGPが正しく機能しているかどうかを確認できるブックマークレット(※)を使う方法が楽です。この種のブックマークレットはいろいろ公開されていますが、例えば「OGPタグ確認に便利!ブックマークレットで手早くチェック」ページで紹介されているブックマークレットが便利です。ページ中程の「OGPチェックブックマークレット」と書かれたリンクをブックマークに登録しておけば、下図のように表示中のページのOGPを確認できるようになります。(黄色矢印:画像、緑色矢印:URL、水色矢印:タイトル、橙色矢印:紹介文)※ブックマークレット(Bookmarklet)とは、JavaScriptソースを直接ブックマークに登録しておくことで、ブックマーク項目をクリックした際にそのJavaScriptが実行されるようにした仕組みのことです。上記では、OGPの記述を自動的に読み取って画面に表示するJavaScriptが作られています。Cardsの書き方をご紹介いたしました。【編集部おすすめの購入サイト】ソフトバンクユーザーならYahoo!ショッピングでお買い物がおすすめ楽天市場でホームページ作成関連の書籍を見るAmazonでホームページ作成の参考書を見る※記事内容は執筆時点のものです。最新の内容をご確認ください。異なる可能性があります。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。