因此,我使用 MEAN.js 构建了一个应用程序,并对文章(博客)部分进行了一些更新,以实现更好的 SEO、可读性、设计等。不过,我似乎无法弄清楚的一个问题是如何共享使用 Facebook、Google+、Twitter 等的文章,并让它们使用元标记填充正确的数据。
我想要的是
我想要的只是能够从我的 MEAN.js 应用程序共享文章(博客文章),并在我在社交网站(例如 Facebook)中发布链接时显示文章内容。
我已经尝试过的
我尝试过专门为博客文章创建一个单独的服务器布局,但这破坏了许多其他事情,以至于我意识到大量的工作可能不值得 - 必须有一种更聪明的方法。
我还尝试在客户端使用 Angular 更新 og 元标记数据,但在社交网站获取这些标记之前这些值不得更新……换句话说,它实际上并没有执行我想要的操作。
我尝试在索引渲染时获取 Angular 路由 URL,以便我可以在渲染索引之前更新这些 og 元值,但我无法在索引中的任何位置找到这些值req
data.
我认为问题是什么
从概念上讲,我认为这是正在发生的事情:
该请求到达我的服务器,但由于它是使用 Angular 路由的单页面应用程序,req.url
值只是根页面(“/”)。
索引文件被加载,它使用标准服务器模板布局。
Angular 被加载并进行 AJAX 调用以获取文章数据,然后将该数据绑定到页面上的变量。
所以基本上,在 Angular 弄清楚要抓取哪些文章信息之前,布局就已经被渲染了(使用 og 元值)。
我猜理想的解决方案是什么
In my 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();
然后,这些局部变量由 Swig 在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}}">
因此,理想情况下,我认为我们希望在渲染页面之前使用文章特定信息更新这些值。问题是,如果布局在 Angular 弄清楚要填充哪些文章数据之前就已渲染,我该怎么做?同样,Angular 路线似乎在任何地方都不可用req
对象,所以我完全不知道如何做到这一点。
所以我回到了我最初的愿望 - 如何使用 MEAN.js 以“漂亮”的方式在社交媒体上分享我的文章?我走在正确的轨道上吗?当前的文章设置是否可行?我是否需要构建一个完全不使用 Angular 的完整博客模块?