HTMLメタデータ：含まれる要素とベストプラクティス
公開: 2021-01-08HTMLメタデータの要素とベストプラクティス
メタタグは、ウェブページに関する重要な情報について検索エンジンに通知するコードの簡単な抜粋です。 また、Webブラウザが訪問者に表示する方法も制御します。 メタタグはすべてのWebページに存在し、HTMLコードでのみ表示できます。 これがSEOのメタタグの例のリストです。
- メタ記述
- メタロボット
- メタタイトル
- メタ文字セット
- メタリフレッシュリダイレクト
- メタビューポート
メタタイトル
Googleや他の検索エンジンが検索結果に表示するページタイトルはメタタイトルです。 HTMLタイトルは、結果のコンテンツとクエリとの関連性についての迅速な洞察をユーザーに提供します。 これは通常、クリックする結果を決定する基本的な情報形式です。 Webページで高品質のタイトルを使用することはSEOにとって非常に重要です。 メタタイトルの例を次に示します。
ベストプラクティス
- ページに特別なタイトルタグを使用する
- タイトルは簡潔で説明的なものにする必要があります
- 一般的で曖昧なタイトルの使用は避けてください
- タイトルまたは文の大文字小文字を使用
- クリックベイトではなく、クリックに値するものを使用してください
- 検索インテントに一致
- 60文字以下を使用
- 必要に応じてターゲットキーワードを含める
タイトルタグの間違いを見つけて修正する
タイトルタグが長すぎたり短すぎたりしないようにしてください。 簡潔でわかりやすいタイトルを維持しながら、不必要に長いタイトルや言葉の多いタイトルは避けてください。 すべてのページにタイトルタグがあることを確認してください。 複数のWebページがある場合、検索エンジンに無関係なタイトルタグが表示される可能性があるため、ページに複数のHTMLタイトルタグを配置しないでください。 複数のページにタイトルを複製します。 サイトの各ページに一意でわかりやすいタイトルを付けることが非常に重要です。
60秒であなたのサイトのSEOとパフォーマンスをテストしてください！
優れたウェブサイトのデザインは、訪問者のエンゲージメントとコンバージョンにとって重要ですが、ウェブサイトの速度が遅い、またはパフォーマンスのエラーがあると、最適にデザインされたウェブサイトでさえパフォーマンスが低下する可能性があります。 Diibは、世界で最高のWebサイトパフォーマンスおよびSEO監視ツールの1つです。 Diibはビッグデータの力を利用して、トラフィックとランキングをすばやく簡単に増やすことができます。 起業家に見られるように！
- 使いやすい自動SEOツール
- キーワードと被リンクの監視+アイデア
- スピード、セキュリティ、+コアバイタルトラッキングを保証します
- SEOを改善するためのアイデアをインテリジェントに提案します
- 25万人以上のグローバルメンバー
- 組み込みのベンチマークと競合他社の分析
25万を超える企業や組織で使用されています。
と同期します
メタ記述
メタディスクリプションは、Webページの簡単な説明を提供します。 検索エンジンはこれを使用して、検索結果にWebページを表示します。 特定のページのコンテンツの簡潔で正確な要約を使用して、ユーザーに情報を提供し、ユーザーの関心を引き付けます。 メタディスクリプションは、ユーザーが正しいページにいて、まさに探しているものであることをユーザーに安心させます。 ただし、これらはGoogleによって直接のランキング要素として使用されていません。 以下の画像はメタディスクリプションを示しています。
ベストプラクティス
- 各ページに一意でわかりやすい説明を書く
- 正確な要約を提供する
- 一般的な説明は使用しないでください
- 意味のある文章で主なキーワードを適切に使用する
- 文の大文字小文字を使用
- クリックベイトを使用せず、クリックに値するものを書いてください
- 検索の目的に一致する
- 160文字以下を使用
一般的なメタ記述の間違い
メタディスクリプションを書く際の最も一般的な間違いは、タイトルタグの間違いとほとんど同じです。 長すぎるまたは短すぎるメタディスクリプション。 通常、メタディスクリプションの長さに制限はありません。 デバイスの幅に合わせるために、抽出される検索結果は通常短縮されます。 もう1つの間違いは、Webページにメタ記述が完全に欠けている場合です。
あなたがあなたのサイトにそれを書くことを確認してください。 複数のメタディスクリプションを含むページを作成することもできますが、これにより検索エンジンが混乱する可能性があります。 複数のページに同様のメタディスクリプションがあることもよくある間違いです。 各ページに独自の説明があることを確認してください。
メタロボット
メタロボットを使用すると、検索エンジンはWebページをクロールでき、その方法も説明されます。 メタロボットタグで正しい属性を使用しないと、検索結果にサイトが存在することが悪影響を与える可能性があります。 このタグを理解して効果的に使用すると、SEOに大きな影響を与えます。
インデックス値はボットにページインデックスを作成するように指示し、noindex値はボットにページインデックスを作成しないように指示します。 ボットは、次の値によって、ページ上のリンクをクロールして保証するように指示されます。一方、nofollow値は、承認を避けるためにページ上のリンクをクロールしないように指示します。
ベストプラクティス
Googleがページをクロールするのを制限する場合にのみメタロボットタグを使用し、ロボットのメタロボットタグでページをブロックしないようにします。
一般的なメタロボットの間違い
典型的なメタロボットの間違いには、ロボットがインデックスページをブロックしないことが含まれます。 これにより、Googleがnoindex robotsタグを確認することが困難になり、URLのインデックス作成が続行される可能性があります。 不正なメタnoindexは、Googleによるインデックス作成を制限することにより、ページのオーガニックトラフィックを減らします。 Rogue meta nofollowは、Googleがページのリンクをクロールするのを防ぎ、重要なコンテンツを見つけてインデックスに登録する可能性を減らします。 これにより、PageRankが重要なページに流れるのを防ぐこともできます。
メタビューポート
メタビューポートは、Webページの表示領域を設定し、さまざまな画面サイズでブラウザがページを表示する方法を示します。 モバイルフレンドリーなウェブページはGoogleのモバイル検索結果で上位にランク付けされるため、これは重要です。
ベストプラクティス
すべてのWebページで標準タグを使用してメタビューポートを使用することが重要です。
メタ文字セット
このタグは、ページの文字エンコードを決定するか、単にページに文字とテキストを表示する方法をブラウザに指示します。 Unicodeのエンコードに使用されるUTF-8とラテンアルファベットのエンコードに使用されるISO-8859-1を含む2つの一般的な文字セットがあります。 間違った文字でエンコードすると、ブラウザが正しく表示されなくなります。
あなたは興味があるでしょう
ビジネスを成功させる方法
ウェブサイトの読み込み速度：最適化のためのツール
ウェブサイトのヘルスチェック：ツールとヒント
UXとはどういう意味ですか？
（画像クレジット：Webチュートリアルを学ぶ）
文字の書式設定の問題により、ユーザーエクスペリエンスが低下し、ページが壊れているように見える場合があります。 それが引き起こす可能性のある他の問題には、ページにリンクしている人の数が少ない、滞留時間が短い、ページ滞在時間が短い、バウンス率が高い、検索エンジンがコンテンツを理解できないなどがあります。
ベストプラクティス
- すべてのWebページで常にメタ文字セットタグを使用してください
- 可能な場合はUnicode/UTF-8を使用してください
すべてのWebページをチェックして、UTF-8エンコーディングを使用していることを確認することが重要です。
メタリフレッシュリダイレクト
このタグは、一定時間後にユーザーを別のURLにリダイレクトします。 Googleはメタリフレッシュリダイレクトタグを理解して尊重しますが、SEOでは使用しないことをお勧めします。 これは、ほとんどのブラウザがそれらをサポートしておらず、セキュリティ上の懸念を引き起こしている間、ユーザーに混乱を引き起こす可能性があるためです。 また、リンク先URLが表示される前にページを解析する必要があるため、時間がかかります。 そのタグは次のようになります。
（画像クレジット：HostPapa）
ベストプラクティス
- 必要な場合にのみメタリフレッシュリダイレクトタグを使用してください
メタリフレッシュリダイレクトは悪い習慣であるため、可能な限り使用しないことをお勧めします。 Webページにそれらがある場合は、可能であれば、代わりに301または302リダイレクトを使用できます。
メタキーワード
メタキーワードは、最近よく使用されるメタタグの良い例です。 Googleはランキングにキーワードを使用しなくなったため、ターゲットキーワードのリストにメタキーワードタグを追加することはお勧めできません。 これは、多くの人が無関係なキーワードをユーザーに表示せずに詰め込んだためです。 Googleは、キーワードメタタグが頻繁に悪用されたため、それを無視しました。
Bingはキーワードメタタグを使用してスパムを通知するようになったため、これは問題になる可能性があります。 サイトからタグを削除することをお勧めします。
メタデータは、他のデータに関する情報を提供するデータです。 HTMLメタデータは、データに関する基本情報を要約しているため、特定のデータを簡単に見つけて操作できます。 手動で作成して精度を高めることも、自動で作成してより基本的な情報を提供することもできます。 Mataデータは、ドキュメントファイル、画像、ビデオ、スプレッドシート、およびWebページに使用されます。
メタタグジェネレータとは何ですか？
メタタグジェネレータを使用すると、SEOに必要で最も便利なHTMLメタタグを開発できます。
HTMLメタデータを使用する場合のベストプラクティス
常にDoctypeを宣言する
Doctype宣言は、SEOのHTMLメタタグの最初のものである必要があります。 使用されているXHTML標準についてブラウザに通知します。 一部の開発者は難しい選択と考えていますが、XHTML1.0の厳密なDoctypeを使用することをお勧めします。 コードが最新の標準に厳密に準拠していることを確認します。
意味のあるタイトルタグを使用する
タイトルタグを使用すると、Webページをより意味のある検索しやすくすることができます。
メタタグの説明リストを使用する
メタタグのリストは、検索エンジンスパイダーなどのユーザーエージェントにとって、Webページにより多くの意味を追加します。 検索エンジンがそれを検出するため、説明に単語やフレーズが繰り返されていないことが重要です。 Webページの目的を説明するときは、単純でわかりやすい説明を使用してください。
Divを使用してレイアウトを主要なセクションに分割する
Webサイトのデザインを作成するときは、最初のステップでWebページをセクションに分割することを検討してください。 これにより、複雑で長いマークアップを作成するときに混乱を防ぎ、divを過度に使用することを防ぎながら、クリーンで意図的なコードを促進します。
プレゼンテーションからコンテンツを混在させないでください
HTMLコンテンツをCSSが提供するコンテンツの視覚的表現と混合しないでください。 HTMLでインラインスタイルを使用するのではなく、スタイル用に個別のCSSファイルを作成することが非常に重要です。 これにより、コードに取り組んでいるあなたや他の開発者がすばやく変更を加え、ユーザーエージェントがコンテンツをより理解しやすくなります。
CSSの縮小と統合
一般的なWebサイトには、1つの主要なCSSファイルと、おそらくブラウザー固有の修正やCSSリセットなどの他のものがあります。 各CファイルがHTTPリクエストを行うと、Webサイトの読み込み時間が遅くなります。 すべてのコードから改行、スペース、タブなどの不要な文字を取り出し、統合可能なファイルを統合します。 これは、その問題を解決し、Webサイトの読み込み時間を改善するのに役立ちます。
JavaScriptを縮小、統合、下に移動
インラインJavaScriptの使用は避けてください。代わりに、JavaScriptライブラリを縮小および統合して、ページの1つを生成するために必要なHTTPリクエストの数を減らしてください。 ただし、ほとんどのブラウザで並行ダウンロードを行うことはできません。つまり、JavaScriptのダウンロード中にブラウザが他に何もダウンロードしないため、ページの読み込みが遅いように見えます。
これを回避するには、CSSを読み込んだ後、必要に応じてHTMLドキュメントの最後にJavaScriptを配置することで、できればbodyタグを閉じる前にJavaScriptを読み込むことができます。
見出し要素を賢く使用する
h1からh6の要素を使用して、HTMLのコンテンツの順序を示すと、コンテンツは、ユーザーエージェント、検索エンジン、および画面読み上げソフトウェアにとってより使いやすくなります。 ブログを使用する場合は、検索エンジンに最適であるため、サイト名ではなく、ブログ投稿のタイトルにh1要素を使用することをお勧めします。
適切な場所で適切なHTMLタグを使用する
混乱を避け、関連するコンテンツ構造を作成するために、使用可能なHTMLタグとそれらを正確に使用する方法を知っていることが重要です。
この記事がお役に立てば幸いです。
サイトの状態についてもっと興味深いことを知りたい場合は、個人的な推奨事項やアラートを取得し、DiibでWebサイトをスキャンしてください。 たった60秒です。
Divを過度に使用しないでください
一部の開発者は、より多くのdivタグを持つ他のdivタグにdivタグをラップして、多数のdivを作成します。 divは無意味な要素と見なされ、W3CHTML仕様に従って他に利用可能な適切な要素がない場合にのみ使用する必要があります。 責任を持って必要な場合にのみ使用することにより、多数のdivを持つことは避けてください。
ナビゲーションに順序付けされていないリストを使用する
ナビゲーション要素は、CSSと組み合わせると、Webサイトのデザインにおいて非常に重要な要素になります。 それはあなたのナビゲーションメニューが意味がありそして美しいのを助けます。 これを行うには、次の2つの方法があります。
（画像クレジット：Studytonight）
タグを閉じる
W3C仕様では、すべてのタグを閉じる必要があります。 タグを閉じないことは通常の基準では無効ですが、他のブラウザではページが正しく表示される場合があります。
小文字のマークアップを使用する
マークアップを小文字に保つことは、業界の標準的な方法です。 マークアップを大文字にすると、コードの読みやすさに影響しますが、Webページの表示は変わりません。
モジュラーIE修正を使用する
ページに問題がある場合は、条件付きコメントを使用してInternetExplorerに焦点を当てることができます。 古いバージョンのIEがサポートを必要としないように、作業が将来にわたって利用できるように、修正をモジュール化してください。
コードを検証する
検証を、悪い仕事に対する良い仕事の最終的な評価と見なすべきではありません。 検証する作業は必ずしも良いコードではありません。あるいは、完全に検証しない作業は必ずしも悪いコードではありません。
自動検証サービスを有用なデバッガーとして使用して、レンダリングエラーを特定できます。 HTMLを作成するときは、作業を頻繁に検証して、作業の完了後に特定するのが難しい問題を回避してください。
一貫してフォーマットされたコードを書く
クリーンで意図的なコードベースを作成すると、プロ意識が高まり、コードで作業する可能性のある開発者が簡単になります。 また、最初から適切にインデントされたマークアップを作成すると、作業の読みやすさが向上します。 例えば：
（画像クレジット：html.com）
過度のコメントを避ける
コードを文書化する目的は、コードを理解できるようにすることであり、コードにコメントを付けることは、Java、PHP、C＃などのプログラミング言語にとって合理的かつ論理的です。 ただし、マークアップは非常に自明であり、XHTML/HTMLのすべての行にコメントする必要はありません。 プロセスを説明するためにHTMLで多くのコメントをしている場合は、セマンティクスについて作業を確認することが役立ちます。
Diib：ここでHTMLメタデータの統計を取得してください！
これらの要素を使用し、ガイドラインに従うことは、SEOの取り組みに役立ちます。
優れたメタディスクリプションのような要素は、ランキングを向上させなくても、検索からのクリック率を高めます。 メタタグは現在、TwitterやFacebookなどのソーシャルメディアプラットフォームで使用されています。 タグを使用して、Facebookでデータがどのように共有されているかを確認できます。 Diib Digitalと提携すると、メタデータに関する重要な指標が得られるため、Webサイトの状態について効果的な決定を下すことができます。
ユーザーダッシュボードの機能の一部を以下に示します。
- Webサイトのパフォーマンスを向上させるように設計されたカスタマイズされた目標
- ドメインオーソリティのその他の技術的なSEOの問題について通知するアラート
- あなたがバックリンクを持っている壊れたページ（404チェッカー）
- キーワード、バックリンク、およびインデックスの監視および追跡ツール
- ユーザーエクスペリエンスとモバイル速度の最適化
- 画像タイトルの最適化
無料スキャンについてはここをクリックするか、800-303-3510に電話して、成長の専門家の1人に相談してください。