feat: add meta tags for seo

app.js

@@ -45,6 +45,15 @@ app.use(
 ); // using sane headers on response
 if (process.env.NODE_ENV === 'development') app.use(morgan('dev')); // for logging during development
 
+// middleware to add baseUrl to req object
+app.use((req, res, next) => {
+  req.urlObj = new URL(
+    `${req.protocol}://${req.get('host')}${req.originalUrl}`
+  );
+  next();
+});
+
+// main middlewares to handle routes
 app.use('/', viewRouter);
 app.use('/api/v1/', apiRouter);
 

controllers/errorController.js

@@ -34,6 +34,9 @@ const sendErrorResponse = (err, req, res, devMode = false) => {
       },
       meta: {
         title: 'Error',
+        url: `${req.urlObj.origin}${req.urlObj.pathname}`,
+        imageUrl: `${req.urlObj.origin}/icon.svg`,
+        description: `ERROR: ${err.message}. Please try again later.`,
       },
     });
 };

controllers/viewController.js

@@ -14,6 +14,10 @@ export const about = (req, res, next) => {
   res.render('about', {
     meta: {
       title: 'About',
+      url: `${req.urlObj.origin}${req.urlObj.pathname}`,
+      imageUrl: `${req.urlObj.origin}/icon.svg`,
+      description:
+        'Quetre is a libre front-end for Quora. See any answer without being tracked, without being required to log in, and without being bombarded by pesky ads.',
     },
   });
 };
@@ -22,6 +26,9 @@ export const privacy = (req, res, next) => {
   res.render('privacy', {
     meta: {
       title: 'Privacy',
+      url: `${req.urlObj.origin}${req.urlObj.pathname}`,
+      imageUrl: `${req.urlObj.origin}/icon.svg`,
+      description: 'Privacy Policy of Quetre, a libre front-end for Quora.',
     },
   });
 };
@@ -38,6 +45,9 @@ export const answers = catchAsyncErrors(async (req, res, next) => {
     data: answersData,
     meta: {
       title,
+      url: `${req.urlObj.origin}${req.urlObj.pathname}`,
+      imageUrl: `${req.urlObj.origin}/icon.svg`,
+      description: `Answers to ${title}`,
     },
   });
 });
@@ -49,6 +59,9 @@ export const topic = catchAsyncErrors(async (req, res, next) => {
     data: topicData,
     meta: {
       title: topicData.name,
+      url: `${req.urlObj.origin}${req.urlObj.pathname}`,
+      imageUrl: `${req.urlObj.origin}/icon.svg`,
+      description: `Information about ${topicData.name} topic.`,
     },
   });
 });
@@ -63,6 +76,9 @@ export const unimplemented = (req, res, next) => {
     },
     meta: {
       title: 'Not yet implemented',
+      url: `${req.urlObj.origin}${req.urlObj.pathname}`,
+      imageUrl: `${req.urlObj.origin}/icon.svg`,
+      description: message,
     },
   });
 };

views/pug/base.pug

@@ -8,7 +8,7 @@ html(lang='en')
     //- appending title to name in case it exists, else showing name as the title of the page
     - const pageTitle = meta.title ? `${meta.title} | Quetre`: 'Quetre'
     title= pageTitle
-    meta(name="description", content="A libre front-end for Quora. See any answer without being tracked, without being required to log in, and without being bombarded by pesky ads.")
+    meta(name="description", content=meta.description)
     //- preloading css and fonts for performance gains
     link(rel='preload', href='/fonts/WorkSans.woff2', as='font', type='font/woff2', crossorigin)
     link(rel='preload', href='/fonts/Quicksand.woff2', as='font', type='font/woff2', crossorigin)
@@ -20,6 +20,17 @@ html(lang='en')
     link(rel='icon', href='/favicon.ico', sizes='any')
     link(rel="apple-touch-icon", href="/apple-touch-icon.png")
     link(rel="manifest", href="/site.webmanifest")
+    //- some seo stuff
+    meta(property='og:url', content=meta.url)
+    meta(property='og:type', content='website')
+    meta(property='og:title', content=meta.title)
+    meta(property='og:description', content=meta.description)
+    meta(property='og:image', content=meta.imageUrl)
+    meta(name='twitter:card', content='summary_large_image')
+    meta(property='twitter:url', content=meta.url)
+    meta(name='twitter:title', content=pageTitle)
+    meta(name='twitter:description', content=meta.description)
+    meta(name='twitter:image', content=meta.imageUrl)
     //- own script
     script(src='/js/index.js', defer)