Hapi SEO plugin for Single Page Application (SPA)
By defining the same route as the SPA application (Angular, React, Vue, Ember, Aurelia, Backbone ...) The plugin will detect the crawler when the request arrives and return html data.
If you don't know Node.js
Node.js Tutorial for Beginners in 2020
How To Build a Blog with Nest.js, MongoDB, and Vue.js
Node.js, ExpressJs, MongoDB and Vue.js (MEVN Stack) Application Tutorial
Install
npm install hapi - seo -- save
yarn install hapi - seo -- save
var Hapi = require ( ' @hapi/hapi ' ) ,
vision = require ( ' @hapi/vision ' ) ,
Mustache = require ( ' mustache ' ) ,
seo = require ( ' hapi-seo ' ) ,
var server = Hapi . server ( { host : ' localhost ' , port : 8080 } ) ;
server . register ( [
{
register : vision ,
options : { }
} ,
{
register : seo ,
options : {
enabled : true ,
view : ' index.html ' ,
data : { } ,
excludes : [
/ upload \/ . * ? / ig ,
/ www \/ . * ? / ig ,
/ \. ( js | css | gif | jpg | jpeg | tiff | png | svg | woff | woff2 | ttf | xml | less | doc | txt | docx | ico | zip | rar | mp3 | exe | avi | mp4 | mpg | mpeg | psd | ai | xsl | m4a | wmv | rss | ppt | flv | swf | dat | dmg | iso | m4v | torrent ) $ / ig
]
}
} ] , function ( err ) {
server . views ( {
engines : {
html : {
compile : function ( template ) {
Mustache . parse ( template ) ;
return function ( context ) {
return Mustache . render ( template , context ) ;
} ;
}
}
} ,
path : ' ./views '
} ) ;
} ) ;
Config route return content when detect crawler
server . route ( [
{
method : ' GET ' ,
path : ' /category/{id} ' ,
handler : function ( request , reply ) {
var _id = request . params . id ;
var _page = parseInt ( request . query . page ) || 1 ;
Post . paginate ( { _cid : _id } , {
page : _page ,
limit : 18 ,
sort : { crt : - 1 }
} , ( err , result ) => {
if ( result ) {
reply . view ( ' list.html ' , result ) ;
} else {
reply . view ( ' 404.html ' ) ;
}
} ) ;
}
} ,
{
method : ' GET ' ,
path : ' /detail/{id} ' ,
handler : function ( request , reply ) {
Post . findOne ( { sid : _id } , ( err , doc ) => {
if ( doc ) {
reply . view ( ' detail.html ' , doc ) ;
} else {
reply . view ( ' 404.html ' ) ;
}
} ) ;
}
} ,
{
method : ' GET ' ,
path : ' /{path*} ' ,
options : {
plugins : {
seo : { enabled : false }
}
} ,
handler : function ( request , reply ) {
reply . view ( ' index.html ' , { } ) ;
}
}
] ) ;