メタタグの価値を 恥ずかしい方法で学びました 何年も前に 自慢のランディングページを発送し リンクを数か所に投稿し どこにでも現れるのを 見ていました タイトルも説明もなく 壊れた画像アイコンもない 裸のURLのページ自体は 大丈夫でした - でも追加したことはありませんでした オープングラフ タグ, だから、すべてのソーシャルプラットフォームは推測に戻って下落, そして、それらのすべてが間違って推測. theコンテンツは、良いとリンクのプレゼンテーションはゴミでした, これは実際にはページが値するよりもはるかに少ないクリックを意味しました。
メタタグは、ページ自体を除いて、どこでもページがどのように見えるかを決定するHTMLの小さなブロックです: Google' sの結果では、Slackの展開では、FacebookまたはLinkedInカードでは、ツイートでは、標準のSEOタグ、オープングラフ、Twitterカード - の3 つの重複する標準があり、それぞれがしばしば同じ情報に対してわずかに異なるプロパティ名を構築します Toolz.dev そこに多くのコンテンツを書き込むので、メタデータを常に設定して、 メタ タグ ジェネレーター 1 つの入力セットから正しく、完全で、コピー準備の整ったタグ ブロックを生成するには、長さの警告を表示して、タイトルが再び切り捨てられることを決して送信しません。
tl;dr: メタタグは検索スニペットとソーシャルリンクのプレビューを制御します。 - 標準のSEOタグ、ほとんどのプラットフォームのオープングラフ、Twitterカード - の3 つの重複セットが必要であり、それらはコンテンツのほとんどを共有しますが、異なる属性名を使用します。 メタ タグ ジェネレーター 3 つすべてを 1 つのフォームからビルドし、タイトルが ~60 文字または説明を 160 に渡すと、テキストを安全にエスケープし、一致する JSON-LD ブロックをすべてブラウザーに送信すると警告します。
メタ タグとは何ですか?なぜ重要なのですか?
メタ タグは、ページ内に存在する要素です。 <head> ページに表示されるコンテンツではなく、ページに関する情報を運びます。 ザ・ <title> タグと <meta name="description"> タグは、最も古く、最も重要な 2 つです。通常、それらは、Google 検索結果でクリック可能な見出しと灰色の要約行を形成します。 正しく表示すると、結果がよく読まれてクリックが得られます。それらを省略すると、検索エンジンがページのテキストから何かを合成します。多くの場合、ぎこちないです。
これらの基本を超えて、2 つの社会的基準があります。 もともと Facebook の Open Graph ですが、LinkedIn、Slack、Discord、Pinterest、WhatsApp などから栄誉を授けられ、タグは次のようなタグを使用しています。 og:title、 og:description、そして og:image 共有リンクがカードとしてどのように表示されるかを制御します。 Twitter カードは、Twitter/X に対して同じ仕事をします。 twitter: タグ。重複が激しい - タイトルと説明は通常、3 つすべてで同一です - ただし、各プラットフォームは独自の名前空間を読み取るため、リンクが共有される可能性のある場所をすべてカバーするには、3 つすべてを提供する必要があります。
これが重要な理由は、レバレッジです。 リンク プレビューが完全で魅力的であると同時に、同じコンテンツが魅力的により多くのエンゲージメントを獲得します。 適切なタイトルと説明を検索するとクリックスルーが可能です。適切なオープン グラフ カードは、すべてのソーシャル シェアからクリックを取り出します。 メタ タグは、ページごとに 1 回限りの設定であり、ページが見つかるたびに報われます。これは、慎重に行う価値のある作業です。 ザ・ メタ タグ ジェネレーター セットアップが、メモリからのコピー ペーストではなく、フォームの入力タスクになるように存在します。
メタ タグ ジェネレーターはどのようにしてタグを作成しますか?
ジェネレータは、単一の構造化された入力セット - タイトル、説明、画像、URL、サイト名、および一握りのオプション - を取得し、それらをファンアウトして、HTMLの3 つの調整されたブロックを理解するファンアウトは、なぜ1 つのフォームが非常に多くのタグを生成するのかを説明します。
あなたのコア フィールドから、最初に プライマリ タグ: the <title>、メタディスクリプション、オプションのキーワード、作成者、ロボット、言語、テーマの色、および標準的なリンク。 次に、同じタイトル、説明、および画像を再利用して、 グラフ ブロックを開く と og: プロパティ名、追加 og:type、 og:url、そして og:site_name。 最後に、それは ツイッターカードブロック と twitter: カードのスタイルとハンドルをマップした名前などの名前 twitter:site あんど twitter:creator。これら 3 つはすべて同じ入力から取得されるため、自動的に同期が維持されます。誤って Facebook に 1 つのタイトルを付けたり、Twitter に別のタイトルを付けたりすることはできません。
2 つの詳細により、出力を安全に貼り付けることができます。 まず、実際に入力したフィールドのみをプロデュース タグにするので、空に出荷することはありません content="" 属性。 第 2 に、すべての値は HTML エスケープされます。説明の引用符、アンパサンド、または角かっこは、そのエンティティに変換されるため、属性から抜けてマークアップが破損することはありません。 ザ・ メタ タグ ジェネレーター また、オプションで、一致する JSON-LD 構造化データ ブロックを発行します。これは、ページを検索エンジンに記述する別の方法ですが、補完的な方法です。
タイトルとメタディスクリプションはどのくらいの期間である必要がありますか?
これは、ほとんどの人をつまずかせる問題であり、答えは表示幅に関するものであり、難しい文字の上限ではありません。 検索エンジンは、割り当てられたスペースを超えるタイトルと説明を切り捨てます。そのため、実際の制限は、テキストが省略記号で切り取られるポイントを超えています。
タイトルの場合は、およそ50 から60 文字を目指します Googleは、約600 ピクセルまでの幅のタイトルをレンダリングし、一般的なテキストでは約60 文字まで動作し、最後に切り刻む過去については、メタ記述については、約120 から160 文字を目指します; デスクトップでは切り捨ての前に記述がおよそ160 まで実行でき、モバイルでは時々短くなります。 どちらもピクセル単位で測定されるため、どちらの制限も正確ではありません。 - 幅の広い文字でいっぱいのタイトルは、狭い文字でいっぱいのタイトルよりも早く切り捨てられます - しかし、文字ガイドラインは、周りに設計するのに十分なほど近くにあります。
ザ・ メタ タグ ジェネレーター counts characters live and warns you as you cross the thresholds: a title over 60 or a description over 160 gets flagged so you can trim it before it shippes.また、タイトルが非常に短いときは、20 文字のタイトルがキーワードに使用できる部屋を無駄にするので、ナッジを付ける。これらはルールではなくガイドラインです - 少し長いタイトルは大惨事ではありません - しかし、書いている間にカウントを見ると正直になります。タイトルや説明をたくさん調整している場合は、 ワードカウンター 長さの目標を達成する必要があるより長いコピーに便利です。
SEO タグ、オープン グラフ、Twitter カードの違いは何ですか?
それらはさまざまな消費者にサービスを提供しており、どれがどれであるかを知ることで、1 つしかカバーしていないのに、もう終わったと思うのを防ぎます。 3 つのセットが共有するフィールドにどのように並んでいるのかを次に示します。
| 目的 | SEOタグ | オープングラフ | ツイッターカード |
|---|---|---|---|
| ページタイトル | <title> |
og:title |
twitter:title |
| まとめ | meta name="description" |
og:description |
twitter:description |
| プレビュー画像 | ー | og:image |
twitter:image |
| 正規のアドレス | link rel="canonical" |
og:url |
twitter:url |
| カードスタイル | ー | og:type |
twitter:card |
| 属性 | meta name="author" |
og:site_name |
twitter:site |
SEO列はGoogleが検索結果のために読むものです Open Graph列はほとんどのソーシャルプラットフォームやチャットプラットフォームがリンクカードのために読むものです Twitter列はTwitter/Xが読むものです 重なりは明白です - タイトルと説明は3 つすべてで繰り返されます - しかし、各プラットフォームが独自の名前空間しか見ていないため、列を省略するとプラットフォームは推測に戻ります メタ タグ ジェネレーター 1 つのフォームから 3 つの列すべてを正確に埋めるため、プラットフォームの推測を残すことはありません。
JSON-LD 構造化データはまだ必要ですか?
メタ タグと構造化データは、さまざまな質問に答えます。したがって、有用な情報は互いに置き換えるのではなく、補完します。 メタタグは、ページを表示する方法をプラットフォームに伝えます。JSON-LD は、豊富な結果をアンロックできるマシン読み取り可能な方法で、ページの内容を検索エンジンに伝えます。
json-ld は、json のブロックで、 <script type="application/ld+json"> タグ, これは、タイプされたエンティティとしてページを記述します - ウェブサイト, 記事, 製品, レシピ, 等々 - 名前付きプロパティと. search エンジンは、関係を理解するためにそれを使用し、, 適切な場合には, 記事の署名欄のような強化された結果を表示するために, スター評価, または検索で直接よくある質問アコーディオン. it は、タイトルと説明を行うようにあなたのスニペットを制御しません; それは、上に意味の層を追加します。
ザ・ メタ タグ ジェネレーター メタタグと一緒にスターターJSON-LDブロックを放射し、Open Graphタイプに基づいてWebSiteまたはArticleとして入力され、同じフィールドから入力されます。 type-specificプロパティで拡張できる強固な基盤です。 structuredデータは、豊富な結果の対象になりたいときはいつでも追加する価値があります。 、魔法のランキングレバーではありませんが - それは機能を有効にします、それはそれらを強制しませんこれらの部分がどのように組み合わされるかのより広い全体像のために、 Web 開発者ツールキット まとめは、私が使用する周囲のツールをカバーしています。
メタ タグ ジェネレーターの一般的な使用例
新しいページまたはサイトの立ち上げ
明らかなもの。 新しいページにはすべてタイトル、説明、ソーシャル カードが必要です。SEO、オープン グラフ、Twitter タグの完全なセットを手作業で入力するのは、退屈でエラーが発生しやすいものです。 フォームに一度記入して完全なブロックをコピーすると、面倒なタスクが 32 秒のタスクに変わります。長さの警告は、ページが最初の日に切り捨てられるのではなく、完全に表示されるスニペットで起動することを意味します。
リンクの不良または見つからないプレビューの修正
共有リンクが画像や間違ったテキストなしで表示されたら、ほとんどの場合、原因が欠落しているか不正な形式になっています Open Graph タグ ジェネレーターでタグを再構築する - 確認します og:image、 og:title、そして og:description すべて存在し、正しい - プレビューを修正します。更新後、関連するプラットフォーム' s キャッシュはデバッグ ツールを通じて更新する必要がある場合がありますが、タグ自体は正しく表示されます。
チーム全体でのメタデータの標準化
複数の寄稿者がいるプロジェクトでは、メタ タグ ドリフト: 1 つのページに Twitter タグがあり、もう 1 つのページには、推奨される長さの 2 倍の説明があります。 完全なタグ セットがどのようなものかの参照として単一のジェネレーターを使用すると、全員が同じ形のメタデータを生成し続けます。 出力は、プロジェクトが期待するタグの正確なドキュメントとしても機能します。
フレームワークのメタデータの準備
next.js、nuxt、react、または類似の場合、raw を貼り付けません <meta> タグ - あなたはヘッドやメタデータAPIに値を供給 ジェネレータは、まだどのタグや値のために必要な真実のソースとして有用です: フォームに記入し、完全なセットを読み取り、framework& #39; sメタデータオブジェクトに変換するどのについての推測を削除します og: あんど twitter: 含めるフィールド。
なぜブラウザでメタ タグを生成するのですか?
ザ・ メタ タグ ジェネレーター 完全にクライアント側で実行されます 入力したタイトル、説明、URL、画像リンクはブラウザーに留まり、アップロードされることはなく、ツールは一度ロードされるとオフラインで動作します まだ公開されていないページ - 未リリースの製品、クライアント& #39; s ドラフトキャンペーン、内部ツール - のメタデータを準備していることが多いため、プライバシーが重要です それをサーバー側のジェネレーターに貼り付けることは、未発表の計画を他の人に渡すことを意味します& #39; s ログ; ブラウザー内で行うことは、マシンから離れることがないことを意味します オンライン ツールのデータ プライバシー ガイドは、なぜこれを交渉の余地のないものとして扱うのかを説明しています。
メタデータの作業は、いくつかの隣接タスクにも接続します。 ザ・ スラッグジェネレーター 正規のクリーンな URL を作成し、 og:url タグを指します。 ザ・ HTML エンティティ エンコーダ 頑固なキャラクターを手で脱出する必要がある場合に役立ちます。 そして、 URL エンコーダ/デコーダ 正規の URL を時折ハングするクエリ パラメータのエンコードを処理します。 一緒に、ページの配送を正しく行う小さな厳格な仕事をカバーします。
フェイク
ジェネレーターはどのメタタグを作成しますか?
標準の SEO タグ (タイトル、説明、キーワード、作成者、ロボット、言語、テーマ色、標準) に加えて、og:title、og:description、og:image、og:url などの Open Graph タグと、一致する Twitter Card タグを作成します。また、JSON-LD 構造化データ ブロックも発行できます。入力したフィールドのみがタグを生成するため、出力はクリーンなままになります。
タイトルとメタディスクリプションはどのくらいの期間で行う必要がありますか?
約 50 から 60 文字のタイトルと約 120 から 160 文字の説明を目指してください。 Google は、正確な文字ではなくピクセル単位で幅を測定するため、これらの点を超えてテキストを切り捨てます。 ジェネレーターは入力としてカウントされ、検索結果でタイトルまたは説明が切り落とされる可能性がある場合に警告します。
オープン グラフ タグとは何ですか?必要なのは何ですか?
グラフ タグを開くと、Facebook、LinkedIn、Slack、Discord、その他の多くのプラットフォームでページを共有するときにページの外観が制御されます。 それらがないと、共有リンクに画像やぎこちないフォールバック テキストが表示されない場合があります。 コンテンツが共有されている場所ならどこでも魅力的で予測可能なリンク プレビューが必要な場合は、オープン グラフ タグを強くお勧めします。ジェネレーターが作成します。
2 つの Twitter カードの違いは何ですか?
サマリー カードには、タイトルと説明の横に小さな四角形のサムネイルが表示され、SUMMARY_LARGE_IMAGE はその上に大きなバナー画像を表示します。 プレビューを支配する広範な高品質の共有画像がある場合は、大画像カードを使用し、要約を使用してよりコンパクトなカードにします。 ジェネレーターを使用すると、それらを切り替えて、正しい Twitter:card 値を書き込むことができます。
生成されたメタタグはどこに置くのですか?
HTML ページの先頭要素内にブロックを貼り付けます。理想的には、他のスクリプトよりも先頭に近い場所に貼り付けます。 next.js、react、または vue などのフレームワークでは、生成された HTML を正確にどのタグと値に含めるかを参照として、フレームワークの head またはメタデータ API を介して同等のタグを追加します。
グラフ タグを開いている場合でも、正規の URL が必要ですか?
はい。 正規リンクは、コンテンツの重複の問題を避けるために、どの URL がページの信頼できるバージョンであるかを検索エンジンに伝え、OG:URL はソーシャル プレビューで使用される URL を設定します。 通常、値は同じですが、目的が異なります。そのため、両方を設定することをお勧めします。
メタ タグ ジェネレーターは無料でプライベートですか?
はい。 制限なく完全に無料で、すべてのタグがブラウザ内の JavaScript で組み込まれています。 入力したテキスト、URL、および画像リンクはサーバーに送信されないため、未公開または内部ページのメタデータを安全に準備できます。
メタ タグを追加すると、検索ランキングが向上しますか?
メタ タグは、検索エンジンやソーシャル プラットフォームがページを正しく表示するのに役立ちますが、多くの要因の 1 つです。 強力なタイトルと説明により、クリック率が向上し、構造化データにより豊富な結果が可能になりますが、コンテンツの品質、リンク、サイトの健全性はランキングを大きく左右します。 優れたメタ タグは、ランキングのショートカットではなく、必要な基礎として扱います。
