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

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

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

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="https://techmemo.biz/wp-content/uploads/2018/01/dirtymarkupformatter.png">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://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="https://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="https://techmemo.biz/wp-content/uploads/2018/01/dirtymarkupformatter.png">

<!-- Meta Tags Generated via http://heymeta.com -->

あとがき

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

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

Twitter で

コメントを残す

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