og 元标签、社交按钮和 angularjs [英] og meta tags, social buttons and angularjs
问题描述
我正在创建一个使用多个视图的网站.标签和页面的标签通过 $rootScope 变量进行更改.所以我有类似的东西
I'm creating a website using multiple views. The tag and the tags of the page get changed through a a $rootScope variable. so I have something like
<html>
<head>
<title ng-bind="page_title"></title>
<meta property="og:title" content="{{page_title}}">
</head>
每当网站上加载每个视图时，page_title 变量都会发生变化，并且标题和 og:title 标签也会更新(一切都按预期进行).
Whenever each view get loaded on the website, the page_title variable changes and the title and the og:title tags get updated (everything works as expected).
问题是我需要在某些视图上加载 facebook、google+ 和 twitter 按钮.我可以正确显示它们，但是如果我点击每个它们，页面标题似乎是这样的:
The problem is that I need, on some views to load a facebook, a google+ and a twitter button. I can display them properly but if I click on each them the page title appear to be something like:
{{page_title}}
我尝试使用 setTimeOut 延迟每个按钮的脚本的执行，但效果不佳.但是脚本只会读取所写的内容，不会解析 page_title.
I've tried to delay the execution of the scripts of each button using setTimeOut but to no good. But the scripts just read whatever is written, they don't parse the page_title.
有人知道解决方法吗?
谢谢
推荐答案
这无法使用 javascript 来完成.有些人认为 Facebook 正在阅读当前页面上的内容.它不是.它使用 Scraper 使用相同的 url(来自 window.location.href)向您的服务器发出单独的请求，而 Facebook Scraper 不运行 javascript.这就是为什么当你点击 Facebook 分享按钮之类的东西时会得到 {{page_title}}.您的内容必须由服务器生成，因此当 Facebook 访问 url 时，它会预先获取所需的内容，而无需使用 javascript.您可以通过多种方式处理服务器端渲染.
This can't be done using javascript. Some people think that Facebook is reading what's currently on the page. It's not. It makes a separate request to your server using the same url (from window.location.href) using it's Scraper, and the Facebook Scraper does not run javascript. That's why you get {{page_title}} when clicking on something like a Facebook share button. Your content will have to be generated by the server so when Facebook goes to hit the url it gets the content it needs up front without the need for javascript. You can tackle the server side rendering in a fews ways.
- 您可以允许您的服务器端技术呈现内容.
- 您可以使用 PhantomJS 方法https://github.com/steeve/angular-seo.
这篇关于og 元标签、社交按钮和 angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
