Skip to main content

Meta

The Meta component manages all <head> tags for a page using react-helmet. It handles the page title, description, Open Graph tags, Twitter Card tags, canonical URLs, robots directives, Insytful analytics metadata, and RSS feed links.

Usage​

Import and render Meta at the top of your page component, passing the relevant props:

import React from 'react';
import Meta from '~/components/meta/meta.component';

const NewsArticlePage = ({ mappedEntry }) => {
  const { title, description, heroImage } = mappedEntry || {};

  return (
    <>
      <Meta
        pageTitle={title}
        description={description}
        ogImage={heroImage?.url}
        ogImageAltText={heroImage?.altText}
        ogType="article"
      />
      {/* rest of page */}
    </>
  );
};

export default NewsArticlePage;

Props​

export type MetaProps = {
  pageTitle: string;
  description?: string;
  locale?: string;

  ogDescription?: string;
  ogImage?: string;
  ogImageAltText?: string;
  ogType?: 'article' | 'profile' | 'website' | 'video';

  twitterCardType?: 'summary' | 'summary_large_image' | 'app' | 'player';
  twitterHandle?: string;
  authorTwitterHandle?: string;

  insytful?: boolean;
  noIndex?: boolean;
  noFollow?: boolean;

  rssFeedPath?: string;
};
PropTypeDefaultDescription
pageTitlestring—Required. The page title. Rendered as {pageTitle} \| React Starter.
descriptionstring—Meta description. Also used as the Twitter description and OG fallback.
localestringen_GBOG locale tag.
ogDescriptionstring—Open Graph description. Falls back to description if not supplied.
ogImagestring—URL of the Open Graph / Twitter share image.
ogImageAltTextstring—Alt text for the OG/Twitter image.
ogType'article' \| 'profile' \| 'website' \| 'video'websiteOpen Graph content type.
twitterCardType'summary' \| 'summary_large_image' \| 'app' \| 'player'summaryTwitter Card type.
twitterHandlestring—Twitter handle for the site (e.g. @MyBrand).
authorTwitterHandlestring—Twitter handle for the content author.
insytfulbooleantrueWhen true, injects IDL:ProjectId and IDL:EntryId meta tags for Insytful analytics.
noIndexbooleanfalseAdds noindex to the robots meta tag.
noFollowbooleanfalseAdds nofollow to the robots meta tag.
rssFeedPathstring—Path to an RSS feed. Adds a <link rel="alternate" type="application/rss+xml"> tag.

Canonical URL​

The component automatically generates a canonical URL by combining a canonicalDomain (from ~/util/canonicalDomain) with the current route's canonical path from the Redux store. No manual configuration is needed.

Insytful metadata​

When insytful is true (the default), the component reads the current projectId and entryId from the Redux store and injects them as:

<meta name="IDL:ProjectId" content="..." />
<meta name="IDL:EntryId" content="..." />

Set insytful={false} on pages where you do not want Insytful to track the entry (e.g. search results pages or 404 pages).

noIndex / noFollow​

Both flags can be used together or independently. When either is true, a robots meta tag is rendered:

<!-- noIndex only -->
<meta name="robots" content="noindex" />

<!-- both -->
<meta name="robots" content="noindex, nofollow" />