【发布时间】：2018-10-28 23:42:06
【问题描述】：
我创建了一个简单的应用程序，服务器根据用户代理呈现一些基本的 SPA 内容。
例如，如果 AngularJS 网站链接在 Facebook 上共享，我有一个 Apache 重写规则将该链接重定向到渲染应用程序。渲染应用然后检查作为查询参数传递的 URL 并返回指定的渲染内容。
一切都按预期工作，但渲染结果存在问题。 Facebook 帖子中显示的规范链接是渲染应用程序的链接。 以下是正在发生的事情：
共享链接：www.example.com/the-shared-link
Facebook 的发帖结果：
而不是显示共享链接 (www.example.com/the-shared-link)，而是显示渲染应用程序 (rendering.app.com)。但如果我点击 Facebook 帖子，它会打开正确的网站页面。
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]
我做错了什么？如何将规范网址更改为原始共享链接？
【问题讨论】：
-
如果您的设置实际上在内部正确代理了请求，Facebook 应该不会看到 301。所以显然，它没有......
-
有没有其他办法可以解决这个问题？
-
不认为有，Facebook 在告诉用户内容的来源方面非常严格。如果有的话，您需要进行设置，以便
www.example.com/the-shared-link返回呈现的元数据。 -
返回渲染的元数据是什么意思？可以举个例子吗？
-
不是元数据的变化，而是 Facebook 从哪个地址获取的。如果您希望 Facebook 将文章的来源显示为
www.example.com，那么您必须共享来自该域的 URL，并让该 URL 将元数据返回给 Facebook。基本上，rendering.app.com是您需要摆脱的，并直接在www.example.com/...URL 下设置两个部分（您的 Angular 应用程序和返回元标记的预渲染）。
标签： apache .htaccess facebook-graph-api reverse-proxy facebook-debugger