Javascript MEAN.js社交分享？

因此，我使用MEAN.js构建了一个应用程序，并对文章（博客）部分进行了一些更新，以提高搜索引擎优化（SEO）、可读性、设计等。不过，我似乎无法解决的一个问题是，如何使用Facebook、Google+、Twitter等共享文章，并使用og元标记填充正确的数据

我想要什么

我所希望的就是能够分享我的MEAN.js应用程序中的文章（博客文章），并在社交网站（如Facebook）上发布链接时显示文章内容

我尝试过的

我曾经尝试过专门为博客文章创建一个单独的服务器布局，但这破坏了许多其他东西，以至于我意识到工作量可能不值得——必须有一个更聪明的方法

我也尝试过在客户端用Angular更新og元标记数据，但在社交网站抓取这些标记之前，这些值不能得到更新……换句话说，它实际上并没有达到我想要的效果

我尝试在索引呈现时获取角度路由URL，以便在呈现索引之前更新这些og元数据，但在

req

数据中的任何位置都找不到这些值

我认为问题在于

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

请求命中我的服务器，但由于它是使用Angular路由的单页应用程序，

req.url

值只是根页面（'/'）

将加载索引文件，该文件使用标准服务器模板布局

Angular被加载并进行AJAX调用以获取文章数据，然后将该数据绑定到页面上的变量

因此，基本上，在Angular确定要获取哪些文章信息之前，布局已经被渲染（使用og元值）

我猜理想的解决方案是

在我的

express.js

文件中，应用程序的局部变量设置如下：

// 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();

// 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}}">

然后，Swig在

layout.server.view.html

文件中呈现这些局部变量，如下所示：

// 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();

// 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}}">

//注意{{keywords}}、{{description}}等值。

因此，理想情况下，我认为我们希望在呈现页面之前，使用特定于文章的信息更新这些值。问题是，如果在确定要填充哪些文章数据之前呈现布局，我该怎么做？同样，角度路由在

req

对象中的任何位置似乎都不可用，因此我完全不知道如何做到这一点

---

因此，我回到了我最初的愿望——如何使用MEAN.js以“漂亮”的方式在社交媒体上分享我的文章？我走对了吗？当前文章设置是否可能？我是否需要构建一个完全不使用Angular的博客模块？

我也面临同样的问题。首先我安装的意思是搜索引擎优化模块。你可以在mean.js官方github repo上找到它。模块基本上就是这样做的：当爬虫（Google等）遇到SPA URL时，会在其请求中添加一个

\u转义\u片段

部分。平均搜索引擎优化拦截包含

\u转义\u片段\u

的请求。然后使用Phantom.Js，从动态HTML中呈现出一个静态HTML并保存它，将这个静态版本提供给爬虫

对于Facebook和Twitter，我更改了mean seo.js的

mean seo.js

文件，在它缓存并保存静态文件之前，我相应地替换了元标记。因为Phantom.Js已经呈现了整个文章页面，所以您不需要进行另一个API调用。只需解析HTML。我还使用

cheerio.js

方便地解析HTML

这种方法解决了我的问题，但并不完美。我仍然在与hashbang&HTML5模式作斗争。当我的URL像

https://example.com/post/1

Twitter和Facebook不请求

\u转义\u片段

更新：过了一段时间，我放弃了这条路。Phantomjs似乎不可靠，我不喜欢为这样的工作浪费系统资源、CPU时间、RAM和磁盘空间。不必要的文件创建也是愚蠢的。我目前的做法是：

if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
    rewrite ^/posts/(.*)$ /api/posts/crawl/$1 last;
    }

我为Twitter和Facebook添加了一条新的快速路线。在服务器控制器中，实现了爬虫的新功能。创建了一个简单的服务器模板，没有角度、引导和所有闪亮的东西：只有元标记和简单文本。使用

Swig

（已包含在Meanjs中），相应地呈现此视图模板。我还使用

Nginx

作为代理。因此，我定义了一个新的基于用户代理的Nginx

rewrite

。大概是这样的：

if ($http_user_agent ~* "baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator") {
    rewrite ^/posts/(.*)$ /api/posts/crawl/$1 last;
    }

---

当爬虫请求帖子的URL时，Nginx会触发我的新简单爬虫路由并生成一个小页面

在没有Nginx或MEANJS框架之外的任何东西的情况下，我终于让它在我的应用程序中工作了。你的里程数可能会有所不同，但我想我还是会分享结果的。它对我有效，但对你可能无效

基本上，我已经设置了一种获取非散列URL并重定向到散列URL的方法。因此，用户可以共享他们的个人资料，例如

example.com/myprofile

，它将重定向到

example.com/#/profile/myprofile

然后，我严格地为社交机器人创建了一个单独的布局（尽管回想起来，我不确定这是否完全必要），并在网站被删除时提供单独的布局。我这样做：

社交版面.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...

---

同样，您的里程数可能会有所不同，但这对我（部分）起到了作用。我仍在致力于整个URL（包括散列）的社交共享。希望在某种程度上有所帮助。

这似乎是我一直在思考的方法，如何在没有ngix和mean.js应用程序的情况下实现它？我尝试了Angular和Express路由，而不是Nginx重写，但没有成功。我不确定。我已经在Nginx后面提供应用程序（SSL密钥和所有），所以我只是