Ionic framework 离子型PWA中的SEO

我刚刚用Ionic完成了一个PWA的构建。现在我被困在使PWA搜索引擎优化启用

因为在爱奥尼亚，有#（散列定位策略）在爱奥尼亚启用，这导致在所有的URL中#，这对搜索引擎优化毫无帮助

因此，为了删除#，我尝试在AppModule中设置路径位置策略{locationStrategy:'Path'}。这将从url中删除#。但当我尝试刷新它或直接转到url时，它会返回“cannotget/url”

关于这个问题，我读到的几件事是在每个请求中重写为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();
});

以上两种方法都不能解决我的问题，因为如果我想直接访问url，即localhost/a/b。上面的解决方案将重写为localhost/home（基本URL），这是我不想要的。

我自己解决了

这是我做过的事情的清单

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

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);
}

现在我们需要删除每个url路径中的#，因为SEO拒绝包含#的url。在应用程序模块中，将{locationStrategy:'path'}添加到应用程序模块，如下所示：

IonicModule.forRoot(MyApp, {
  locationStrategy: 'path'
})

现在#已从url中删除。但当您刷新或直接访问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 href作为“/”放在index.html中

爱奥尼亚与SSR（服务器端渲染）集成，Firebase托管+云功能+Prerender.io

首先，对不起，我的英语很差

在通过deepweb（开玩笑）搜索之后，我找到了解决方案。最酷的解决方案是，我能够使用云功能将我的先锋Ionic应用程序与Firebase主机集成

阅读以下主题后：

@TheRoccoB用户解释了如何在Firebase托管中托管静态Web应用程序，并将流量从URL重定向到云功能

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

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

因为“ssr”是我在云函数中的函数名。因此，我使用库来检查请求是否来自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);