gpt4 book ai didi

javascript - Facebook 爬虫通过 angularjs 应用程序,未加载 JavaScript

转载 作者:行者123 更新时间:2023-12-03 02:47:10 24 4
gpt4 key购买 nike

我的网站是使用 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 上共享页面时遇到问题。因为调度的爬虫没有看到元标记,这就是返回的内容:

enter image description here

我猜这是因为爬虫没有加载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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com