Home / SEO Procedures / Page Name Topic Styling Procedure

Page Name Topic Styling Procedure

Parent Process: SEO Audit Process

Last Edited: 2026-06-29 01:32

Description

Step-by-step procedure for implementing search-friendly Page Name / Topic styles in the PagePilot CMS, eliminating incorrect H2 wrapping.

Goal

Update website templates to output the page name in a standard HTML5 navigation structure instead of wrapping it in an H2 tag, establishing a cleaner hierarchical structure (H1 > H2 > H3).

Definitions / Prerequisites

• Site Template Layout: PagePilot portal where site header, body, and footer template containers are managed.
• Sass Overrides: Global style injection window (Layout Builder -> Options -> Edit Layout).

Workflow

Step 1: Add Global Style Overrides

1. Log in to the client's PagePilot admin dashboard.
2. Navigate to Layout Builder > Options > Edit Layout.
3. Scroll to the Sass Overrides field and append the following CSS class definition:

   nav.page-topic { 
       font-family: "roc-grotesk", sans-serif; 
       font-weight: 750; 
       font-size: clamp(25px, 5vw, 30px); 
       text-align: center; 
       text-transform: uppercase; 
       color: #fff; 
   }
   

4. Click Save in the overrides panel.

Step 2: Inject HTML Structure into Global Body Block

1. Navigate to the Block Builder section under the Site Template Layout.
2. Locate the Global Body Block.
3. Locate the opening div of the template and insert the following semantic markup:

   <nav aria-label="Topic" class="page-topic">
     <span aria-current="page"><#pagename></span>
   </nav>
   

4. The completed block structure must look exactly as follows:

   <div class="OrgBanner">
     <div class="container">
       <nav aria-label="Topic" class="page-topic">
         <span aria-current="page"><#PAGENAME></span>
       </nav>
     </div>
   </div>
   <div class="container my-5">
     <#page>
   </div>
   

5. Click Save Block.

Step 3: Validate Rendering on Live Pages

1. Open a subpage on the client's live website (e.g. the AC Repair page).
2. Right-click the page heading/name and select Inspect Element.
3. Verify that:
   • The page title is contained within a <nav class="page-topic"> and <span> element.
   • The page title is not wrapped in an H1 or H2 tag.
   • The page visual styling remains consistent.

QA / Troubleshooting

• CSS Issues: If the page title font is missing, verify the primary font family is correctly declared in the theme or replace roc-grotesk with the active brand font.
• Custom Global Layouts: If a site uses custom body blocks for specific directories, verify the HTML snippet is applied to all active body templates.