jbs-seo-handlebars
v1.0.2
Published
SEO Metatags and Twitter Card and OpenGraphs
Readme
JumpButton Studio SEO for 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-handlebarsBasic Usage
Directory Structure:
.
├── app.js
└── views
├── contact.hbs
├── home.hbs
└── layouts
└── main.hbs
2 directories, 3 filesapp.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>