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.
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);
