ホームページ（ウェブサイト）制作において、ブラウザや検索エンジンに対してページの設定情報や意味を伝えるためのmetaタグ（メタタグ）は、ユーザーの目には直接見えないものの、サイトのパフォーマンスやWebマーケティングの成果を左右する極めて重要な要素です。文字コードの指定、画面サイズの制御、検索結果に表示される説明文の定義など、ホームページ（ウェブサイト）の根幹を支える役割を担っています。
かつてのホームページ制作では、検索エンジンのアルゴリズムが現在ほど高度ではなかったため、metaタグ内にキーワードを大量に詰め込むといった手法が横行していました。しかし、検索エンジンの進化とともに評価基準は大きく変わり、現在の「HTML Living Standard」におけるmetaタグの役割も、より正確で意味論的（セマンティック）な情報伝達へと厳格に整理されています。
現在の事業用ホームページ（ウェブサイト）において集客を成功させるためには、古い時代の知識をアップデートし、現在の仕様に則った正しいマークアップを行うことが求められます。不要なタグを記述してコードを肥大化させることは避け、クローラーが効率よくページ内容を解析できるようにhead要素内を最適化することが、SEOにおける第一歩です。また、各種SNSでシェアされた際の表示を最適化するOGP（Open Graph Protocol）の設定など、検索エンジン以外のプラットフォームに対する情報伝達も考慮する必要があります。
本ページでは、metaタグの最新の標準仕様に基づき、過去の認識からアップデートすべきポイントの指摘とリライト、さらにスマートフォン表示の最適化やSEOに直結する正確な仕様と運用方法について詳しく解説します。
meta（メタ）（<head>内）
<meta>
ホームページ制作（ウェブサイト制作）の際に使用する<meta>タグについてのご説明です。
ホームページ制作において<meta>（メタ）タグは、ページの<head>内に設置して、文書付加情報、その文書に関する情報を指定する場合に使用します。
ウェブ標準の進化に伴い、かつて多用されていた一部のmetaタグは現在では意味を持たなくなっています。過去の知識のままホームページ（ウェブサイト）を構築すると、無駄なコードが増えるだけでなく、場合によっては検索エンジンからスパムと誤認されるリスクもあります。
<meta> 文書付加情報、その文書に関する情報を指定
<meta>タグは、ホームページ制作において文書付加情報（メタ情報）、その文書（ウェブページ）に関する情報を指定します。
ブラウザや検索ロボットに文書付加情報知らせるためのタグです。
この<meta>タグは、<head>内に記述します。
メタ情報をはじめ、<head>に記述された情報は、一部を除いてブラウザ表示されないウェブページの付加情報のため、この情報は通常の閲覧ユーザーには見えない情報であり、検索エンジンなどに付加的に知らせる情報になります。
タイトルの設定と共にSEO（検索エンジン最適化）の大前提になる項目です。
キーワード等の情報をname属性で定義、 content属性で値を指定します。
現代のホームページ制作で必須となる主要metaタグ
現在の環境において、文字化けを防ぎ、スマートフォンなどの多様なデバイスで適切に表示させるために、必ず設定すべき基本的な属性です。
文字コードの指定（charset属性）
過去のHTML仕様ではhttp-equiv属性を用いて長く記述していましたが、現代のHTML仕様では非常にシンプルになり、<meta charset=”utf-8″>と記述します。現在、文字コードはUTF-8を指定することが標準です。Shift_JISやEUC-JP、ISO-2022-JPなどは旧時代のものであり、文字化けの原因となるため事業展開向けのページでは使用しません。
モバイル表示を制御するビューポート（viewport）の指定
スマートフォンでの閲覧が主流となった現在、最も重要な設定の一つです。
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>のように指定します。これを記述することで、閲覧している端末の画面幅に合わせてコンテンツが適切に拡大縮小され、レスポンシブデザインが正常に機能します。
文書の説明文（ディスクリプション）
<meta name=”description” content=”ページの要約文”>と指定します。検索エンジンの検索結果において、ページタイトルの下にスニペットとして表示される文章です。ユーザーのクリック率に直結するため、各ページ固有の魅力的な文章を設定することがSEO対策として重要です。
検索エンジンの制御とSNS連携を行うmetaタグ
クローラーの動作をページ単位で制御したり、SNSでシェアされた際の表示を最適化したりするための設定です。
検索ロボットの制御（robots属性）
検索エンジンに対して、ページのインデックス登録やリンクの巡回方針を指示します。インデックスさせない場合はnoindex、リンクを辿らせない場合はnofollowを指定します。例えば、重複コンテンツや価値の低いページを検索結果から除外するために、<meta name=”robots” content=”noindex”>を使用します。
インデックス登録、文書内リンクをたどることを許可する
<meta name=”robots” content=”index,follow”>
インデックス登録、文書内リンクをたどることを許可しない
<meta name=”robots” content=”noindex,nofollow”>
インデックス登録は許可しないが、文書内リンクをたどることは許可する
<meta name=”robots” content=”noindex,follow”>
検索ロボットにインデックス登録しない（noindex）、
文書内のリンクをたどらない（nofollow）ように制御する指定。
すべての検索ロボット（検索エンジン）に必ずしも反映されるわけではありません。
SNSシェアを最適化するOGPタグ
事業のコンテンツをSNSで広く展開する際に必須となるメタタグ群です。<meta property=”og:title” content=”タイトル”> や <meta property=”og:image” content=”画像のURL”>などを指定します。これにより、FacebookやXなどでURLが共有された際に、専用の画像や説明文がカード形式で美しく表示されます。
SNSシェアが楽しくなる！OGP設定で差をつける方法とSEOとの意外な関係
メタキーワード（keywords属性）の現在の扱い
過去には検索順位に影響を与えていましたが、現在Googleなどの主要な検索エンジンは、このkeywords属性を検索順位の評価対象として完全に無視しています。設定しても悪影響はありませんが、SEO効果を期待して記述する意味は現在ではありません。
<meta name=”keywords” content=””>
現代のHTML仕様で廃止・非推奨となったmetaタグ
かつてはHTMLのmetaタグ内で設定していたものの、現在ではブラウザの標準動作となったり、サーバー側の処理へ移行したりした属性群です。
基準スタイルシート言語とスクリプト言語の指定
Content-Style-TypeでCSSを、Content-Script-TypeでJavaScriptを基準言語として指定する記述は、HTML5ではこれらが標準となっているため、記述する必要はありません。
<meta http-equiv=”Content-Style-Type” content=”text/css”>
<meta http-equiv=”Content-Script-Type” content=”text/javascript”>
キャッシュ制御と有効期限の指定
pragma、cache-control、expiresなどを用いたメタタグでのキャッシュ制御は、現代の仕様では非推奨です。より専門的には、.htaccessファイルなどを用いてサーバーのHTTPヘッダー側でキャッシュ期間を正確に制御することが現在の標準実装です。
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”日時”> 日時はGMT（グリニッジ標準時）で指定。
別ページへの自動ジャンプ（refresh属性）
refresh属性を用いた数秒後の自動ジャンプや再読み込みは、現在でもブラウザ上では機能します。しかし、SEOの観点やユーザビリティの観点からは推奨されません。ホームページ（ウェブサイト）の移転などで転送を行う場合は、メタタグではなく、.htaccessなどを用いたサーバーサイドでの301リダイレクト処理を行います。
<meta http-equiv=”refresh” content=”秒数; url=URLを指定”>
文書の作者（author）とエディタ情報（generator）
author属性は文書の著者を明示するために現在も使用可能です。一方で、generator属性は使用した制作ツールやCMS（WordPressなど）のバージョンを出力するため、セキュリティの観点から意図的に非表示に設定することが一般的です。
<meta name=”author” content=”作者”>
<meta name=”generator” content=”エディタ名”>
meta keywords（メタキーワード）の完全な無効化
過去のHTML規格や古いSEOの解説では、ページに関連するキーワードを「meta name=”keywords”」としてカンマ区切りで記述することが推奨されていました。しかし現在、Googleをはじめとする主要な検索エンジンは、このkeywords属性を検索順位を決定するための要素として完全に無視しています。
このタグに大量のキーワードを詰め込むことはペナルティのリスクを伴う可能性すらあります。現在の事業用ホームページ制作においては、meta keywordsは記述しないことが標準的なルールです。
文字コード指定（charset）の簡略化と記述位置
かつてのHTMLでは、文字コードを指定するために長く複雑なhttp-equiv属性を記述していました。現在のHTML Living Standardでは「meta charset=”UTF-8″」という非常にシンプルな記述が標準仕様です。ここで注意すべき点は、このcharsetの指定はhead要素内の最初のほう（最初の1024バイト以内）に記述しなければならないという厳密なルールです。ブラウザが文字化けを起こす前に文字コードを正確に判定できるように、適切な位置に配置します。
SEOとクリック率に直結するディスクリプションの最適化
meta description（メタディスクリプション）は、検索エンジンのアルゴリズムにおいて直接的な順位上昇要因ではありませんが、検索結果画面でのユーザーの行動に大きな影響を与えます。
検索結果におけるスニペットとしての役割
metaタグのdescription属性に記述したテキストは、検索エンジンの検索結果画面において、タイトルの下に表示される説明文（スニペット）として採用されます。この説明文がユーザーの検索意図に合致し、魅力的な内容であれば、検索順位が同じであってもクリック率が大幅に向上します。事業のサービスページや記事ごとに、固有で具体的な説明文を記述することが、Webマーケティングの成果を高める上で非常に重要です。
文字数の目安とデバイスへの配慮
設定するテキストの長さは、パソコンとスマートフォンで表示される文字数が異なる点を考慮します。一般的にスマートフォンでは表示領域が限られるため、重要なキーワードや伝えたい情報を文章の前半部分に配置する工夫が求められます。すべてのデバイスでユーザーに正確な情報が伝わるホームページ（ウェブサイト）を構築するために、こうした細かな調整を取り入れていきます。
スマートフォン対応とSNS連携のための必須設定
現代のホームページ（ウェブサイト）制作において、モバイルデバイスでの快適な閲覧体験と、各種ソーシャルメディアでの情報拡散は事業成長に欠かせない要素です。
viewport（ビューポート）による画面サイズの制御
スマートフォンやタブレットでホームページ（ウェブサイト）を適切なサイズで表示させるために、「meta name=”viewport”」の指定は必須です。このタグを設定しないと、モバイル端末でもパソコン用の広い画面サイズで描画されてしまい、文字が非常に小さく読みづらいページになってしまいます。「width=device-width, initial-scale=1.0」と記述することで、ユーザーが使用している端末の画面幅に合わせてコンテンツが柔軟に調整されるレスポンシブデザインの基盤が整います。
OGP（Open Graph Protocol）タグの実装
ホームページ（ウェブサイト）がX（旧Twitter）やFacebookなどのSNSでシェアされた際に、タイトル、説明文、アイキャッチ画像を正しく表示させるためのOGP設定もmetaタグで行います。これを適切に設定することで、SNSのタイムライン上で視覚的に目立つリンクカードが生成され、事業用コンテンツへの流入を大きく増やすことが期待できます。
<meta></meta>
ホームページ制作・SEOの1ポイント
ホームページ制作においてこのメタ設定は非常に重要な項目です。「目に見えるページの内容」以外の付加情報の設定になりますが、特に細かく指定しなくても、ページの描画にはあまり影響がないため無指定の場合がよくあります。
このメタ設定を正確に最適化していくことは、SEOの最も重要なポイントの一つです。
title（タイトル）
<title></title>
ホームページ制作（ウェブサイト制作）の際に使用する<title>タグについてのご説明です。
ホームページ制作において<title>（タイトル）タグは、ホームページ（ウェブサイト）を構成するHTML文書のタイトルを設定するタグです。
<title>タグで設定した「ページタイトル」は通常ブラウザタブに表示されます。ページの主題を表すことから、SEOとしての最も重要な要素の一つとなります。
<title> HTML文書のタイトル
<title>タグは、html文書にタイトルをつけ、ウェブページに名前をつけます。
<title>タグで、ウェブページのタイトルを指定します。
<title>タグは、<head>内に記述します。html文書において省略できない必須要素です。
指定したタイトルはブラウザのツールバー（タブブラウザの場合はタブ部分）に表示されます。
また、検索結果においても基本的にはページのタイトルとしてこの<title>タグで設定したものが反映されます。
そのページの内容がどのようなものかを一行で示す
ホームページ制作において、タイトルで指定した「文書のタイトル」は、そのページがどのような文書であるかを示す最も重要な項目です。
例えば、書籍で言えば書籍のタイトルにあたり、そのページの情報がどのような情報かを抽象的にまとめ上げる必要があります。
一般的な文書であっても、タイトルや見出し、小見出しは、文章の概要を示し、その文書がどのような内容かをおおまかに伝える良い指針になります。
ページのタイトル付けはSEOの基本
ホームページ制作におけるウェブページのタイトルの指定は、SEO（検索エンジン最適化）においても最重要項目の一つです。
その他ページ内容の重要な箇所を示すタグとしてはh1などの見出しタグなどがあります。
検索キーワードにマッチした内容のページかどうかの判断基準として、タイトルや見出しとキーワードに関連性があるかどうか、ということは一つのわかりやすい目安になります。
該当ページの記載内容がどのようなものかを検索エンジンに伝えるという意味では、html文書（ウェブページ）のタイトル指定は、SEOの大原則になります。
ホームページ制作におけるHTMLの必須設定事項であり、かつ、SEOとしても最重要要素となるのがこのタイトル設定です。
なお、検索結果においては、このタイトル設定と同時にディスクリプションの設定も反映されます。
検索結果でタイトルがメタ設定のタイトルと異なったものに変換される場合
検索結果でタイトルやディスクリプションがメタ設定と異なったものに変換される場合について。一般的に長いタイトルやディスクリプションが短くされたり、ユーザーの検索単語のパターンやページの見出し等からの推測でタイトルが書き換わったりすることがあります。その他、メタタイトルに設定していなくても、タイトルの横にサイト名などが付加される場合もあります。
<title></title>
検索結果におけるクリック率を左右するタイトル設計
より専門的な視点では、titleタグは単なるページ名の記述ではなく、検索結果（SERPs）における「広告の見出し」としての役割を強く意識する必要があります。Googleは近年、検索クエリに応じてタイトルの書き換えを行うことが増えていますが、それでもなお、適切に設計されたtitleタグは検索順位とクリック率（CTR）の両面に大きな影響を与えます。
キーワードを前方に配置することはSEOの基本ですが、不自然に詰め込みすぎると、検索エンジンにスパム判定を受けたり、ユーザーに不信感を与えたりする可能性があります。事業の成果を最大化するためには、ユーザーの検索意図を汲み取りつつ、一目で内容が理解できる魅力的なフレーズを盛り込む工夫が重要です。
Googleによるタイトル書き換えへの対応とH1との整合性
Googleがページ内の見出し（h1タグ）や本文の内容からタイトルを自動生成するケースが増えています。これを防ぎ、意図したタイトルを表示させるためには、titleタグの内容とページ内の主要な見出しを論理的に一致させることが重要です。
ホームページ（ウェブサイト）の各ページにおいて、情報の階層構造を正しく保つことは、検索エンジンに対して「このページは何について書かれているか」を明確に伝えることにつながります。こうした細部への配慮が、ホームページの専門性を高め、長期的な検索流入の安定に寄与します。
デバイスごとの表示文字数とブランディングのバランス
スマートフォンやPCなど、閲覧環境によって検索結果に表示される文字数は異なります。一般的には30文字から32文字前後が目安とされますが、重要な情報は前半にまとめつつ、後半には事業の信頼性を高めるためのブランド名を適切に配置することが望ましいです。
ホームページ全体のブランディングと、各ページのSEO戦略を両立させることで、単なるアクセス数の増加にとどまらず、最終的な事業の成果（コンバージョン）につながる質の高いユーザー獲得が可能になります。
ホームページ制作・SEOの1ポイント
タイトルはホームページ制作やSEOの上で非常に大切な設定箇所です。重複したタイトルやあまりに長い、もしくは短いタイトルはSEOにマイナスに働きます。
タイトルの工夫はSEOの基本となりますが、実際の検索結果リストに反映される内容ですので、SEOとしてだけでなく、実際にユーザーにクリックされやすいフレーズの使用なども検討したほうが良いでしょう。
ホームページ（ウェブサイト）制作・作成に役立つHTMLタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ
ホームページ（ウェブサイト）のHTML編集方法
ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。
ホームページ制作・SEO・Webマーケティングなら京都のWeb制作会社 株式会社ファンフェアファンファーレへ
「Web集客できるホームページ制作・作成（ウェブサイト制作）、SEO・Webマーケティング」
ホームページ制作 京都のWeb制作会社（ホームページ制作会社）株式会社ファンフェアファンファーレは、Web集客・Webマーケティングを意識したWordPressサイト制作を中心にSEO・LLMO・GEO・AIO対策やコンテンツ制作に特化した制作会社です。ホームページ制作やリニューアル、修正はもちろん、技術的SEOからセマンティックHTMLを含めたSEO（SEO対策）やAI検索対策、コンテンツマーケティング、WebマーケティングにかかるWebコンサルティングなど様々なサービスを提供しています。
WordPressサイト制作
WordPressサイト制作やカスタマイズもおまかせください！サイト構造の再設計・セマンティックHTML・AI対応を含めたWordPressのSEOやホームページをWordPressサイトへと変更する「WordPress化」、オウンドメディア構築も可能です！
ホームページ修正・更新
ホームページの修正やページ更新、ページ追加、サイト内部の様々な修正など、各種ホームページの修正・更新の代行に対応しております。エラー修正やページ内容の変更など、ホームページの修正や更新にかかる単発のご依頼で対応させていただいておりますので、HTMLの修正をはじめ、軽微な修正でもお気軽にご相談ください。
ホームページの更新・修正料金 価格表
Related page
-
ホームページ（ウェブサイト）制作において、ユーザーが実際に画面で見るテキストや画像などのコンテンツとは別に、ブラウザや検索エンジンに対してページの情報を裏側から伝える設定が存在します。この「裏側の情報」をまとめるための領域を作るのがHTMLの「head」タグであり、その中で外部のファイルとページを繋ぐ役割を持つのが「link」タグです。 「head」タグは、
-
ホームページ（ウェブサイト）制作において、ページを正しく表示し、検索エンジンに適切な情報を伝えるための第一歩となるのが、「DOCTYPE（ドキュメントタイプ）宣言」です。DOCTYPE宣言とは、そのHTML文書がどのバージョンのHTMLで記述されているかを、ブラウザや検索エンジンのクローラーに対して知らせるための重要な記述です。HTMLファイルの最も上の行（
-
ホームページ（ウェブサイト）制作において、ユーザーがブラウザ上で実際に目にするすべてのコンテンツを囲むbodyタグは、ページを構成するための最も土台となる要素です。HTML文書は、裏側の設定を記述するhead要素と、表側の情報を記述するbody要素という2つの大きなブロックで成り立っています。テキスト、画像、リンク、表など、ホームページ（ウェブサイト）を訪れ
-
ホームページ（ウェブサイト）制作において、ユーザーからの問い合わせ、資料請求、商品の購入など、事業の売上や成果（コンバージョン）に直結する非常に重要な役割を担うのが「入力フォーム」です。このフォームを構築するために中心となるHTMLタグが、「form」「input」「label」「select」「button」「textarea」です。 「form」タグは、
-
ホームページ（ウェブサイト）制作において、ページに動きをつけたり、ユーザーの行動を分析したりするために、JavaScriptをはじめとするプログラムは非常に重要な役割を果たしています。このプログラムをホームページ（ウェブサイト）内に組み込むために使用されるのが、HTMLの「script」タグです。また、これと対になって使用されることが多い「noscript」
