2017-05-21 134 views
0

我只在客户端使用流星,并一直试图优化开放图元标记。我已经使用kadira:dochead和在路由器把下面的代码:Facebook OG标签在流星不工作

Router.route('/', function() { 
    setupOg(); 
    if (isMobile()) { 
    this.render('landing_mobile'); 
    $('body').css("overflow", "visible"); 
    } 
    else { 
    this.render('landing'); 
    $('body').css("overflow", "hidden"); 
    } 
}); 

function setupOg() { 
    var title = { property: "og:title", content: "Blah" }; 
    var type = { property: "og:type", content: "website" }; 
    var url = { property: "og:url", content: "https://blah.io" }; 
    var image = { property: "og:image", content: "http://i63.tinypic.com/2howf4k.png" }; 
    var siteName = { property: "og:site_name", content: "Blah" }; 
    var description = { property: "blah blah blah." }; 

    DocHead.addMeta(title); 
    DocHead.addMeta(type); 
    DocHead.addMeta(url); 
    DocHead.addMeta(image); 
    DocHead.addMeta(siteName); 
    DocHead.addMeta(description); 
} 

在浏览器中,当检查头的内容,所述内容是那里作为<meta property="og:title" content="Blah" dochead="1">等对上述各特性。

但是,当我看到Facebook Sharing Debugger时,似乎没有发现任何这些优化,并且当我尝试在LinkedIn上分享时,也是如此。为什么是这样?

注意,我main.html看起来是这样的:

<head> 
    <link rel="icon" sizes="16x16 32x32" href="/favicon.ico"> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Blah</title> 
</head> 
+0

您应该使用预渲染lib或服务如已经提到的,一些其他链接:[增强spiderable包(https://github.com/VeliovGroup/jazeee-meteor-spiderable),[有ES6支持预渲染](https://ostr.io/info/prerendering) –

回答

1

有2个原因,我可以区分:

  1. 流星有客户端渲染,这意味着当Facebook打开URL分析OG标签,它没有看到任何,所以你需要告诉Facebook机器人,它需要等到你的网页加载,看看这个流星包:https://atmospherejs.com/meteor/spiderable

  2. 该URL的数据可能会被缓存。

+0

如果你想知道SEO,你可以使用[prerender.io](https://prerender.io/)服务 –