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

Perch includes SEO templates for Twitter and Facebook. Here are my notes how I combined two templates into one and added support for Google's data schema. Its really easy with Perch!

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

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.

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.

Screenshot shows three files included in default.html Screenshot now shows two files included in default.html

So my complete version one new template looks like this.

I decided to add support for Google’s schema because its totally easy and I’m a bit of a structured data geek. New property on the same meta tag gains new schema support.

Ok lets break down my new template.

I compared my saved twitter.html and facebook.html templates. Facebook supports type of content so I moved that into my mega template with a perch if statement because it isn’t a required field.

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.

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.