JumpButton Studio SEO for Handlebars

Install JBS SEO Handlebars

JumpButton Studio SEO

Add all metatags quickly for Handlebars and Express.JS Projects.

Update Log

After noticing a large amount of downloads for this plugin I decided to write a README.MD file as you can see

v 1.0.2

* Added some bug fixes to the default values.
+ Added a new: seo.getDefaultTitle()

Install

npm i --save jbs-seo-handlebars

Basic Usage

Directory Structure:

.
├── app.js
└── views
    ├── contact.hbs
    ├── home.hbs
    └── layouts
        └── main.hbs

2 directories, 3 files

app.js:

Creates a super simple Express app with Handlebars view engine and how to implement the SEO System.

const PORT = 8080;
const express = require('express');
const exphbs = require('express-handlebars');
const seo = require('jbs-seo-handlebars')({
    defaultAuthor: "Lycrios", // Author Tag
    defaultDescription: "A handlebars/express package for easy SEO implmentation.", // Description Tag
    defaultUrl: "https://www.jumpbuttonstudio.com/", // Canonical and og:url Tags
    defaultImage: "https://www.jumpbuttonstudio.com/img/logo.png", // og:image
    defaultKeywords: "seo,handlebars,express", // Keywords Tag
    defaultTitle: "JBS Seo Handlebars", // The Default Title
    og_type: "website", // Optional
    robots: "index,follow" // Optional
}); // These are default values that can be overridden.
 
const app = express();
 
app.engine('.hbs', exphbs({
    defaultLayout: 'main',
    extname: '.hbs' // So we can use the shortform extension for handlebars
}));
app.set('view engine', '.hbs');
 
app.get("/", (req, res) => {
    res.render("home", {
        tags: seo.seoMetaTags(),
        title: seo.getDefaultTitle()
    });
});
 
app.get("/contact", (req, res) => {
    res.render("contact", {
        tags: seo.seoMetaTags({
            title: "Contact Us" // Override the title tag
        }),
        title: "Contact Us"
    });
});
 
app.listen(PORT, () => {
    console.log("Server Ready. Listening for connections on " + PORT);
});

views/layouts/main.hbs

The main layout is the HTML page wrapper which can be reused for the different views of the app. {{{body}}} is used as a placeholder for where the main content should be rendered.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {{{tags}}}
    <title>{{title}}</title>
</head>
<body>
    {{{body}}}
</body>
</html>

views/home.hbs

The content for the app's home view which will be rendered into the layout's {{{body}}}.

<h1>Example App: {{title}}</h1>

views/contact.hbs

The content for the app's contact view which will be rendered into the layout's {{{body}}}.

<h1>Contact Us Page</h1>

Rendered HTML

This is the rendered html for the home page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="A handlebars/express package for easy SEO implmentation.">
    <meta name="author" content="Lycrios">
    <meta name="keywords" content="seo,handlebars,express">
    <meta property="twitter:title" content="JBS Seo Handlebars">
    <meta name="twitter:card" content="A handlebars/express package for easy SEO implmentation." />
    <meta name="twitter:description" content="A handlebars/express package for easy SEO implmentation." />
    <meta property="og:type" content="website">
    <meta property="og:title" content="JBS Seo Handlebars">
    <meta property="og:description" content="A handlebars/express package for easy SEO implmentation." />
    <meta property="og:url" content="https://www.jumpbuttonstudio.com/" />
    <meta property="og:image" content="https://www.jumpbuttonstudio.com/img/logo.png" />
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <link rel="canonical" href="https://www.jumpbuttonstudio.com/"/>
    <title>JBS Seo Handlebars</title>
</head>
<body>
    <h1>Example App: JBS Seo Handlebars</h1>
</body>
</html>

jbs-seo-handlebars

JumpButton Studio SEO for Handlebars