Steps to combine Twitter cards, Facebook’s Open Graph Protocol and Google’s schema.org SEO properties in one Perch template.

With a purchase of Perch Runway license we get access to templates and solutions to get a developer going. These examples helped shorten my learning curve and understand how flexible Perch is while providing a structure editors for writers. I followed the solution Use Page Attributes for Open Graph Tags for all the sites I've built on Perch. If you use this solution you'll be good to go.

If you aren't familiar here are develpoper links to Twitter cards and Facebook’s Open Graph Protocols. Its supposed to make it easier to share your stories on these social influencers platforms in a structured, designed way.

After reading an informative and funny article by Jeremy Keith on Metadata Markup I decided to combine my two templates into one metadata markup template. Note: metacrap on wikipedia for etymology.

I think these are the steps I took to Perch-ify it.

1. Add new template
2. Start with code snippet
3. Switch from static content to editable content with Perch Page Attributes.
4. Test
5. Launch

My starting point was to add a new file metadata-markup.html and saved it to the pages/attributes folder. I guess I could start with Jeremy's code snippet for metadata markup as a sample. HTML can be elegant to read.

The principle is straight forward. When content values are the same combine into one tag with multiple properties.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@adactio">
<meta name="twitter:url" property="og:url" content="https://adactio.com/journal/9881">
<meta name="twitter:title" property="og:title" content="Metadata markup">
<meta name="twitter:description" property="og:description" content="So many standards to choose from.">
<meta name="twitter:image" property="og:image" content="https://adactio.com/icon.png">

I added a new template file named metadata-markup.html and saved it in my perch template folder under pages and attributes. You can name your template anything you like. Then I went into the default template, removed the twitter and facebook included files and added an include to the new metadata-markup.html file.

<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>

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@scott_gruber">
<meta itemprop="url" name="twitter:url" property="og:url" content="<perch:pages id="url" type="hidden" />">
<meta itemprop="name" name="twitter:title" property="og:title" content="<perch:pages id="og_title" label="Social title" type="text" escape="true" help="Title with no branding or site name" />">
<meta itemprop="description" name="twitter:description" property="og:description" content="<perch:pages id="og_description" label="Social description" type="textarea" size="s" escape="true" />">
<perch:if exists="og_image">
<meta itemprop="image" name="twitter:image" property="og:image" content="<perch:pages id="domain" type="hidden" /><perch:pages id="og_image" label="Sharing image" help="1200 x 630" type="image" width="1200" />" />
<perch:else />
<meta itemprop="image" name="twitter:image" property="og:image" content="<perch:pages id="domain" type="hidden" /><perch:pages id="sharing_image" type="hidden" />" />
</perch:if>
<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>

Next step is to do some testing. I boot up my local server. I’ve been using MAMP Pro. Remember the attributes default.html template which included the two templates for facebook.html and twitter.html. I’ll replace that with my new metadata-markup.html template.

I use git and github for my site. The templates used are posted here. I highly recommend you create a free account and get into git. I jump between command line with git or using Tower for Mac. So I can see the diff or changes between versions. This might be for another show. I’m ready to test the change, but not commit the change. Since this is a new feature I could create a new branch, but this is my site and its only me. I’ll keep developing on the dev branch.

Here is what the file change looks like in Tower.

Learn more about open graphic protocol

So now on my home page when I view source I see my meta tags look like this

<!-- social media markup -->
<meta itemprop="url" name="twitter:url" property="og:url" content="https://scottgruber.dev:8890/">
<meta itemprop="name" name="twitter:title" property="og:title" content="Hello from Scott Gruber">
<meta itemprop="description" name="twitter:description" property="og:description" content="This is the personal website of Scott Gruber. The site follows the POSSE style to publish once and syndicate to many sites.">
<meta itemprop="image" name="twitter:image" property="og:image" content="https://scottgruber.dev:8890/perch/resources/images/scottgruber-3-w1200.jpg" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@scott_gruber">

Yeah! I saved four lines. It used to output like this. Not much so why go through this exercise?

One thing I like in the meta markup template is more concise output which is clearer reading to me. Another important thing is showing how structure content is so useful. When a new schema comes out I might just be able to add a new property. Its also amazing how fast I could make the change using Perch.

<meta property="og:site_name" content="Scott Gruber's site. Welcome friend." />
<meta property="og:url" content="https://scottgruber.me/" />
<meta property="og:title" content="Hello from Scott Gruber" />
<meta property="og:description" content="This is the personal website of Scott Gruber. The site follows the POSSE style to publish once and syndicate to many sites." />
<meta property="og:image" content="https://scottgruber.me/perch/resources/images/scottgruber-3-w1200.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@scott_gruber" />
<meta name="twitter:title" content="Hello from Scott Gruber" />
<meta name="twitter:description" content="This is the personal website of Scott Gruber. The site follows the POSSE style to publish once and syndicate to many sites." />
<meta property="twitter:image" content="https://scottgruber.me/perch/resources/images/scottgruber-3-w1200.jpg" /><meta name="twitter:url" content="https://scottgruber.me/" />