所以我使用MEAN.js建立了一个应用程序，我做了一些更新的文章（博客）部分为更好的搜索引擎优化，可读性，设计等方面的一个问题，我似乎无法弄清楚，不过，是怎么分享使用Facebook的，Google +和Twitter等公司章程，并让他们使用OG meta标签填充正确的数据。

So I built an app using MEAN.js, and I made some updates to the Articles (blog) section for better SEO, readability, design, etc. One problem I can't seem to figure out, though, is how to share the Articles using Facebook, Google+, Twitter, etc. and have them populate the right data using og meta tags.

我想

我要的是能够分享从我MEAN.js应用文章（博客文章），并有文章内容显示出来，当我发布在社交网站（如Facebook）的链接

All I want is to be able to share Articles (blog posts) from my MEAN.js application, and have the article content show up when I post the link in Social sites (e.g. Facebook).

我曾尝试

我试过专门为博客文章创建一个单独的服务器布局，但这个突破，我才意识到的工作量可能不值得这么多其他的事情 - 必须有一个更聪明的方法。

I've tried creating a separate server layout specifically for blog posts, but this breaks so many other things that I realized the amount of work probably wasn't worth it - there has to be a smarter way.

我也尝试更新在客户端与角OG meta标签的数据，但这些值不能得到更新之前，社交网站抢这些标签......换句话说，它实际上并没有做什么，我想它到

I've also tried updating og meta tag data with Angular on the client side, but these values must not get updated before Social sites grab those tags...in other words, it didn't actually do what I wanted it to.

我试图抓住当指数呈现故该指标呈现之前，我可以更新这些OG元值角路线网址，但我不能在 REQ地方找到这些值数据。

I've tried grabbing the Angular route URL when the index is rendering so I can update those og meta values before the index is rendered, but I can't find these values anywhere in the req data.

我认为这个问题是

在概念上，这就是我认为正在发生的事情：

Conceptually, this is what I believe is happening:

请求打我的服务器，但因为它是采用了棱角分明的路由单页的应用程序时， req.url 值就是根页面（'/' ）。

The request hits my server, but since it's a single page application using Angular's routing, the req.url value is simply the root page ('/').

索引文件被加载，它使用了标准的服务器模板布局。

The index file gets loaded, which uses the standard server template layout.

角被加载，使一个AJAX调用来获取数据条，然后结合这些数据的页面。

Angular gets loaded and makes an AJAX call to get the Article data, then binds that data to the variables on the page.

所以基本上布局得到前角呈现（与OG元值），甚至计算出抢什么文章。

So basically the layout is getting rendered (with the og meta values) before Angular even figures out what article information to grab.

我猜的理想方案是

在我的前press.js 文件，应用程序的局部变量设置如下：

In my express.js file, the app's local variables are set as follows:

// Setting application local variables
app.locals.siteName = config.app.siteName;
app.locals.title = config.app.title;
app.locals.description = config.app.description;
app.locals.keywords = config.app.keywords;
app.locals.imageUrl = config.app.imageUrl;
app.locals.facebookAppId = config.facebook.clientID;
app.locals.jsFiles = config.getJavaScriptAssets();
app.locals.cssFiles = config.getCSSAssets();

这些局部变量被痛饮在 layout.server.view.html 文件，然后呈现如下：

// Note the {{keywords}}, {{description}}, etc. values. 
<!-- Semantic META -->
<meta id="keywords" name="keywords" content="{{keywords}}">
<meta id="desc" name="description" content="{{description}}">

<!-- Facebook META -->
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}">
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}">
<meta id="fb-title" property="og:title" content="{{title}}">
<meta id="fb-description" property="og:description" content="{{description}}">
<meta id="fb-url" property="og:url" content="{{url}}">
<meta id="fb-image" property="og:image" content="{{imageUrl}}">
<meta id="fb-type" property="og:type" content="website">

<!-- Twitter META -->
<meta id="twitter-title" name="twitter:title" content="{{title}}">
<meta id="twitter-description" name="twitter:description" content="{{description}}">
<meta id="twitter-url" name="twitter:url" content="{{url}}">
<meta id="twitter-image" name="twitter:image" content="{{imageUrl}}">

所以最好我认为我们要渲染页面之前更新文章的具体信息这些值。的问题是，如果布局被前角渲染甚至计算出文章的数据来填充它，怎么样我能做到这一点？同样，角路线似乎没有可用在 REQ 对象的任何地方，所以我就如何做到这一点完全难住了。

So ideally I think we want to update these values with Article specific information before rendering the page. The problem is, if the layout gets rendered before Angular even figures out which article data to populate, how can I do this? Again, the Angular route doesn't appear to be available anywhere in the req object, so I'm completely stumped on how to do this.

