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

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

タイトルやOGPなどのメタタグを生成してくれるWEBサービス「Meta Tags」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

スポンサードリンク

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毎に分かれていてわかりやすいですね。

あとがき

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

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

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

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。