タイトルやOGPなどのメタタグを生成してくれるWEBサービス「Meta Tags」

タイトルやOGPなどのメタタグを生成してくれるWEBサービス「Meta Tags」

タイトルやOGPなどのメタタグを生成してくれるWEBサービス「Meta Tags」

Meta Tagsは、タイトルやOGPなど、head内に記述するためのメタタグを生成してくれるWEBサービスです。

各種SNS用のメタタグも一括して生成できるので便利です。

Meta Tagsの使い方

Meta Tagsにアクセスして、サイトのURLを入力します。

URLの入力

左側の「CHANNELS」で対応させたいSNSを選択します。

SNSの選択

タイトルとディスクリプションを入力します。

タイトルとディスクリプションを入力

右側のプレビューを確認して、[GENERATE META TAGS]をクリックします。

メタタグの生成

表示されたコードをコピーして、<head>~</head>内に貼り付けましょう。

メタタグのコピー

以下のようなメタタグを生成してくれます。

<!-- Primary Meta Tags -->
<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate">
<meta name="description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
 
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://metatags.io/">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="og:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">
 
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://metatags.io/">
<meta property="twitter:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="twitter:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">
<meta property="twitter:image" content="https://metatags.io/assets/meta-tags-16a33a6a8531e519cc0936fbba0ad904e52d35f34a46c97a2c9f6f7dd7d336f2.png">

各SNS毎に分かれていてわかりやすいですね。

なお、画像をアップロードすればog:imageやtwitter:imageにセットしてくれますが、Meta Tagsがサービス終了してしまうと画像はリンク切れになってしまう可能性があります。なので、OGP用の画像は自サーバーに設置して、メタタグ内のファイルパスを差し替えた方が無難です。

あとがき

簡単な入力をすれば、OGP対応のメタタグが生成できて便利です。

時短したいときやOGPの記述がわからない時の勉強にも役立ちますね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です