jbs-seo-handlebars
v1.0.2
Published
SEO Metatags and Twitter Card and OpenGraphs
Downloads
4
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>