在 Facebook 上呈现 link 未获得正确的元数据

Question

当我在 facebook "www.testurl.com/profile" 上通过 link 时，我没有得到正确的元数据。我正在使用反应头盔组件，我试图添加 {og:title 和 og:decription} 它没有用。那么，我该怎么办呢？

Answer 1

您应该在服务器上呈现网站，因为 Facebook 机器人不会呈现您的 React 应用程序。他们只是看到您的空应用程序，因此当社交媒体机器人访问您的网站时，您必须呈现您的应用程序并发送字符串。我们正在使用一些 nginx 配置和预渲染包来完成它。你可以试试

默认预渲染使用 4201 端口

server {
    listen 80;
    listen 443 ssl;
    server_name yourservername.com;

    root /var/www/build;
    index index.html;

    location / {
        try_files $uri @prerender;
    }

    location @prerender {

        set $prerender 0;
        if ($http_user_agent ~* "googlebot|bingbot|yandex|baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
            set $prerender 1;
        }
        if ($args ~ "_escaped_fragment_") {
            set $prerender 1;
        }
        if ($http_user_agent ~ "Prerender") {
            set $prerender 0;
        }
        if ($uri ~* "\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|doc|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|svg|eot)") {
            set $prerender 0;
        }

        #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs
        resolver 8.8.8.8;

        if ($prerender = 1) {
            proxy_pass http://127.0.0.1:4201/render?url=https://www.yourwebsite.com$request_uri;
        }
        if ($prerender = 0) {
            rewrite .* /index.html break;
        }
    }
}

在 Facebook 上呈现 link 未获得正确的元数据

Rendering link on facebook did not get the correct metas

reactjs

react-helmet