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

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

サイトのキャプチャ

Hey Metaで生成したコード

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

サイトのキャプチャ

Hey Meta

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

生成されたmetaのコード

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

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

HTMLページのhead内に記述する要素

HTMLページのhead内に記述する要素の総まとめ

sponsors

top of page

©2018 coliss