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
- Each page has ONE relevant
- 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.
sites-rendered-output
into the schema validator.
Note a few things about the example:
- It uses two imports :
react-schemaorg
andschema-dts
, which make formatting your schema injson/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;