Head tags only updating after pages are loaded

david1 · 13 July 2020 16:36

I’ve installed all the necessary dependencies for the head tags to work on my Frontity site and they do work; however, only when the pages have been loaded.

I expect once I’ve installed all dependencies that whenever I change pages, the head tags (namely the page title) will update, whether the page has to load or not.

What’s happening instead is whatever page I load first, the head tags are displayed, but when I navigate to another page and it has to be loaded (i.e. the loading route is shown and then the content), the first set of head tags remain displaying. If I leave that second page, go to a third one, and return to that second page, as in visit the page after it’s been loaded, the head tag displays the correct title etc.

You can try it out on my site at https://beta.interpayments.com. For example, click on the link, take note of the title of the page that is displayed, click on “Partners”, notice that the title has not changed, click on “Resources” and notice that the title still has not changed, then go back to “Partners” and the title will be correct.

I installed the REST API - Head tags plugin on my WordPress installation, the @frontity/head-tags package in my Frontity root directory, included @frontity/head-tags at the bottom of my frontity.settings.js packages array, and have installed Yoast and Yoast for ACF in case that makes any difference. Please let me know if I have messed anything up.

Also, will this negatively affect Google’s ability to crawl the site?

juanma · 23 July 2020 16:30

Hi @david1

Please have a look at how mars-theme is adding proper titles to each page

github.com

frontity/frontity/blob/dev/packages/mars-theme/src/components/title.js

import React from "react";
import { Head, connect, decode } from "frontity";

const Title = ({ state }) => {
  // Get data about the current URL.
  const data = state.source.get(state.router.link);
  // Set the default title.
  let title = state.frontity.title;

  if (data.isTaxonomy) {
    // Add titles to taxonomies, like "Category: Nature - Blog Name" or "Tag: Japan - Blog Name".
    // 1. Get the taxonomy entity from the state to get its taxonomy term and name.
    const { taxonomy, name } = state.source[data.taxonomy][data.id];
    // 2. Uppercase first letter of the taxonomy term (from "category" to "Category").
    const taxonomyCapitalized =
      taxonomy.charAt(0).toUpperCase() + taxonomy.slice(1);
    // 3. Render the proper title.
    title = `${taxonomyCapitalized}: ${decode(name)} - ${state.frontity.title}`;
  } else if (data.isAuthor) {
    // Add titles to authors, like "Author: Jon Snow - Blog Name".

This file has been truncated. show original

Inside the Head component you can add all the meta-data you need to add to your site
As you can see in the code the title is get directly from state.source[data.type][data.id].title.rendered;
But you could use state.headTags.get(state.router.link) to access all the meta-data you need and add it to Head in this component or from any other one

Hope this helps

juanma · 24 July 2020 08:14

Regarding. head-tags package here you have a demo where you can see how this package takes care of adding all the metadata in the header