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)
- Tested on Google Rich Results Test
- No Schema Errors as validated on Schema Validator
- If page represents a location, then name, address, phone, map, and description are all tagged.
- NO duplicate tags

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.

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:

It uses two imports : react-schemaorg and schema-dts, which make formatting your schema in json/ld very simple.
The JsonLd object should be included in the TSX returned from your default export.

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;

Back

< Redirects

Environment Variables >

Feedback

<% elem.innerText %>