Question

我刚刚使用Ionic完成了PWA的构建。现在我被困在启用PWA SEO。

因为在离子中有离子的＃（哈希定位策略），所以在所有的URL中都会产生＃，这对SEO来说根本没有帮助。

所以要删除＃我尝试在AppModule中设置路径位置策略{locationStrategy：＆＃39; path＆＃39;}。这会从网址中删除＃。但是当我尝试刷新它或直接转到网址时，它会返回“无法获取/网址”＃39;

我为这个问题阅读的内容很少是在每个请求中重写为index.html或者在node express中尝试如下内容。

app.get('*', (req, res, next) => {
   if ((req.url.indexOf('#') > -1) ||
      ((req.url.lastIndexOf('.') === -1) ||
      (req.url.indexOf('/', req.url.lastIndexOf('.')) > -1))) {
    req.url = `/#${req.url}`;
  }
next();
});

以上两点都不能解决我的问题，因为如果我想直接访问网址，即localhost / a / b。上述解决方案将重写为localhost / home（基本URL），我不想要。

Answer 1

自己动手。

以下是我所做的事情清单。

将以下代码添加到要添加说明的每个页面，关键字

ionViewWillEnter(){
   try{
       document.querySelector("meta[name='description']").remove();
   } catch (e){
   }
   try{
      document.querySelector("meta[name='keywords']").remove();
   } catch (e){

   }

   var description = document.createElement('meta');
   description.name = "description";
   description.content = "I am a description";
   document.getElementsByTagName('head')[0].appendChild(description);

   var keywords = document.createElement('meta');
   keywords.name = "keywords";
   keywords.content = "Code, Learn, Respect";
   document.getElementsByTagName('head')[0].appendChild(keywords);
}

现在我们需要在每个网址的路径中删除＃，因为SEO会拒绝带有＃的网址。在应用模块中，将{locationStrategy：＆＃39;路径＆＃39;}添加到您的应用模块，如下所示：
```
IonicModule.forRoot(MyApp, {
  locationStrategy: 'path'
})
```
现在＃已从网址中删除。但是当您刷新或直接访问URL时，这不会起作用，因为这是任何SPA的预期行为因为当您刷新页面时，服务器会尝试查找链接到URL的页面。例如：如果你点击localhost / abc，那么服务器试图找到实际上不存在的abc / index.html。为了解决这个问题，你在我的服务器上编写了配置，即将每个请求指向index.html 。我正在使用node express server来部署你的pwa。使用以下代码将每个请求路由到index.html -
```
var express = require('express');
var path = require('path')
var app = express();
app.use(express.static(path.resolve(__dirname, "www")));

app.use('/*', function(req, res){
   res.sendFile(__dirname+ '/www' + '/index.html');
});

app.set('port', process.env.PORT || 3000);
app.listen(app.get('port'), function() {
  console.log("listening to Port", app.get("port"));
});
```
此外，您需要将base.html中的base href设置为＆＃39; /＆＃39;。

Answer 2

具有与Firebase托管+云功能+ Prerender.io集成的SSR（服务器端渲染）的IONIC

首先，对不起我的英语不好。

搜索了Deep Web（开玩笑）后，我找到了解决方案。而最酷的解决方案是，我能够使用Cloud Functions将Pioneer Ionic应用程序与Firebase Hosting集成。

阅读以下主题后：

https://github.com/firebase/firebase-tools/issues/33

@TheRoccoB用户介绍了如何在Firebase Hosting中托管静态Web应用程序以及如何将流量从URL重定向到Cloud Functions。

我所做的是映射必须索引为的路线：

{
        "source": "/ shop / **",
        "function": "ssr"
      },
      {
        "source": "/ * / promotions / **",
        "function": "ssr"
      }

因为“ ssr”是我在Cloud Functions中的函数名称。因此，如果我将请求重定向到https://github.com/prerender/prerender-node服务器，我就使用了https://github.com/prerender/prerender库来检查请求是否来自Google Crowler。

const prerender = express ();
prerender.use (cors);
prerender.use (
    require ('prerender-node')
    // .set ('prerenderServiceUrl', 'http: // localhost: 3000')
    .set ('prerenderToken', '** TOKEN **')
);
prerender.use (require ('prerender-node'). set ('beforeRender', function (req, done) {
    // do you need to do?
    console.log ('Rendering URL:', req.path);
done ();
}));
prerender.use (require ('prerender-node') set ('afterRender', function (err, req, prerender_res) {
    // do you need to do?
    console.log (req.path + 'rendering completed!');
    console.log ('Errors:', err);
}));
prerender.get ('*', (req, res) => {
    console.log ('Calling function for URL:', req.path);
    res.set ('Cache-Control', 'public, max-age = 300, s-maxage = 600');
    res.status (200) .send (fs.readFileSync ('./ www / index.html'). toString ());
});
exports.ssr = functions.https.onRequest (prerender);

在离子PWA的SEO

2 个答案: