Facebook 调试器:在反向代理重写后更改 Canonical URL 值
Facebook Debugger: Change Canonical URL value after Reverse Proxy Rewrite
我创建了一个简单的应用程序,服务器根据用户代理呈现一些基本的 SPA 内容。
例如,如果 AngularJS 网站 link 在 Facebook 上共享,我有一个 Apache 重写规则将 link 重定向到呈现应用程序。渲染应用程序然后检查作为查询参数传递的 URL 和 returns 指定的渲染内容。
一切正常,但渲染结果有问题。 Facebook post 中显示的规范 link 是渲染应用程序的 link。
这是正在发生的事情:
Shared Link: www.example.com/the-shared-link
Facebook 的 post 结果:
不显示共享的 link (www.example.com/the-shared-link),而是显示渲染应用程序 (rendering.app.com)。但是如果我点击 Facebook post,它会打开正确的网站页面。
Facebook 调试器结果:
所有需要的元标记已添加到呈现的结果页面:
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta itemprop="description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta itemprop="image" content="http://www.example.com/some-image.jpg" />
<!-- Twiter Cards -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta name="twitter:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta name="twitter:description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta name="twitter:image:src" content="http://www.example.com/some-image.jpg" />
<!--/ Twiter Cards -->
<!-- Open Graph -->
<meta property="og:site_name" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta property="og:url" content="http://www.example.com/the-shared-link" />
<meta property="og:description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta property="og:image" content="http://www.example.com/some-image.jpg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="375" />
<!--/ Open Graph -->
Apache htaccess 重写规则:
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Facebot|Twitterbot/[0-9]|Pinterest|Pinterestbot|LinkedInBot/[0-9])
RewriteRule ^(.*)$ http://rendering.app.com/?url=%{REQUEST_URI} [P,L]
我做错了什么?如何将规范 url 更改为原始共享 link?
解决了我的问题!
rendering.app.com 域有一个强制 https 的重写规则。这会导致 301 HTTP 重定向(正如 Facebook 调试器所示)。
使用 https://rendeting.app.com 解决了我的问题。解决 301 HTTP 重定向的另一种方法是删除目标域中的 https 重写规则。
我创建了一个简单的应用程序,服务器根据用户代理呈现一些基本的 SPA 内容。
例如,如果 AngularJS 网站 link 在 Facebook 上共享,我有一个 Apache 重写规则将 link 重定向到呈现应用程序。渲染应用程序然后检查作为查询参数传递的 URL 和 returns 指定的渲染内容。
一切正常,但渲染结果有问题。 Facebook post 中显示的规范 link 是渲染应用程序的 link。 这是正在发生的事情:
Shared Link: www.example.com/the-shared-link
Facebook 的 post 结果:
不显示共享的 link (www.example.com/the-shared-link),而是显示渲染应用程序 (rendering.app.com)。但是如果我点击 Facebook post,它会打开正确的网站页面。
Facebook 调试器结果:
所有需要的元标记已添加到呈现的结果页面:
<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta itemprop="description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta itemprop="image" content="http://www.example.com/some-image.jpg" />
<!-- Twiter Cards -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta name="twitter:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta name="twitter:description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta name="twitter:image:src" content="http://www.example.com/some-image.jpg" />
<!--/ Twiter Cards -->
<!-- Open Graph -->
<meta property="og:site_name" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta property="og:type" content="website" />
<meta property="og:title" content="Lorem ipsum dolor sit amet, consectetur adipiscing elit." />
<meta property="og:url" content="http://www.example.com/the-shared-link" />
<meta property="og:description" content="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." />
<meta property="og:image" content="http://www.example.com/some-image.jpg" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="375" />
<!--/ Open Graph -->
Apache htaccess 重写规则:
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Facebot|Twitterbot/[0-9]|Pinterest|Pinterestbot|LinkedInBot/[0-9])
RewriteRule ^(.*)$ http://rendering.app.com/?url=%{REQUEST_URI} [P,L]
我做错了什么?如何将规范 url 更改为原始共享 link?
解决了我的问题!
rendering.app.com 域有一个强制 https 的重写规则。这会导致 301 HTTP 重定向(正如 Facebook 调试器所示)。 使用 https://rendeting.app.com 解决了我的问题。解决 301 HTTP 重定向的另一种方法是删除目标域中的 https 重写规则。