所以，我回到我的原始欲望 - 我怎么能分享我对社交媒体的文章中使用MEAN.js一个pretty的方式？我在正确的轨道上吗？是否有可能与当前的设置条？我需要建立一个完全不使用角一个完整的博客模块？

So I go back to my original desire - how can I share my articles on social media in a "pretty" way using MEAN.js? Am I on the right track? Is it possible with the current Article setup? Do I need to build a complete blogging module that doesn't use Angular at all?

推荐答案

我终于得到这个我不Nginx的应用程序或任何其他的MEANJS框架之外的工作。您的里程可能会有所不同，但我想我反正分享成果。这对我的作品，但可能不适合你。

I finally got this working for my application without Nginx or anything else outside of the MEANJS framework. Your mileage may vary, but I thought I'd share the results anyway. It works for me, but may not for you.

基本上，我已经设置了抢非散列URL和重定向到散列URL的方式。因此，用户可以分享他们的个人资料，例如 example.com/myprofile ，它会重定向到 example.com /＃！/型材/我的资料。

Basically what I already had setup was a way to grab non-hashed URLs and redirect to the hashed URLs. So a user could share their profile, e.g. example.com/myprofile and it would redirect to example.com/#!/profile/myprofile.

然后，我创建了一个单独的布局严格的社会机器人（虽然现在回想起来，我不知道这是完全必要的），当该网站是刮担任独立布局。这是我做的正是如此：

I then created a separate layout strictly for social bots (though in retrospect I'm not sure this was entirely necessary) and served the separate layout when the site is scraped. This I do thusly:

社会layout.server.view.html

...some stuff here...
//Note the variable names, e.g. {{siteName}}
<meta id="fb-app-id" property="fb:app_id" content="{{facebookAppId}}">
<meta id="fb-site-name" property="og:site_name" content="{{siteName}}">
<meta id="fb-title" property="og:title" content="{{socialTitle}}">
<meta id="fb-description" property="og:description" content="{{socialDescription}}">
<meta id="fb-url" property="og:url" content="{{socialUrl}}">
<meta id="fb-image" property="og:image" content="{{socialImageUrl}}">
<meta id="fb-type" property="og:type" content="website">

...other stuff here...

然后在我的前preSS文件，我明确检查用户代理来确定一个新的布局是必要的。如果我发现一个机器人，我取从我的数据库相关的URL一些关键数据，然后填充变量，就像这样：

Then in my Express file, I explicitly check user-agents to determine if a new layout is necessary. If I find a bot, I fetch some key data related to the URL from my DB, then populate the variables, like so:

前press.js

// This code happens just after app.locals variables are set.
    // Passing the request url to environment locals
    app.use(function(req, res, next) {
        // Let's check user-agents to see if this is a social bot. If so, let's serve a different layout to populate the og data so it looks pretty when sharing.
        if(req.headers['user-agent'] === 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'facebookexternalhit/1.0 (+http://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'facebookexternalhit/1.0 (+https://www.facebook.com/externalhit_uatext.php)' ||
            req.headers['user-agent'] === 'visionutils/0.2' ||
            req.headers['user-agent'] === 'Twitterbot/1.0' ||
            req.headers['user-agent'] === 'LinkedInBot/1.0 (compatible; Mozilla/5.0; Jakarta Commons-HttpClient/3.1 +http://www.linkedin.com)' ||
            req.headers['user-agent'] === 'Mozilla/5.0 (Windows NT 6.1; rv:6.0) Gecko/20110814 Firefox/6.0 Google (+https://developers.google.com/+/web/snippet/)' ||
            req.headers['user-agent'] === 'Mozilla/5.0 (Windows NT 5.1; rv:11.0) Gecko Firefox/11.0 (via ggpht.com GoogleImageProxy)') {

            var urlAttempt = req.url;
            urlAttempt = urlAttempt.substr(1);

            Users.findOne({ link: urlAttempt }, function(err, results) {
                if(err) {
                    res.locals.url = req.protocol + '://' + req.headers.host;
                    next();
                } else if (results !== null) {
                    // Found link. Populate data.
                    res.status(200).render('social-index', {

                        // Now we update layout variables with DB info.
                        socialUrl: req.protocol + '://' + req.headers.host + req.url,
                        socialTitle: results.orgName,
                        socialDescription: results.shortDesc,
                        socialImageUrl: req.protocol + '://' + req.headers.host + '/profile/img/' + results.imgName
                    });
                } else {
                    res.locals.url = req.protocol + '://' + req.headers.host;
                    next();
                }
            });
        } else {
            res.locals.url = req.protocol + '://' + req.headers.host;
            next();
        }
    });

同样，你的里程可能会有所不同，但这个工作对我来说（部分）。我仍然在社交共享工作的整个URL（包括散列）。希望它可以帮助以某种方式。

Again, your mileage may vary, but this worked for me (partially). I'm still working on social sharing the whole URL (including the hash). Hope it helps in some way.