I am currently using Express with Handlebars as the template engine to render meta tags dynamically. Below is the script I have implemented:
var express = require("express");
var prerender = require("prerender-node");
var app = module.exports = express();
var handlebars = require("express-handlebars");
app.engine("handlebars", handlebars({defaultLayout: "main"}));
app.set("view engine", "handlebars");
app.use(prerender.set("prerenderToken", "qi2e5B985PptQE8aF0dt"));
app.use(express.static("./"));
app.get("/", function (req, res) {
// res.sendFile("./index.html");
res.render("home", {
title: "PLUNQ",
metaKeyword: "temukan dan ciptakan perjalananmu sendiri, create trip, create diary, follow trip, hidden places, aplikasi untuk traveller",
metaDescription: "Temukan dan ciptakan perjalananmu disini, Situs yang menyediakan rujukan tempat menarik, event, penginapan serta produk lokal",
ogTitle: "Plunq | Temukan dan ciptakan perjalananmu disini",
ogUrl: "https://plunq.id/",
ogDescription: "Temukan dan ciptakan perjalananmu disini, Situs yang menyediakan rujukan tempat menarik, event, penginapan serta produk lokal",
ogImage: "https://plunq.id/images/og-image.jpg",
});
});
app.listen(1234);
Additionally, here is my Handlebars code:
<title>{{title}}</title>
<meta name="keywords" content={{metaKeyword}}>
<meta name="description" content={{metaDescription}}>
<!-- og meta start here -->
<link rel="canonical" href={{ogUrl}}/>
<meta property="og:title" content={{ogTitle}}/>
<meta property="og:url" content={{ogUrl}}/>
<meta property="og:type" content="website"/>
<meta property="og:description" content={{ogDescription}}/>
<meta property="og:image" content={{ogImage}}/>
<meta property="fb:app_id" content="921046191363161"/>
After passing the og and meta properties to my template, I encountered an issue where it breaks the meta tags when viewed in the browser, displaying incorrectly like this: https://i.sstatic.net/B14fm.jpg
Any suggestions on how I can resolve this issue?