Static Meta and SEO

Excuse my ignorance if I’m missing something. Still fairly new to React.

I’m interested in deploying with Frontity because of the 100 lighthouse score advertised. The fact that the meta title and descriptions are static on all pages is concerning though for SEO reasons.

I started modifying the header meta in the mars theme to use the post title for the meta title when isPost() which looks to be working. However the meta description has been more tricky. I’m taking post.excerpt.rendered and parsing html, but still have html entities. I am unsure how to get this content as plain text and will prob. turn to adding a new package to manage, unless anyone has another suggestion.

Thanks in advance,
Joe

Hey Joe, welcome to the community :slight_smile:

You’re absolutely right.

Right now the <title> meta in our starter theme is static:

<Head>
  <title>{state.frontity.title}</title>
  <meta name="description" content={state.frontity.description} />
  <html lang="en" />
</Head>

Maybe we can move it to its own React component. What about something like this?

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}: ${name} - ${state.frontity.title}`;
  } else if (data.isAuthor) {
    // Add titles to authors, like "Author: Jon Snow - Blog Name".
    // 1. Get the author entity from the state to get its name.
    const { name } = state.source.author[data.id];
    // 2. Render the proper title.
    title = `Author: ${name} - ${state.frontity.title}`;
  } else if (data.isPostType) {
    // Add titles to posts and pages, using the title and ending with the Blog Name.
    // 1. Get the post entity from the state and get its title.
    const postTitle = state.source[data.type][data.id].title.rendered;
    // 2. Remove any HTML tags found in the title.
    const cleanTitle = postTitle.replace(/<\/?[^>]+(>|$)/g, "");
    // 3. Render the proper title.
    title = `${cleanTitle} - ${state.frontity.title}`;
  } else if (data.is404) {
    // Add titles to 404's.
    title = `404 Not Found - ${state.frontity.title}`;
  }

  return (
    <Head>
      <title>{title}</title>
    </Head>
  );
};

export default connect(Title);

I’ve added it to the theme: https://github.com/frontity/frontity/pull/191

I’ve used string.replace(/<\/?[^>]+(>|$)/g, ""); to strip the HTML tags and it seems to work fine.

https://regexr.com/4ka8n

Could you please give it a try and let me know?

1 Like

I was hoping that @frontity/yoast package will do this job. It’s not the case?

Actually, I think it will. Is that right @David?

Yes, the @frontity/yoast package updates the title and meta tags as state.router.link changes. It’s not using anything to strip the HTML tags at this moment but we will fix it soon. :blush: