Setting up page meta (including canonical urls)

I developed the following as result of trying to fulfil the meta requirements suggested by Chirp SEO. I highly recommend Chirp, we have seen some excellent results by just fulfiling the requested requirements.

There are probably more efficient ways of achieving the same results, but here is how I have done it. Until I find a better way!

Setting up

Depending on your site there are a few steps to getting this up and running. First, we need to tell Perch what we are running on the site, so pages, blogs and collections are the most common scenarios.

Step one - Set up page head

Within our page-head.php file, or whatever you have called it, basically the file that controls the global head info. We need to tell Perch all the different types of meta we wish to display.

    <?php
      // Global site name
      $sitename = perch_content_custom('Site Name', [
        'skip-template' => true,
        'return-html' => true,
      ])['html'];

      // Set system variables
      PerchSystem::set_var('sitename', $sitename);
      PerchSystem::set_var('page_title', perch_pages_title(true));
      PerchSystem::set_var('domain', 'http://'.$_SERVER["HTTP_HOST"]);
      PerchSystem::set_var('url', perch_page_url([], true));
      PerchSystem::set_var('twittername', '@TWITTERNAME'); // Change Twitter name if using

      // Hide site name if required
      if(perch_layout_has('hide_sitename')) {
        PerchSystem::set_var('hide_sitename', true);
      }

      // Switch between meta information
      switch(perch_layout_var('meta', true)) {
        case 'casestudy':
          perch_collection('Case Study', [
              'template'   => 'casestudy/meta_head',
              'filter' => 'slug',
              'match' => 'eq',
              'value' => perch_get('s'),
          ]);
          break;

        case 'team':
          perch_collection('Team', [
              'template'   => 'team/meta_head',
              'filter' => 'slug',
              'match' => 'eq',
              'value' => perch_get('s'),
          ]);
          break;

        case 'testimonials':
          perch_collection('Testimonial', [
              'template'   => 'testimonials/meta_head',
              'filter' => 'slug',
              'match' => 'eq',
              'value' => perch_get('s'),
          ]);
          break;

        // If you are not using collections, you probably only need the below.
        case 'blog-post':
          perch_blog_post_meta(perch_get('s'));
          break;

        default:
          PerchSystem::set_var('page_title', perch_pages_title(true));

          perch_page_attributes([
            'template' => 'default.html'
          ]);
          break;
      }
    ?>

In the above example, we have three collections (case study, team and testimonials). We then switch back to our blog meta, and then our default page attributes.

So if your not using collections of any sort. Your code could simply be:

    <?php
      // Global site name
      $sitename = perch_content_custom('Site Name', [
        'skip-template' => true,
        'return-html' => true,
      ])['html'];

      // Set system variables
      PerchSystem::set_var('sitename', $sitename);
      PerchSystem::set_var('page_title', perch_pages_title(true));
      PerchSystem::set_var('domain', 'http://'.$_SERVER["HTTP_HOST"]);
      PerchSystem::set_var('url', perch_page_url([], true));
      PerchSystem::set_var('twittername', '@TWITTERNAME'); // Change Twitter name if using

      // Hide site name if required
      if(perch_layout_has('hide_sitename')) {
        PerchSystem::set_var('hide_sitename', true);
      }

      // Switch between meta information
      switch(perch_layout_var('meta', true)) {

        case 'blog-post':
          perch_blog_post_meta(perch_get('s'));
          break;

        default:
          PerchSystem::set_var('page_title', perch_pages_title(true));

          perch_page_attributes([
            'template' => 'default.html'
          ]);
          break;
      }
    ?>

Step two - Define site name

To define site name I normally create a region and then share it across the site. I call this region on the home page. In my home page template, starting the file with the following:

<?php
  perch_content('Site Name', true);
  perch_layout('global/page-head', ['hide_sitename' => true,]);
?>

As you can see, as this is the home page, I have opted not to display the sitename.

Step three - Page attributes

perch/pages/attributes/

├── attributes/
   ├── chirp.html
   ├── default.html
   ├── facebook.html
   ├── seo.html
   └── twitter.html

Each of the above files contributes to the meta head of each page. The above is in alphabetical order but in fact, deault.html pulls in the files in the following order.

   ├── seo.html
   ├── facebook.html
   ├── twitter.html
   └── chirp.html

The contents of each file are as follows:

seo.html

<title><perch:pages id="page_title" type="hidden" /><perch:if not-exists="hide_sitename"> - <perch:pages id="sitename" type="hidden" /></perch:if></title>
<link rel="canonical" href="<perch:pages id="url" type="hidden">">
<meta name="description" content="<perch:pages id="description" label="Meta description" type="textarea" size="l" escape="true" count="chars" />" />
<meta name="keywords" content="<perch:pages id="keywords" label="Meta Keywords" type="textarea" size="m" escape="true" help="Separate with commas" count="chars" />" />
<meta name="robots" content="<perch:pages id="noindex" label="Do not index" type="checkbox" value="noindex" append="," divider-before="Search engine indexing" /><perch:pages id="nofollow" label="Do not follow links" type="checkbox" value="nofollow" append="," /><perch:pages id="nosnippet" label="Do not show a snippet" type="checkbox" value="nosnippet" append="," /><perch:pages id="otherrobots" label="Other Robots" type="text" append="," />" />

facebook.html

<meta property="og:site_name" content="<perch:pages id="sitename" type="hidden" />" />
<meta property="og:url" content="<perch:pages id="url" type="hidden" />" />
<meta property="og:title" content="<perch:if exists="og_title"><perch:pages id="og_title" label="Social title" type="text" escape="true" help="Title for this document with no branding or site name. og:title tag." divider-before="Facebook Open Graph Tags" /><perch:else/><perch:pages id="page_title" type="hidden" /></perch:if>" />
<perch:if exists="og_description"><meta property="og:description" content="<perch:pages id="og_description" label="Social description" type="textarea" size="s" escape="true" help="This is often the same as the Meta Description. og:description."/>" /></perch:if>
<meta property="og:image" content="<perch:pages id="domain" type="hidden" /><perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" type="image" width="1200" else="/assets/img/stokesleyshow-social-img.jpg" />" />
<perch:if exists="og_type"><meta property="og:type" content="<perch:pages id="og_type" label="Facebook type" type="select" options="article,book,profile,website,video,music" allowempty="true" />" /></perch:if>
<perch:if exists="og_author"><meta property="article:author" content="<perch:pages id="og_author" type="hidden" />" /></perch:if>

Note: On og:image there is an else= tag, this will insert a image if the client doesn't. You will need to reference your own image.

twitter.html

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="<perch:pages id="twittername" type="hidden" />" />
<meta name="twitter:title" content="<perch:if exists="og_title"><perch:pages id="og_title" label="Social title" type="text" escape="true" help="Title for this document with no branding or site name" divider-before="Facebook Open Graph Tags" /><perch:else/><perch:pages id="page_title" type="hidden" /></perch:if>" />
<perch:if exists="og_description"><meta name="twitter:description" content="<perch:pages id="og_description" label="Social description" type="textarea" size="s" escape="true" />" /></perch:if>
<perch:if exists="og_image">
<meta property="twitter:image" content="<perch:pages id="domain" type="hidden" /><perch:pages id="og_image" label="Image when shared" help="Should be at least 1200x630" type="image" width="1200" />" />
</perch:if>
<meta name="twitter:url" content="<perch:pages id="url" type="hidden" />" />

chirp.html

<perch:pages id="chirp" type="chirpseo" />

default.html

<perch:template path="pages/attributes/seo.html" />
<perch:template path="pages/attributes/facebook.html" />
<perch:template path="pages/attributes/twitter.html" />
<perch:template path="pages/attributes/chirp.html" />

Step four - Define meta in post page

The final part of the process is to tell each post page which meta document it should be looking at. This will need apply to each blog and collection. In each case, you only need to point the page_head at the meta. For example:

Blog

/templates/pages/blog/post.php

<?php perch_layout('global/page_head', ['meta' => 'blog-post']); ?>

Case Study (Collection)

/templates/pages/casestudy/detail.php

<?php perch_layout('global/page_head', ['meta' => 'casestudy',]); ?>

Team (Collection)

/templates/pages/team/detail.php

<?php perch_layout('global/page_head', ['meta' => 'team',]); ?>

Testimonials (Collection)

/templates/pages/testimonials/detail.php

<?php perch_layout('global/page_head', ['meta' => 'testimonials',]); ?>

For each collection my detail.php page contains the following:

<?php
  $casestudy = perch_collection('Case Study', [
    'filter' => 'slug',
    'match' => 'eq',
    'value' => perch_get('s'),
    'template' => 'casestudy/item_detail.html',
    'skip-template' => true,
    'return-html' => true,
  ]);

  if(isset($casestudy[0])) {
    // exists - let's grab the title
    $page_title = $casestudy[0]['title'];
    PerchSystem::set_var('current_page_title', $page_title);
  } else {
    // doesn't exist - let's redirect to the 404 page
    PerchSystem::redirect('/errors/404');
  }

  perch_layout('global/page-head', [
    'meta' => 'casestudy',
  ]);

  perch_layout('global/header');

  // output the item
  echo $casestudy['html'];

  perch_layout('global/footer');
?>

Wiki

Perch Resource Wiki / page_meta