症状
AngularJSで構築されたSPAのサービスを運営しています。数ヶ月前から高速化の為にCDN経由で展開し始めたところ、動的に生成していた各種metaタグやOGPがGoogleやFacebookのツールで上手く展開されず、以下のようなソース状態で表示されてしまいます。
index.htmlに記載されているmetaタグコード
<meta property="og:url" content="{{ogMeta.url}}"> <meta property="og:type" content="website"> <meta property="og:title" content="{{ogMeta.title}}"> <meta property="og:description" content="{{ogMeta.description}}">
Facebook Debuggerを試した結果
Facebook Debuggerでクローラーが取得したRaw tags
Meta Tag <meta property="og:url" content="{{ogMeta.url}}" /> Meta Tag <meta property="og:type" content="website" /> Meta Tag <meta property="og:title" content="{{ogMeta.title}}" /> Meta Tag <meta property="og:description" content="{{ogMeta.description}}" /> Meta Tag <meta property="og:site_name" content="{{ogMeta.site_name}}" /> Meta Tag <meta property="og:image" content="{{ogMeta.image}}" />
※ Facebook Debuggerで情報取得した際のレスポンスコードは206になっています。
状況と推測
FastlyのCDNで配信をする前までは問題なく情報が展開され、正しい情報が取得できていました。
上記のFacebookのクローラーが取得したデータでAngularのExpression部分のカッコがエスケープされているのも気になるのですが、コンテンツ内容を動的に生成するのがCDN経由になったことで間に合っていないということでしょうか?
このAngularで構築されたアプリケーションは他のサービスでも使われており、Fastlyなど外部のCDNを使っていない場合には問題なくGoogle検索もFacebookのOGPも正しい情報が表示されています。
また、一応FacebookのOGP取得には関係ないかもしれませんがGooglebotへの対応としては
<meta name="fragment" content="!">
は記載済みです。
現状の対応
開発元からは、「恐らくFastlyが要因だろう。提供している他のサイトでは再現されていない」との回答で、Fastlyのサポートからは現在明確な回答を得られていません。
<p>などであれば```ng-bind```等も手段だと思うのですがmetaタグにおいて、現状を打開できる方法がわからず困っております。 考えられうる対応策などアドバイスいただければ助かります。あなたの回答
tips
プレビュー