.htaccess 允许社交媒体爬虫工作（Facebook 和 Twitter）| Angular 11 个SPA

Question

我创建了一个 SPA - 单页应用程序 Angular 11，我将其托管在共享托管服务器上。

我遇到的问题是我无法在社交媒体（Facebook 和 Twitter）上分享我拥有的任何页面（第一个路径 - / 除外），因为元标记没有更新（我有根据请求的页面处理每个页面的元标记的服务（我知道这是因为 Facebook 和 Twitter 没有抓取 JavaScript）。

为了解决这个问题，我尝试了 Angular Universal（SSR - 服务器端渲染）和 Scully（创建静态页面）。两者（Angular Universal 和 Scully）都在解决我的问题，但我更愿意使用默认的 Angular SPA 构建。

我采用的方法：

文件结构（共享主机服务器/public_html/）：

- crawlers/
           - crawlers.php
           - share/
                   - 404.json
                   - about.json
                   - work.json
- .htaccess
- index.html

crawlers.php 包含以下内容：

<?php

$page = filter_input(INPUT_GET, 'page');

if (file_exists('./share/'.$page.'.json')) {
    $file = file_get_contents('./share/'.$page.'.json');
} else {
    $file = file_get_contents('./share/404.json');
}

$data = json_decode($file);

return makePage($data); 

function makePage($data) { 
    $html  = '<!doctype html>'.PHP_EOL;
    $html .= '<html>'.PHP_EOL;

    $html .= '<head>'.PHP_EOL;

    $html .= '<meta property="og:type" content="website" />'.PHP_EOL;
    $html .= '<meta property="og:site_name" content="My Website" />'.PHP_EOL;
    $html .= '<meta property="og:title" content="'.$data->title.'" />'.PHP_EOL;
    $html .= '<meta property="og:description" content="'.$data->description.'" />'.PHP_EOL;
    $html .= '<meta property="og:image" content="'.$data->image.'" />'.PHP_EOL;

    $html .= '<meta name="twitter:card" content="summary_large_image"/>'.PHP_EOL;
    $html .= '<meta name="twitter:title" content="'.$data->title.'" />'.PHP_EOL;
    $html .= '<meta name="twitter:description" content="'.$data->description.'" />'.PHP_EOL;
    $html .= '<meta name="twitter:image" content="'.$data->image.'" />'.PHP_EOL;
    
    $html .= '<meta http-equiv="refresh" content="0;url='.$data->url.'">'.PHP_EOL;

    $html .= '</head>'.PHP_EOL;
    $html .= '<body></body>'.PHP_EOL;

    $html .= '</html>';

    echo $html;
}

?>

og:url 未指定，因为我认为不指定它，Facebook 将不知道实际内容 URL 并将其卡片 link 写入静态文件。这应该不是问题，因为我使用了 http-equiv="refresh"，它将普通用户重定向到正确的 URL.

例如，404.json 包含以下内容：

{
  "title": "404: Not Found | My Website",
  "description": "My awesome description.",
  "image": "https://www.mywebsite.com/assets/images/share/404.jpg",
  "url": "https://www.mywebsite.com",
}

.htaccess 包含以下内容：

RewriteEngine On
RewriteBase /

# Allow robots.txt to pass through
RewriteRule ^robots.txt - [L]

# Allow social media crawlers to work
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot)
RewriteRule ^(.+)$ /crawlers/crawlers.php?page= [NC,L]

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist use index.html
RewriteRule ^ /index.html

当我测试 crawlers/crawlers.php?page=test-page 时，它运行良好（在访问 https://www.mywebsite.com/crawlers/crawlers.php?page=test-page 之后），我认为问题出在 . htaccess 条件低于 # Allow social media crawlers to work。在 Facebook 上分享仍然显示第一个路由 (/) 的元标记，这意味着重定向到 crawlers/crawlers.php 不起作用。
此外，在 https://developers.facebook.com/tools/debug/sharing/ 上 url https://www.mywebsite.com/about 没有重定向到 https://www.mywebsite.com/crawelers/crawlers.php?page=about。

我想将重定向到 crawlers/crawlers.php 用于社交媒体抓取工具，仅用于以下页面：https://www.mywebsite.com/about、https://www.mywebsite.com/work 等，但不适用于 https://www.mywebsite.com(第一条路线-/).

非常感谢任何帮助。谢谢！

Answer 1

感谢@CBroe 的指导，我设法让社交媒体（Facebook 和 Twitter）爬虫工作（不使用 Angular Universal、Scully、Prerender.io 等）Angular 11 SPA - 单页应用程序，我托管在共享托管服务器上。

我在上面的问题中遇到的问题在 .htaccess.

这是我的 .htaccess（按预期工作）：

RewriteEngine On

# Force www.
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ https://www.%{HTTP_HOST}/ [R=301,L]

# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# Allow robots.txt to pass through
RewriteRule ^robots.txt - [L]

# Allow social media crawlers to work
RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit|WhatsApp|LinkedInBot|Twitterbot)
RewriteRule ^(.+)$ /crawlers/social_media.php?page= [R=301,L]

# If the requested resource doesn't exist use index.html
RewriteRule ^ /index.html

PS 我将 crawlers.php 重命名为 social_media.php，添加了 WhatsApp 和 LinkedIn 用户代理，还添加了从 mywebsite.com 到 [=15 的重定向=]

.htaccess 允许社交媒体爬虫工作（Facebook 和 Twitter）| Angular 11 个SPA

.htaccess allow social media crawlers to work (Facebook and Twitter) | Angular 11 SPA

.htaccess

mod-rewrite

facebook

meta-tags

angular