Tutorial API Reference Community Website

🔎SEO

Due to the Isomorphic nature of React apps in Frontity, the first load of any site will be rendered by the server using the React components in the project. Frontity allows you to optimize the SEO performance of your site and customize how your site is indexed by search engine crawlers.

By default, Frontity will deliver to your browser a fully populated and well-formed HTML file generated from your React code. This reduces the time required for the first contentful paint and ensures a good SEO score.

To take advantage of all the SEO benefits you already have in your WordPress (sitemaps, cache plugins, CORS headers, redirections, etc...) the Embedded Mode of Frontity is recommended

These diagrams can help you understand how Frontity, the WordPress + React stack and the proper performance strategies may improve the final performance and SEO of your project (besides having a great content creation, development and user experience) in both Decoupled and Embedded Mode

But that's not all. With Frontity you can also customize:

  • Meta tags

  • robots.txt

Header meta tags

You can include the meta tags generated by your WordPress SEO plugin in your React app so they can be properly rendered in the <head> section of the final HTML

In order to do that you have to use:

  • The REST API - Head Tags WordPress plugin. This plugin has been developed by the Frontity team and it adds the meta tags generated by your WordPress SEO plugin to the REST API

  • The @frontity/head-tags Frontity package. This package is designed to automatically get all the data that the REST API Head Tags plugin exposes in the REST API

The <Head> component

Besides the tags added through WordPress plugins you can also customize your <head> tags from Frontity. The <Head> component provided by the frontity package uses React Helmet internally, so you can work as if you were working with common HTML.

To adjust the <head>, you just have to import Head from frontity and write inside <Head> all the tags you want. Usually, you will want to import it at the index.js of your theme, in order for it to be loaded on all your pages.

import { Head } from "frontity";

const Theme = () => (
    <Head>
        <title>My awesome blog</title>
        <meta name="description" content="This blog is just for being awesome" />
        <html lang="en" />
        <link rel="canonical" href="https://example.com" />
    </Head>
);

You can, of course, use variables or include code outside <Head> that will be rendered normally.

import { Head, connect } from "frontity";

const Theme = ({ state }) => {
    const data = state.source.get(state.router.link);
    return (
        <>
            <Head>
                <title>{state.frontity.title}</title>
                <meta name="description" content={state.frontity.description} />
                <html lang="en" />
                <link rel="canonical" href={state.router.link} />
            </Head>

            <div>
                {data.isFetching && <Loading />}
                {data.isArchive && <List />}
                {data.isPostType && <Post />}
                {data.is404 && <Page404 />}
            </div>
        </>
    );
};

export default connect(Theme);

That's all, you just have to configure it at your will. Frontity uses React Helmet internally. You should check its docs out in case you want to understand it better.

robots.txt

A robots.txt file tells search engine crawlers which pages or files the crawler should or shouldn't request from your site.

You can add the robots.txt file at the root of your theme (next to the frontity.settings.js file) and when you build and deploy your app for production, it will be automatically picked up by the Frontity server and served at https://your-site-url.xyx/robots.txt.

You can also check out our example of a theme that is using a robots.txt file.

Want to know more about SEO & Headless WordPress? Have a look at this post

If you still have any questions about SEO in Frontity, please check out the community forum, which is packed full of answers and solutions to all sorts of Frontity questions. If you don't find what you're looking for, feel free to start a new post.

PreviousCode SplittingNextGuides

Last updated