web-dev-qa-db-ja.com

Angular 4-Facebookのメタタグを動的に更新（グラフを開く）

Facebook/Whatsapp共有ダイアログで選択されるように、メタタグを動的に追加/更新するにはどうすればよいですか？

APIからコンポーネントのデータを取得したら、メタサービスを使用してメタタグを動的に追加/更新するために、angular 2アプリケーションをangular 4にアップグレードしました。

これまでのところ、私のコンポーネントには、

this.metaService.updateTag({ property: 'og:title', content: pageTitle });
this.metaService.updateTag({ property: 'og:url', 'www.domain.com/page' });
this.metaService.updateTag({ property: 'og:image', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:url', content: coverUrl, itemprop: 'image' });
this.metaService.updateTag({ property: 'og:image:type', content: 'image/png' });

既にデフォルト値を持つ静的タグを追加しているため、updateTagを使用しています。このコードは、検査時にメタタグ値を正常に更新します。

Facebook/Whatsappデバッガーツールはjavascriptを実行しないので、その環境で実行されることはおそらくないでしょう。

私はhttps://developers.facebook.com/tools/debug/を使用していますが、それは常に意味のあるデフォルトのタグ値を選択します。

私の質問は、Facebook/Whatsappが更新されたタグ値を動的に取得するための方法は何ですか？ Angular 4を使用し、API呼び出しを介してすべてのデータをロードしているため、ページがロードされてスクリプトが実行される前にデータを取得することはできません。

angularfacebook-graph-apifacebook-opengraphmeta-tags
16
Ali Baig

Open Graph OGタグはソースコード内にある必要があります！

Facebook、Twitter、coは、javascriptを使用せずにプレーンHTMLをスクレイピングするだけなので、htmlソースコードにog：image og：titleやog：descriptionなどのオープングラフタグを含む静的なhtmlページを提供する必要があります。 Angular jsを介してdomを動的に更新するため、クローラーは最初のindex.htmlを取得するだけです。

開いているグラフタグを含むHTMLを提供して問題を解決するには、いくつかの方法があります。

  • angular universalを使用したサーバーサイドレンダリング
  • ページをレンダリングするプロキシを使用する
  • index.htmlをその場で上書きしてogタグを置き換えます
  • 静的なhtmlページの提供（これが角度でサポートされているかどうかはわかりません）

すでに ngx-meta のようなものを使用してogタグを追加していると思いますか？

Angular Universal-Angular 2/3/4/5のメタタグを使用したサーバー側レンダリング

サーバー側のレンダリングが問題を解決するのに最も適切な方法だと思います。このためには、ノードサーバーをホストするか、たとえばAWSラムダ。これの欠点は、アプリを積極的にホストする必要があり、もはや静的に提供できないことです。とにかく、これはSEOを改善するので、これが最良の方法のようです。 Angular Universalは検索する用語です：

ビルド時のAngular Universal Prerendering

また、ビルドプロセスで特定のルートを事前レンダリングし、複数の事前レンダリングされたindex.htmlファイルを持つ静的アプリとしてangularを提供できます。静的ルートがほとんどない場合、これは完全に機能します。動的なパーツを使用したルート、これは解決策ではありません。サーバー側のレンダリングに進みます。 angular universalボイラープレート には、この例も含まれています。 prerender.ts を参照してください。

代替ソリューション

事前レンダリングAngular OGタグを提供するプロキシを使用

ビルドプロセス中にサーバーサイド/プリレンダリングの実装を避けたい場合（angularユニバーサルのセットアップは、構造化されていないアプリでは苦痛になることがあります）。ページをプリレンダリングするプロキシサービスを使用できます。例えば prerender.io を見てください。

Index.htmlを上書きする

すべての要求をog：tagsを上書きするスクリプトにリダイレクトします。例えば。 PHPおよび.htaccessを使用してogタグを上書きする これは現代の環境でも可能です。たとえば、cloudfront/apiゲートウェイとラムダ関数を使用できます。しかし、この例。

Facebookキャッシュとオープングラフデバッグ

キャッシュは、最初のクロールから開いているグラフ情報をまだキャッシュしている可能性があることに注意してください。ソースコードが最新のものであり、すべてのキャッシュ、nginxxなどのリバースプロキシ、cloudfrontがクリアされていることを確認してください。

Facebook Debugger を使用して、開いているグラフキャッシュをデバッグし、facebook opengraphキャッシュをクリアします

15
Manuel

これを試してください（fb API：v2.12を使用）：

FB.ui({
  method: 'share_open_graph',
  action_type: 'og.shares',
  action_properties: JSON.stringify({
    object : {
      'og:url': 'url', // your url to share
      'og:title': 'title',
      'og:site_name':'site_name',
      'og:description':'description',
      'og:image': 'image Url',//
      'og:image:width':'250',//size of image in pixel
      'og:image:height':'257'
    }
  })
}, function(response){
  console.log("response is ",response);
});
5
Rainer Larin-Fonseca

Angular 4を使用している場合、Angular Universalでページサイドを作成してください。この方法で、プログラムでHEADタグを構築できますページはブラウザによってロードされます

https://universal.angular.io/

3
Dean Chalk

2018/19現在、あなたの主な目標がSEO（または、おそらく「SMO」-ソーシャルメディアの最適化-GooglebotはJavaScriptの評価に優れているが、ほとんどのソーシャルメディアボットはそうではないため） Angular Universalではなく、ヘッドレスブラウザを使用するもの。

これは、マニュエルの答えから「プロキシ」カテゴリに分類されますが、ここにまだ投稿されていないので、2つ（および半分）の本当に素晴らしいソリューションがあります。

Rendertron

これはGoogle Chromeチーム自体によって管理されており、アプリをレンダリングして返すための優れたエンドポイントです。

レンドラ

Rendertronによく似ていますが、これにはミドルウェア（つまり、リクエストをレンダリングする場所としない場所を決定する場所と方法）が既に組み込まれており、キャッシングなどのより高度で便利な機能も備わっています。そのため、「ゼロ構成が必要」という目標に非常に近く、Rendertronよりも簡単にセットアップできます。

操り人形師

Google Chromeチーム（および実際にRendertronで使用）によって維持されます）Puppeteerは、ヘッドレスChromeのノードベースの高レベルAPIを提供します。 Puppeteerで適切なソリューションを実装できますが、RendertronやRendoraを使用するだけでなく、明らかに多くの作業が必要になります。

Angular Universalと比較して、このソリューションにはhugeという利点があり、アプリプロジェクトは使用済みSSRツールに対して完全に不可知論的であり続けることができます。 （Angular以外の他の技術を使用することもできます。）これは明らかに、独自のコードの柔軟性を高めるだけでなく、パッケージの選択にも柔軟性をもたらします。Angular Universal compatible or not。彼らの不利な点は少しのパフォーマンスオーバーヘッドかもしれませんが、ボットをターゲットにするだけならこれはおそらく重要ではありません。そして、Rendoraのキャッシングを使用する場合、これは真実ではなく、実際にパフォーマンスが向上するかもしれません。ただし、これがAngular Universalで達成できるパフォーマンスの向上に匹敵する場合はわかりません。ただし、SSRからパフォーマンスの向上について話すときは、常にとにかく最初のページが読み込まれるまでの時間です。したがって、通常はユーザーの最初のロード後、アプリでより多くのことを行います。それらが存在せず、主に匿名ユーザーが1つのページをチェックするだけで、最初にPWAを作成するのではなく、古典的なWebページを作成する場合は...

tl; drは、RendoraとRendertronをチェックアウトするだけで、あなたが探しているものであり、非常に簡単かつ迅速にあなたをそこに連れて行くことができます。

1
Jey DWork

In angular 6、動的メタタグがindex.htmlに反映されない

.htaccessを使用して動的なメタコンテンツを取得する唯一の方法です。

必要な動的コンテンツをレンダリングする場合は、.htaccessを利用してください。

RewriteCond％{HTTP_USER_AGENT} facebookexternalhit/1.1 | Twitterbot | Pinterest | linkedinbot | WhatsApp | Viber | SkypeUriPreview | Google。* snippet [NC、OR]

詳細情報：

https://Gist.github.com/thoop/8072354

https://www.winhelp.info/create-browser-whitelist-with-htaccess.html

0
khushali