- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的网站是使用 AngularJS 和 Worpress 作为单页面应用程序构建的,并且根据我正在路由的页面,我在 Controller 中定义了适当的元标记。这是我的 HTML header :
<meta property="og:url" content="{{ngMeta['og:url']}}" />
<meta property="og:title" content="{{ngMeta['og:title']}}" />
<meta property="og:description" content="{{ngMeta['og:description']}}" />
<meta property="og:image" content="{{ngMeta['og:image']}}" />
这工作正常,但当我尝试在 Facebook 上共享页面时遇到问题。因为调度的爬虫没有看到元标记,这就是返回的内容:
我猜这是因为爬虫没有加载javascript,所以没有加载meta标签。
我该如何解决这个问题,也许在服务器端工作并使用两种不同的重定向(在 apache mod 中),一种用于人类,一种用于社会检查(facebook、twitter 等)
编辑:我读过一篇文章,其中他们建议使用 apache 进行 mod 重写,以处理来自社交媒体爬虫的请求,并将它们重定向到服务器端静态页面,其中元数据由服务器处理。
正如已经说过的,我正在使用带有此永久链接的 WordPress https://<dns>/%category%/%postname%/
这是我的.htaccess
:
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
我应该添加这样的内容(每个类别的每个重写网址):
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Google.*snippet)
RewriteRule tracks/(\d*)$ https://<dns>/server/static-page.php?id=$1 [P]
RewriteRule articles/(\d*)$ https://<dns>/server/static-page.php?id=$1 [P]
将爬行者重定向到静态页面。但是我该如何处理这个服务器端静态页面中的请求呢?您有什么建议吗?
最佳答案
这就是我解决的方法,基本上你必须将 Facebook 的所有爬虫重定向到静态服务器页面,这样你就可以丰富开放图元。
Wordpress 会隐式重定向到 index.php
,因此您还需要在 .htaccess
中阻止 Facebook(以及您想要的所有社交机器人)的此重定向.
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{HTTP_USER_AGENT} !facebookexternalhit/1.1|Twitterbot|Pinterest|Google.*snippet
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} facebookexternalhit/1.1|Twitterbot|Pinterest|Google.*snippet
RewriteRule tracks/(.*) http://<fqdn>o/static.php?id=$1 [R]
</IfModule>
您可以使用您想要的所有正则表达式自定义 RewriteRule 以适应您的永久链接(tracks
是我的 Wordpress 的一个类别)。我的 WordPress 自定义永久链接是这样构建的:/%category%/%postname%/
。
在 apache conf 中重写后,您必须构建静态页面。我正在使用 WP API V2,这是我的页面:
<?php
$SITE_ROOT = "http://<fqdn>";
$jsonData = getData($SITE_ROOT);
makePage($jsonData, $SITE_ROOT);
function getData($siteRoot) {
$id = $_GET['id'];
$rawData = file_get_contents($siteRoot.'/wp-json/wp/v2/posts?slug='.$id);
return json_decode($rawData);
}
function makePage($data, $siteRoot) {
?>
<!DOCTYPE html>
<html>
<head>
<meta property="og:type" content="articles" />
<meta property="og:url" content="<?php echo $data[0]->link; ?>" />
<meta property="og:title" content="<?php echo $data[0]->title->rendered; ?> | Going Solo" />
<meta property="og:description" content="<?php echo $data[0]->excerpt->rendered; ?>" />
<meta property="og:image" content="<?php echo $data[0]->better_featured_image->media_details->sizes->medium->source_url; ?>" />
<meta property="og:image:width" content="500" />
<meta property="og:image:height" content="500" />
</head>
<body>
<img src="<?php echo $data[0]->better_featured_image->media_details->sizes->medium->source_url; ?>">
<h1><?php echo $data[0]->title->rendered; ?></h1>
<p><?php echo $data[0]->excerpt->rendered; ?></p>
</body>
</html>
<?php
}
?>
我的$id
是帖子的标题。如果您随后使用作为参数传递的 slug 检查静态页面,您将看到通过服务器端处理的所有开放图元:
http://<fqdn>/static.php?id=<slug>
关于javascript - Facebook 爬虫通过 angularjs 应用程序,未加载 JavaScript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48046415/
我正在通过 labrepl 工作,我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
我从未向应用商店提交过应用,但我会在不久的将来提交。 到目前为止,我对为 iPhone 而非 iPad 进行设计感到很自在。 我了解,通过将通用PAID 应用放到应用商店,客户只需支付一次就可以同时使
我有一个应用程序,它使用不同的 Facebook 应用程序(2 个不同的 AppID)在 Facebook 上发布并显示它是“通过 iPhone”/“通过 iPad”。 当 Facebook 应用程序
我有一个要求,我们必须通过将网站源文件保存在本地 iOS 应用程序中来在 iOS 应用程序 Webview 中运行网站。 Angular 需要服务器来运行应用程序,但由于我们将文件保存在本地,我们无法
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
假设我有一个安装在用户设备上的 Android 应用程序 A,我的应用程序有一个 AppWidget,我们可以让其他 Android 开发人员在其中以每次安装成本为基础发布他们的应用程序推广广告。因此
Secrets of the JavaScript Ninja中有一个例子它提供了以下代码来绕过 JavaScript 的 Math.min() 函数,该函数需要一个可变长度列表。 Example:
当我分别将数组和对象传递给 function.apply() 时,我得到 NaN 的 o/p,但是当我传递对象和数组时,我得到一个数字。为什么会发生这种情况? 由于数组也被视为对象,为什么我无法使用它
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章ASP转换格林威治时间函数DateDiff()应用由作者收集整理,如果你
我正在将列表传递给 map并且想要返回一个带有合并名称的 data.frame 对象。 例如: library(tidyverse) library(broom) mtcars %>% spl
我有一个非常基本的问题,但我不知道如何实现它:我有一个返回数据框,其中每个工具的返回值是按行排列的: tmp<-as.data.frame(t(data.frame(a=rnorm(250,0,1)
我正在使用我的 FB 应用创建群组并邀请用户加入我的应用群组,第一次一切正常。当我尝试创建另一个组时,出现以下错误: {"(OAuthException - #4009) (#4009) 在有更多用户
我们正在开发一款类似于“会说话的本”应用程序的 child 应用程序。它包含大量用于交互式动画的 JPEG 图像序列。 问题是动画在 iPad Air 上播放正常,但在 iPad 2 上播放缓慢或滞后
我关注 clojure 一段时间了,它的一些功能非常令人兴奋(持久数据结构、函数式方法、不可变状态)。然而,由于我仍在学习,我想了解如何在实际场景中应用,证明其好处,然后演化并应用于更复杂的问题。即,
我开发了一个仅使用挪威语的应用程序。该应用程序不使用本地化,因为它应该仅以一种语言(挪威语)显示。但是,我已在 Info.plist 文件中将“本地化 native 开发区域”设置为“no”。我还使用
读完 Anthony's response 后上a style-related parser question ,我试图说服自己编写单体解析器仍然可以相当紧凑。 所以而不是 reference ::
multicore 库中是否有类似 sapply 的东西?还是我必须 unlist(mclapply(..)) 才能实现这一点? 如果它不存在:推理是什么? 提前致谢,如果这是一个愚蠢的问题,我们深表
我喜欢在窗口中弹出结果,以便更容易查看和查找(例如,它们不会随着控制台继续滚动而丢失)。一种方法是使用 sink() 和 file.show()。例如: y <- rnorm(100); x <- r
我有一个如下所示的 spring mvc Controller @RequestMapping(value="/new", method=RequestMethod.POST) public Stri
我正在阅读 StructureMap关于依赖注入(inject),首先有两部分初始化映射,具体类类型的接口(interface),另一部分只是实例化(请求实例)。 第一部分需要配置和设置,这是在 Bo
我是一名优秀的程序员,十分优秀!