Themes - Page Types

Arc Themes websites come with the common page types needed to run a publisher website. The Theme includes out-of-the-box templates for these page types, with all the Blocks you need for them. (For example, the Article template comes with an article body block; the Search template comes with a search filter block).

However sometimes, behind-the-scenes code that PageBuilder Editor users can’t configure directly (like advertising or analytics code) needs to behave differently depending on what type of page the user is on. For this reason, the page type is an explicit value (page-type) that you set on pages and templates in PageBuilder. Arc Blocks use this value to set different behavior based on the page type – for example, setting a targeting parameter on ads, so that you can target based on page type. Additional uses are listed below.

If you’re developing Custom Blocks, you can also utilize the page-type value to implement business logic that depends on what type of page is being rendered.

List of Page Types

How to Set the Page Type

Your Themes website will come with the Page Type pre-populated for the templates and pages that are included out-of-the-box. For example, your tags template is set to have a page-type of tags, and your homepage is set to have a page-type of homepage.

However, if you make new templates or standalone pages, you’ll need to ensure that the Page Type is set properly so that the behavior above functions as expected. Here’s how to do so:

1. Go to the Setup space in your PageBuilder page or template
2. Go to the Page Metadata section and add a new metadata with a key of page-type and a value from the list of valid Themes page types above
3. Publish your page

How page-type is used for ads

While you can configure the Blocks that appear on a given template in PageBuilder Editor – like placing the Gallery Block on a gallery template – some behavior is set in the underlying code of the website, not something you can drag and drop onto a page. The main use cases for relying on the page-type are these situations where the behind-the-scenes code of the website needs to behave differently depending on what type of page is being rendered.

Google Ads – Arc Block

Targeting parameter

Arc Blocks for Google Ads set a targeting parameter on each ad called page-type, and sets it to the value of the page type. For example, all Google ads calls on section pages will include a targeting parameter of page-type=section. This allows your ad operations team to target ads to a given page type –for example, only to article pages, or only to the homepage.

Ad unit structure

The ad unit hierarchy can change depending on what the page type is. For some page types, the end of the ad unit path changes dynamically based on the Site Service section path of the content’s primary section. (For example, the Politics section front is set to /politics, and an article in the news section is set to /news). Otherwise, the ad unit is simply /[DFP ID]/[optional website path]/

Metadata: All pages

The following metadata tags appear on all pages, no matter what the page-type is set to, because these do not need to change per page type.

Metadata: article/video/gallery pages

The following metadata tags are added if page-type is set to article or video or gallery:

Metadata: section pages

The following metadata tags are added if page-type is set to section. See also documentation on how to configure the Section Metadata Title and Section Metadata Description fields in Site Service if desired. See How to Set Up Site Service for Themes.

Metadata: tag pages

The following metadata tags are added if page-type is set to tag:

Metadata: author pages

The following metadata tags are added if page-type is set to author:

Metadata: homepage

The following metadata tags are added if page-type is set to homepage:

Metadata: No page-type value set

The following metadata tags are added if no value is set for page-type on the page or template:

See also:

• Metadata Tags That Google Understands
• Essential Meta Tags For Social Media
• Google’s Recommendations For Titles And Descriptions
• Twitter Cards

link rel = “canonical”

To return the canonical through the MetaData component, you MUST include the outputCanonicalLink flag with MetaData:

<MetaData outputCanonicalLink />

The href value of <link rel=“canonical”> is set differently depending on the page type.

Standalone content item pages (Article, Video, Gallery):

• WebsiteDomain of the primary_website + canonical_url in the content’s ANS
• This ensures that when multi-site organizations cross-publish content to multiple websites, the canonical URL points to the originator of the content – for example, the primary_website – and there aren’t multiple competing page versions in search results. In ANS, the story’s path on its primary website is stored in canonical_url (and story paths on additional websites are stored as website_url values for each website).
• Current implementation is done within the default-output-block as this could potentially not apply to some clients utilizing the MetaData component.

Tag pages:

• WebsiteDomain of the website being rendered + /tags/ + Story Tag
• Story Tag are defined in Composer under the Article Meta tab.

Author pages:

• WebsiteDomain of the website being rendered + Bio Page URL
• Bio Page Url is defined in the Author Service detail pages

Homepage:

• WebsiteDomain of the website being rendered

Section:

• WebsiteDomain of the website being rendered + Site Service Section ID
• Site Service Section ID is defined in the Site Service section details.

Custom control over Canonicals

Due to the varying requirements and configurations available, we have exposed two ways to override the canonical URLs exposed on the page.

canonicalDomain

The first and easiest method is one that is utilized by the Article, Video, and Gallery pages above. The canonical domain can be overridden by passing canonicalDomain to <MetaData />. Accepted values are valid domain strings.

<MetaData canonicalDomain="https://myprimarydomain.com" outputCanonicalLink />

canonicalResolver

The second method is utilizing a callback function passed to the canonicalResolver property. The following is an arbitrary example of replacing a portion of the URL, but the entire canonical URL can be returned here to override the default canonical resolution.

• If you return a false value, the canonical will not be output, so it’s important to return the default resolution if you choose to utilize this callback.

const canonicalResolver = (pageType, defaultResolution) => {
  if (pageType === 'search') {
    // replace `search` with `find` for now
    return defaultResolution.replace('/search/', '/find/');
  }
  return defaultResolution;
};

<MetaData canonicalResolver={canonicalResolver} outputCanonicalLink />

Overriding or adding metadata values in PB Editor

You have the option to add a new metadata tag value or override some automatically generated metadata by entering the value directly in PageBuilder Editor’s metadata fields:

• title This will override the value for the <title> tag
• og:title This will override the value for the og:title metadata tag
• twitter:title This will override the value for the twitter:title metadata tag