MarketoLPのお役立ちTips【OGP/metaタグ編】
Marketoのランディングページで、こんなつまづきはないでしょうか。
「とりあえずイベント告知のLPを作ってみた。
そこで、自社のfacebookページで告知するぞ!とURLを書き込んでみても、画像入りのシェアにならない…」
(もしくは想像していたのと違う画像が出てしまう)
これはランディングページに適切に「metaタグ(の一部であるOGタグ)」が設定されていないためです。
Marketoのランディングページでの、metaタグの設定方法をご紹介します。
metaタグ設定してる?
MarketoLPに「ページのmetaタグの編集」という設定があるのをご存じでしょうか。
左上のアクション>「ページのmetaタグの編集」で、小ウインドウが開きます。
「metaタグ」はページ内情報以外の情報(ドキュメントのタイトルや、カノニカルURLなど)をまとめて設定する事ができる箇所です。
主にSEO面などで役立つ表示を設定できます。
ここの「facebookのOGタグ」でmetaタグを設定することで、marketoLPでもこのような「FBシェアしたとき画像付きになる」という機能が設定できます。
OGPとは
OGPとはOpen Graph Protocolの略で、Webページの情報を検索エンジンやFacebookを含むSNSでより詳細にわかりやすく表示してくれるプロトコル(形式・決まり)です。
ファイルの種類など細かく設定できますが、基本は以下の設定を記入すれば、画像やタイトル、説明などが入ります。
<head prefix="og: http://ogp.me/ns#"> <meta property="og:title" content="タイトル"> <meta property="og:type" content="website または article"> <meta property="og:url" content="表示したいページのURL(絶対パス)"> <meta property="og:image" content="表示したい画像のURL(絶対パス)"> <meta property="og:site_name" content="サイト名。"> <meta property="og:description" content="表示したいページの説明"> <meta property="og:locale" content="サイトがサポートしてる言語。日本であればja_JP">
※websiteはトップページ、articleはサイトの下層ページ。
画像の大きさや縦横比は、どのsnsで共有するか等で細かく最適なものが変わりますが、Facebookの推奨する「1200px x 630px」の大きさで、pngファイルでアップロードしたものを設定しましょう。(pngはファイルサイズ大きくなりがちなので、画像圧縮ツールなどで圧縮することをおススメします)
LPに設定し、承認した後はfacebookのデバッガーで表示を確認してみてください。
(新規ページだと情報が出ない事もあるので、一度「取得」すると表示されるようになります。)
Facebookのシェアデバッガー
https://developers.facebook.com/tools/debug/
表示のプレビューや修正が必要な個所を教えてくれる
OGP設定はfacbook以外のサービスでもプレビュー表示を設定できます。
※slackでの表示例。
※LINEメッセージでも!
twitterは同じくmeta設定の入力で「Twitte:card」という設定で指定することができます。
noindex,nofollow – 検索エンジンについての指定
meta情報設定欄では、OGP以外にもタイトルやキーワードなどが設定できます。
この中の「ロボット」は検索エンジンに対する指定です。
noindex→検索結果に表示させる必要のないページです
nofollow→そのページからのリンクを拾わないようにしてください
会員向けページ、セミナー申し込みなど、対象者以外に見せないページ→noindex,nofollow
イベントLPなど、シェアされても良いもの、広く見てほしいもの→index,follow(遷移先によってはnoffolow)
というように使い分けて設定することで、適切なページ管理ができます。
誰に見せる何のページか
MarketoでのOGP設定含むmetaの設定についてご紹介しました。
metaについては、設定しなくてもテンプレートhtmlの設定どおりでページ自体は承認・公開できてしまうのですが、商用のwebページならここはきちんと設定しておきたいポイントです。
既にMarketoLPを活用されている方も、OGP設定以外にも、メールから誘導するアンケートページが検索結果に出てしまう…なんて事のないように、LPの設定を見直してみてください。