こんにちは、カヨです。
ヘッダーメタデータの設定
【備忘録】
SEO関連にも着目してhtmlを書いています。日々追加したりしているので記録と見直し改善用としてです。参考にするかはご自由にどうぞ◎
✔︎ホームページのコーディングしていてheadタグ内に迷う人
✔︎設定に悩んでる人
✔︎SEOの設定をしてる人
ヘッダーメタデータ
<html lang="ja" itemscope itemtype="http://schema.org/WebPage">
<head prefix="og: https://ogp.me/ns#">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!-- サイトの説明文、検索結果に表示される内容 -->
<meta name="description" content="すべての規模のビジネスに向けた、プロフェッショナルなコンサルティングサービスを提供しています。">
<!-- キーワードはSEO対策の一部。現在はあまり重視されないが、記載しておくことが一般的。 -->
<meta name="keywords" content="コンサルティング, ビジネスソリューション, プロフェッショナルサービス, カスタマイズ戦略, 専門的アドバイス, 企業コンサルティング">
<!-- モバイルブラウザのアドレスバーの色設定 -->
<meta name="theme-color" content="#917F67">
<!-- 電話番号の自動リンク化を防止 -->
<meta name="format-detection" content="telephone=no">
<!-- ページのタイトル。ブラウザタブや検索結果に表示される -->
<title>サンプルコンサルティング会社 | 公式サイト</title>
<!-- OGP (Open Graph Protocol)設定: SNSでのシェア時にどのように表示されるかを指定 -->
<meta property="og:title" content="サンプルコンサルティング会社 | 公式サイト">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.sampleconsulting.com/">
<meta property="og:image" content="https://www.sampleconsulting.com/img/sample-og-image.jpg?60">
<meta property="og:site_name" content="サンプルコンサルティング会社">
<meta property="og:description" content="プロフェッショナルなビジネスコンサルティングサービスを提供し、企業の成長と効率化をサポートします。">
<!-- Twitterカードの設定: Twitterでシェアされた際の表示内容を指定 -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://www.sampleconsulting.com/img/sample-og-image.jpg?60">
<!-- 重複コンテンツを防ぐためのカノニカルURL -->
<link rel="canonical" href="https://www.sampleconsulting.com/" />
<!-- 外部スタイルシートのリンク -->
<link rel="stylesheet" type="text/css" href="https://cdn.example.com/styles/main.css" />
<!-- 旧バージョンのIEブラウザ対応用のスクリプト。最新ブラウザでは不要。 -->
<!--[if lt IE 9]>
<script src="https://cdn.example.com/scripts/html5shiv.min.js"></script>
<script src="https://cdn.example.com/scripts/respond.min.js"></script>
<![endif]-->
</head>
現状の考え
prefix
og「 OGP」を設定したいのでこのまま使用宣言のprefixを設定継続予定
name=“viewport”
user-scalable=yes と maximum-scale=10.0 が両方設定されているが、これは矛盾している可能性あり。user-scalable=yes はデフォルトなので、省略可能。
⇒一旦、現状維持。ページ量的に変更に時間がかかるため。
name=“keywords”
現在ではGoogleをはじめとする主要な検索エンジン（Bing、Yahooなど）ではほとんど無視されている。
Google以外の検索エンジンにおける<meta name="keywords">
- Bing: BingもGoogle同様、
<meta name="keywords">をランキング要因としては使用していない。 - Yahoo: Yahooも、Bingの検索技術を使用しているため、
<meta name="keywords">は無視される。 - DuckDuckGo: DuckDuckGoも
<meta name="keywords">をランキング要素として使用していない。 - Baidu（中国の検索エンジン）: かつては
<meta name="keywords">を利用していたと言われていますが、現在はほとんど効果がないと考えられている。
⇒一旦設定を再開していたが以降は設定をしない方向で進める予定。
name=“theme-color”
モバイルブラウザのアドレスバーの色設定。
⇒サイトリニューアルが落ち着いたら順次ページにあったものに変えていく。
Twitterカードの設定
Twitterが「X」に名称変更されたが、技術的な設定や<meta>タグの仕様は現時点で変わっていない。公式に仕様変更の発表はされていない。（2024.10.07）
⇒Xでシェアされることが少ないので一旦視覚てきにわかりやすい画像設定のみにとどめている。
rel=“canonical”（カノニカルURL）
重複コンテンツの問題を解決したい場合。検索エンジンに「どのページが正規のものか」を伝えることで、重複コンテンツの問題を防ぐために重要。現状、正規のページ以外は存在しないので正規のページに設定。
⇒位置は上の方が効率的に良いようだが現在はそのまま。時間に余裕があれば修正したい。name=“viewport”の下が理想。
[if lt IE 9]（IEブラウザ対応用のスクリプト）
IEブラウザ対応用のスクリプト（HTML5 ShivやRespond.jsなど）は、主に古いバージョンのInternet Explorer（IE 9以前）でHTML5やCSS3の機能をサポートするために使われていました。しかし、2022年6月にMicrosoftがIEのサポートを終了したため、現在はほとんどのユーザーがモダンなブラウザ（EdgeやChromeなど）を使用しており、IE向けのスクリプトは不要なケースがほとんど。
⇒余計なコードが減ることで、ページの読み込み速度やメンテナンス性が向上するが、私自身のプロジェクトの対応箇所が多いため問題ないなら一旦はそのままの予定。現時点で訪問者をアナリティクスで確認したところ１％以下なので問題はなさそう。
設定していての体感
なるべく丁寧に設定するようにここ数年気をつけている。index.htmlのページ以外のページを設定していなかったが、新しく作成するページにはindex関わらず設定。
✔コアアルゴリズムアップデート
このGoogle検索エンジンのアップデートが８月半ばから９月頭まであったようで、筆者のサイトは実は表示回数がグンと上がって２倍になった日もあった。しかし、最大は９月５日でその後の10月７日現在は元通りではないが元に戻りつつある。（サーチコンソール調べ）
何が影響しているか調べる暇もなく数値が戻っているので、がっかりしながらもクリック数は維持なので現状のまま大量のページを抱える筆者のサイトは設定にいそしもうと思う。また、数ヶ月後や大きな変更があれば更新したい内容だと考えている。
多言語ページの追加事項
日本語、英語
<!-- Linking each language version of the page to each other -->
<link rel="alternate" href="https://www.sampleconsulting.com/en/" hreflang="en">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/" hreflang="ja">上記のように、現在は英語ページのみ設定が書かれた状態になってしまっているので、時間を見つけて正しい設定を行いたい。英語ページのみだけではなく日本語ページにも設定して初めて機能するようだ。
✔正しい設定
例えば、海外向けのページが英語版のみで、日本語ページが複数カテゴリにわかれている場合、次のように設定できる。
海外向けのまとめページ (英語版):
<link rel="alternate" href="https://www.sampleconsulting.com/en/" hreflang="en">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/category1" hreflang="ja">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/category2" hreflang="ja">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/" hreflang="x-default">日本語ページ (カテゴリごと):
<!-- カテゴリ1の日本語ページ -->
<link rel="alternate" href="https://www.sampleconsulting.com/en/" hreflang="en">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/category1" hreflang="ja">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/category2" hreflang="ja">
<link rel="alternate" href="https://www.sampleconsulting.com/ja/" hreflang="x-default">
多言語サイトページについて
筆者の関わっているさいとでは多言語用に作成したページはサイトのプロジェクト構造にも気をつかっています。本来同一ドメイン内には多言語をのページを混ぜるべきではないかと考えましたが、現状出来上がったサイトを崩すことはできずドメインの直下にenファイルを作成する対応にとどまっています。本来はjaファイルも作成したかったところ。引き継ぎながら多言語対応にするのには頭を悩ませています。少しずつ改善を試みています。
