URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」

URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」

URLを入力するだけでOGPタグを生成してくれるWEBサービス「HEY META」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


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

HEY METAは、サイトのURLを入力するだけで、OGPタグを自動生成してくれるWEBサービスです。

スポンサードリンク

HEY METAの使い方

HEY METAにアクセスして、URLを入力します。ブログの場合は、記事ページのURLを入力してください。

サイトURLの入力

解析が完了すると、下記の項目が表示されますので、変更したい箇所があれば修正します。

HEY METAの解析結果

  • Social Card Preview
  • Title
  • Description
  • Image
  • Website Address

[Generate]をクリックすると、OGPタグが生成されます。

OGPタグの生成

今回試しに生成してみたタグは、以下の通りです。

<!-- HTML Meta Tags -->
<title>HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」</title>
<meta name="description" content="DirtyMarkup Formatterは、HTML・CSS・JavaScriptのコードを整形することができるWEBサービスです。コードを貼り付けて、ボタンをクリックするだけで綺麗に整形することができます。">
<!-- Google / Search Engine Tags -->
<meta itemprop="name" content="HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」">
<meta itemprop="description" content="DirtyMarkup Formatterは、HTML・CSS・JavaScriptのコードを整形することができるWEBサービスです。コードを貼り付けて、ボタンをクリックするだけで綺麗に整形することができます。">
<meta itemprop="image" content="http://techmemo.biz/wp-content/uploads/2018/01/dirtymarkupformatter.png">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="http://techmemo.biz/webservices/dirtymarkup-formatter">
<meta property="og:type" content="website">
<meta property="og:title" content="HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」">
<meta property="og:description" content="DirtyMarkup Formatterは、HTML・CSS・JavaScriptのコードを整形することができるWEBサービスです。コードを貼り付けて、ボタンをクリックするだけで綺麗に整形することができます。">
<meta property="og:image" content="http://techmemo.biz/wp-content/uploads/2018/01/dirtymarkupformatter.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML・CSS・JavaScriptのコードを綺麗に整形することができるWEBサービス「DirtyMarkup Formatter」">
<meta name="twitter:description" content="DirtyMarkup Formatterは、HTML・CSS・JavaScriptのコードを整形することができるWEBサービスです。コードを貼り付けて、ボタンをクリックするだけで綺麗に整形することができます。">
<meta name="twitter:image" content="http://techmemo.biz/wp-content/uploads/2018/01/dirtymarkupformatter.png">
<!-- Meta Tags Generated via http://heymeta.com -->

あとがき

URLを入れるだけで、解析して自動的にOGPを生成してくれるので便利ですね。時短に貢献してくれると思いますので、OGPを記述する時にぜひお役立てください。

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

Twitter で
スポンサードリンク

関連記事

コメントを残す

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