TwitterカードやOGPなど、head内のmetaに記述するコードを簡単に生成できるオンラインサービス -Hey Meta

Post on:2018年1月17日

sponsors

head内のmetaに記述するTwitterカードやFacebookのOGPのコード、Googleなどの検索エンジン用のコードを確認・生成できるオンラインサービスを紹介します。

Hey Metaで生成したコード

オンラインサービスはこちら。

登録などの面倒なことは一切不要で、簡単に利用できます。
サイトにアクセスし、metaのコードを生成したいサイトのURLを入力します。

サイトのURLを入力し、Submitをクリック

すぐに、サイトの現在の状況を確認できます。

ソーシャルカードのプレビュー、タイトル

想定通りのものが表示されていました。

サイトの説明文、イメージ、アドレス

最後の「Generate」ボタンは、フォームの入力欄に表示されているテキストは編集して直すことができます。

コードの生成は「Generate」ボタン

ボタンをクリックすると、Googleなどの検索エンジン用のコード、FacebookのOGPのコード、Twitterカードのコードが生成されます。

生成されたmetaのコード

あとは、コードをコピーして、サイトのhead内にペーストして利用します。

head内に記述する最小限の構成、meta要素や、link要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などは、下記が参考になります。