SEO Best Practices| Hitchhikers Platform

Overview

SEO is one of the most important features of a successful web presence, and Pages enables you to easily build a highly performant site that will succeed in search. Yext has loads of resources about SEO, so if you want more general information, check out this resource.

This reference doc will explain the key features that Pages offers for developing with with top-notch SEO.

SEO Checklist

This checklist is meant to serve as a starting point to ensure all of your pages satisfy these basic SEO criteria

  • h1 tag
    • Each page has ONE relevant h1 tag
    • The h1 tag should normally be the title of your page
  • Meta tags / OG Tags / Title Tags (see below for Pages configuration)
    • Tags are present with no spelling errors (see below for detailed info)
    • OG Tags are included where appropriate to enhance social media presence (more info here)
  • Canonical URL
    • Use of canonical urls where appropriate - more to learn here
  • Schema (see below for Pages configuration)

Head Configuration and Meta Tags

Every page should have a page title that is specific to the page. You can learn more about what makes a good page title here. To set a page title you should use the getHeadConfig export. See example below.

getHeadConfig also allows you to include meta tags which are vital for a search-optimized webpage. The example below provides a simple meta tag with a name and description, as well as an og:image tag.

/**
 * This allows the user to define a function which will take in their template
 * data and produce a HeadConfig object. When the site is generated, the HeadConfig
 * will be used to generate the inner contents of the HTML document's <head> tag.
 * This can include the title, meta tags, script tags, etc.
 */
export const getHeadConfig: GetHeadConfig<TemplateRenderProps> = ({
    document,
}): HeadConfig => {
    return {
        title: document.name, // Page Title
        charset: "UTF-8",
        viewport: "width=device-width, initial-scale=1",
        tags: [
            {
                type: "meta", // Meta Tag (Description)
                attributes: {
                    name: "description",
                    description: "This site was generated by the Yext SSG",
                },
            },
            {
                type: "meta", // Meta Tag (og:image)
                attributes: {
                    name: "og:image",
                    description: "https://images.google.com/",
                },
            },
        ],
    };
};

Schema

Schema helps search engines more effectively understand your page content and provide rich search results. Refer to our Schema Module for a full overview of the benefits.

Using the streams data architecture, it is possible to generate dynamic schema objects without any client-side logic! The example below gives an example of a simple schema in json/ld format. Check out the schema configuration in the default export below for a simple example.

light bulb
Tip
Always test your schema changes locally using https://validator.schema.org/. This website allows you to verify whether or not you’ve generated a valid schema object. During local development, you can build your site and then copy the HTML for a given page from the sites-rendered-output into the schema validator.

Note a few things about the example:

  1. It uses two imports : react-schemaorg and schema-dts, which make formatting your schema in json/ld very simple
  2. The JsonLd object should be included in the TSX returned from your default export
  3. The various address fields will be populated at build-time by the address object which is returned by the streams

    import {
    GetHeadConfig,
    GetPath,
    HeadConfig,
    Template,
    TemplateConfig,
    TemplateProps,
    TemplateRenderProps,
    } from "@yext/pages";
    import * as React from "react";
    import { JsonLd } from "react-schemaorg";
    import { Dentist } from "schema-dts";
    
    export const config: TemplateConfig = {
    stream: {
    $id: "index-stream",
    filter: {
      entityIds: ["location"],
    },
    fields: [
      "name",
      "address",
    ],
    localization: {
      locales: ["en"],
      primary: false,
    },
    },
    };
    
    export const getPath: GetPath<TemplateProps> = ({ document }) => {
    return `index.html`;
    };
    
    const Index: Template<TemplateRenderProps> = ({
    document,
    }) => {
    const {
    name,
    address,
    } = document;
    
    return (
    <>
    	    // Start Configuration of Schema 
        <body>
          <JsonLd<Dentist> 
            item={{
              "@context": "https://schema.org",
              "@type": "Dentist",
              name,
              address: {
                "@type": "PostalAddress",
                streetAddress: address.line1,
                addressLocality: address.city,
                addressRegion: address.region,
                postalCode: address.postalCode,
                addressCountry: address.countryCode,
              },
            }}
          />
        // End Configuration of Schema
          <h1>A dentist site called {name} </h1>
        </body>
    </>
    );
    };
    
    export default Index;