2020.04.20

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でより詳細にわかりやすく表示してくれるプロトコル(形式・決まり)です。

公式:https://ogp.me/

ファイルの種類など細かく設定できますが、基本は以下の設定を記入すれば、画像やタイトル、説明などが入ります。

<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の設定を見直してみてください。

記事を書いた人

青山 奈津子