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 . 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 is recommended

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 and 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 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 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 provided by the uses internally, so you can work as if you were working with common HTML.

To adjust the <head>, you just have to import 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);

`robots.txt`

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.

PreviousCode Splitting NextGuides

Last updated 3 years ago

Was this helpful?

Header meta tags

The <Head> component

robots.txt

Header meta tags

The <Head> component

robots.txt

The `<Head>` component

`robots.txt`

The `<Head>` component

`robots.txt`