ランディングページ(LP)でFacebookのOGPをスクリーンごとに設定する

>ランディングページ(LP)でFacebookのOGPをスクリーンごとに設定する

ランディングページ(LP)でFacebookのOGPをスクリーンごとに設定する

OGPは割と面倒です。ベタ打ちのサイトなら、ページごとにマークアップファイル(HTMLなど)が存在するため、少し面倒ですがページごと(記事ごと、headごと)にOGPを実装していくのみですし、CMSの場合はもっと楽できてプラグインで対応してしまうというのも一つの手です。

状況

お客様から後から言われて少しだけ考えてしまったケースです。アプリ用のLPで、課金の代わりとしてFacebookやLINEなどのソーシャルシェアによって機能を増やしていけるようなアプリケーション用のランディングページ。ランディングページ自体は1ページでも、スクリーンごとに切り替わるモダンな形で、例えば”xxx.com.tw/#1″のスクリーンがアプリ1の紹介、”xxx.com.tw/#2″のスクリーンがアプリ2の紹介といった具合。構造的には1ページなのに実質的に複数ページがある、という状況です。

OGPは1つのページに1つしか設定できません。同一head内に複数metaでogpを記述すると、ただでさえキャッシュ問題が面倒な(最近Facebookのdebuggerにキャッシュが実装されましたが)Facebook OGPの挙動がさらに面倒になります。1つのページ内に複数のOGPを設定、というへんてこな状況への打開策を考えます。

・動的な生成となると重くなるし時間かかるし面倒です。面倒というより最適では無い気がします。
・そもそもベタ打ちの1ページスタイルの(ディレクトリでページをわけない)サイトですが、納品後はお客様側でHTMLを管理したい案件。PHPも避けたいです。

解決

異なる3つのOGPを設定したいとして、
1.html
2.html
3.html
をそれぞれ用意します。中身はOGP用のMetaのみ。無駄なjsやcss、ウェブフォントやfaviconなどの読み込みも取っ払います。FacebookのクローラーにOGPを取得させるためだけのhtmlです。そもそもこの案件はアプリ内のシェアボタンのためなので、目に見えるURLではないのでOKなのです。それぞれOGP部分を固有に設定します。

それぞれのOGP部分の最後に、

<meta http-equiv=”refresh” content=”0;URL=http://xxx.com.tw/#1″>

この便利なリダイレクトタグで各スクリーンでそれぞれ/#1, /#2, /#3に飛ばしてあげれば完成です。シェア用のURLはそれぞれのhtmlファイル。”0″はリダイレクトにかかる秒数[s]なので、0でOKです。根本的な解決かどうかは分かりませんが、重くならずにすみましたし何より管理がシンプルかつロジカルになったため、アリなのではと考えています。

2017-02-21T15:45:22+00:00 2016.02.26|

About the Author:

弊社は台湾を拠点として、中国(北京、上海、広州、深セン)、香港、韓国などアジア各国のWEB関連会社と幅広いネットワークを形成するWeb制作会社です。高度なWEB技術と翻訳力をベースにWordPressなどのCMSを中心としたHP(ホームページ)作成やSEO、リスティング広告などWEB関連業務を幅広く請け負っています。