[英]Title and Meta tags not rendering in angular SSR in server
我已經在前端使用Angular 6開發了一個網站。 默認情況下,Angular不是SEO友好的,因此,為了做到這一點,我以Angular-Universal或Angular SSR(服務器端渲染)的方式實現了它。 我更新了代碼並比較了以前和現在的頁面源,我可以在標簽“ <app-root>
和“ </app-root>
”中看到我的應用程序,然后才出現“正在加載...”。
我正在使用@angular/platform-browser
的MetaService
和TitleService
為Facebook和Twitter更新所需的<meta>
標簽以及<title>
標簽。
問題是當我在本地系統中運行節點服務器時,view-source向我顯示了渲染的meta
標記,但是當我在AWS VM上的節點服務器中運行相同的代碼時,我沒有得到渲染的meta
標記,而其他應用程序代碼可用。
更新:添加meta
標記的功能
updateMetaTags(egElement: Elements[]) {
this.url = 'https://example.com/eg/' + this.id;
const title = egElement[1].innerHTML;
this.tweetText = 'Check the latest blog on \"' + title + '\"';
this.meta.addTags([
{ property: 'og:url', content: this.url },
{ property: 'og:type', content: 'website' },
{ property: 'og:title', content: title },
{ property: 'og:description', content: 'Author: ' + egElement[2].innerHTML },
{ property: 'og:image', content: this.egElement[3].img }
]);
}
我在ngOnInit()中調用此函數。 它可以在我的本地計算機上正確執行渲染,但不能在服務器上進行渲染。
egElement
和id
從服務調用返回到后端,並且meta
服務已導入並注入到構造函數中。
如果您正在使用自定義XHR調用(例如,未使用Angular HttpClient),則SSR不會等待API調用響應(如果使用第3方庫來檢索API數據,也會發生這種情況)。 查看您的站點,除了頁面布局/頁眉/頁腳之外,沒有服務器端渲染發生
我猜這與未在SSR中檢索到的API數據有關。 也許您可以使用一些信息來更新您的問題?
有一個經過良好測試和維護的名為ngx-meta
庫,該庫具有通用(SSR)兼容性。 您可以查看它們的實現和演示,或者嘗試一下他們的庫https://github.com/fulls1z3/ngx-meta
嗨,我也遇到了此錯誤,因此請確保您的server.ts
文件中已導入import 'reflect-metadata';
反映所有meta到index.html
您可以看一下我的server.ts
配置文件\\
import 'zone.js/dist/zone-node';
import 'reflect-metadata';
import { enableProdMode } from '@angular/core';
// Express Engine
import { ngExpressEngine } from '@nguniversal/express-engine';
// Import module map for lazy loading
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import * as express from 'express';
import { join } from 'path';
import { readFileSync } from 'fs';
// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();
// Express server
const app = express();
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
const template = readFileSync(join(DIST_FOLDER, 'index.html')).toString();
const domino = require('domino');
const win = domino.createWindow(template);
global['localStorage'] = win.localStorage;
global['window'] = win;
global['document'] = win.document;
global['Document'] = win.document;
global['DOMTokenList'] = win.DOMTokenList;
global['Node'] = win.Node;
global['Text'] = win.Text;
global['HTMLElement'] = win.HTMLElement;
global['navigator'] = win.navigator;
global['MutationObserver'] = getMockMutationObserver();
function getMockMutationObserver() {
return class {
observe(node, options) {}
disconnect() {}
takeRecords() {
return [];
}
};
}
// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine(
'html',
ngExpressEngine({
bootstrap: AppServerModuleNgFactory,
providers: [provideModuleMap(LAZY_MODULE_MAP)],
}),
);
app.set('view engine', 'html');
app.set('views', DIST_FOLDER);
// Example Express Rest API endpoints
// app.get('/api/**', (req, res) => { });
// Serve static files from /browser
app.get(
'*.*',
express.static(DIST_FOLDER, {
maxAge: '1y',
}),
);
// All regular routes use the Universal engine
app.get('*', (req, res) => {
res.render('index', { req });
});
// Start up the Node server
app.listen(PORT, () => {
console.log(`Node Express server listening on http://localhost:${PORT}`);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.