SEO Best Practices | Yext 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 module .

This reference doc will explain the key features that Pages offers for developing 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 - learn more 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
Note
Always test your schema changes locally using the Schema.org validator . This tool 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;
Feedback