Monday, 12 August 2019

How do I fix website temporarily displaying Open Graph Protocol Tags?

I've recently pushed a website to live and for some odd reason, when I visit the website my Open Graph Meta tags are temporarily displaying and then switching to the correct title. It renders as "$OG_TITLE" for like 1-2 seconds then renders the title correctly. I want it to immediately render the title of the website when the page loads. This is happening for All routes of the pages throughout the website.

The website is on AWS using EC2 Nginx Configuation.

So my question is how do I make my website fully display the dynamic OG_Title tags? This is happening in local and live. In addition, I don't know if this has something to do with it but if I switch my localhost to let's say localhost:5000 (my backend server) I don't have the problem but when I use localhost:3312 (my client) the problem occurs.

Link to website where the problem is: https://mountainmanorskillednursing.com/

Here is my code and what I've done.

Configuration: NodeJS backend with expressJS as back-end framework, ReactJS front-end for the view. I tried to also install react-helmet on each route to see if it would fix my problem and it didn't also.

I have a lot of code so I'll only be adding the parts relevant to my question.

NodeJS server code (server.js):

const express = require("express");
const path = require("path");
const cors = require("cors");
var MetaTags = require("./metaTags");
const router = express.Router();

var filePath = path.join(__dirname + "/../build/index.html");

const app = express();

app.use(cors());

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

app.get("/", function(request, response) {
  const urlArray = request.originalUrl.split(".");
  fs.readFile(filePath, "utf8", function(err, data) {
    var metadata = {
      title: "Nursing Home Page",
      description:
        "Provides top quality nursing care for patients around Sacramento.",
      canonical: "https://mountainmanorskillednursing.com/"
    };
    if (urlArray.length == 1) {
      metadata = MetaTags.urlString.getMetaData("/");
    }
    if (err) {
      return console.log(err);
    }
    data = data.replace(/\$OG_TITLE/g, metadata.title);
    data = data.replace(/\$OG_DESCRIPTION/g, metadata.description);
    data = data.replace(/\$OG_CANONICAL/g, metadata.canonical);
    response.send(data);
  });
});

// Serve static files on server
app.use(express.static(__dirname + "/../build"));

app.get("*", (request, response) => {
  //response.sendFile(path.join(__dirname + "/../build/index.html"));
  const urlArray = request.originalUrl.split(".");
  fs.readFile(filePath, "utf8", function(err, data) {
    var metadata = {
      title: "Mountain Manor Home Page",
      description:
        "Provides top quality nursing care for patients around Sacramento.",
      canonical: "https://mountainmanorskillednursing.com/"
    };
    if (urlArray.length == 1) {
      metadata = MetaTags.urlString.getMetaData(urlArray[0]);
    }
    if (err) {
      return console.log(err);
    }
    data = data.replace(/\$OG_TITLE/g, metadata.title);
    data = data.replace(/\$OG_DESCRIPTION/g, metadata.description);
    data = data.replace(/\$OG_CANONICAL/g, metadata.canonical);
    response.send(data);
  });
});

app.listen(2121, () => {
  console.log(`Server successfully started`);
});


Index.html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="icon"
      href="/images/mmfavicon.png"
      type="image/png"
      sizes="16x16"
    />
    <title>$OG_TITLE</title>
    <meta property="og:title" content="$OG_TITLE" />
    <meta name="description" content="$OG_DESCRIPTION" />
    <meta property="og:description" content="$OG_DESCRIPTION" />
    <link rel="canonical" href="https://mountainmanorskillednursing.com/" />
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>


MetaTags.js (contains the information on the specific pages but in a separate file)

var _ = require("lodash");

var urlsList = [
  {
    url: "/",
    title: "Home Page",
    description:
      "Provides top quality nursing care for patients.",
    canonical: "https://mountainmanorskillednursing.com/"
  },
  {
    url: "/skilledNursing",
    title: "Mountain Manor Skilled Nursing",
    description:
      "Mountain Manor provides Skilled Nursing",
    canonical: "https://mountainmanorskillednursing.com/skilledNursing"
  },
  {
    url: "/aboutUs",
    title: "Mountain Manor About Us",
    description: "Mountain Manor History | About Us | Accolades",
    canonical: "https://mountainmanorskillednursing.com/aboutUs"
  },
  {
    url: "/contactUs",
    title: "Mountain Manor Contact Page",
    description: "Mountain Manor Contact",
    canonical: "https://mountainmanorskillednursing.com/contactUs"
  },
  {
    url: "/careers",
    title: "Mountain Manor Careers Page",
    description: "Mountain Manor Careers and Job Openings",
    canonical: "https://mountainmanorskillednursing.com/careers"
  }
];

var urlString = {
  getMetaData: function(reqUrl) {
    var splitUrl = reqUrl.split("/");

    var metaIndex = _.findIndex(urlsList, function(object) {
      return object.url == reqUrl;
    });
    if (metaIndex == -1) {
      return metaTags.homePage();
    } else {
      return urlsList[metaIndex];
    }
  }
};

var metaTags = {
  homePage: function() {
    const reqObject = {
      title: "Mountain Manor Home Page",
      description:
        "Mountain Manor Skilled Nursing & Assisted Living provides top quality nursing care for patients",
      canonical: "https://mountainmanorskillednursing.com/"
    };
    return reqObject;
  }
};

module.exports = {
  metaTags,
  urlString
};


I expect the output of the website to display the dynamic OG title tags throughout every route correctly but is only temporarily displaying it on page refresh.



from How do I fix website temporarily displaying Open Graph Protocol Tags?

No comments:

Post a Comment