OG meta标签，社交按钮和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).
问题是我需要的，在某些观点加载脸谱，一个谷歌+和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.
有谁知道一个解决方法呢？
Does anyone know a workaround to this?
感谢您
推荐答案
这不能使用JavaScript实现。有些人认为，Facebook正在阅读的当前内容页面上。不是。这使得使用相同的URL（从window.location.href）到您的服务器单独的请求使用它的刮刀，和Facebook的刮板不运行的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 。
- You can allow your server side technology to render the content.
- You can use the PhantomJS approach https://github.com/steeve/angular-seo.
这篇关于OG meta标签，社交按钮和angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
