ProcessWire: Best Practice Meta Tags

There are dozens of ways of adding meta tags like title, keywords and description to your website and probaby even more using a CMS. As you may know my favorite CMS is Processwire. So here is the way I'm using it with more or less dynamic SEO meta tags:

Create fields

There are some fields needed for this. The required fields are:

  • meta_title (Text)
  • meta_keywords (Text)
  • meta_description (Text)

Optional fields for a better order are:

  • _meta (FieldsetTabOpen)
  • _meta_END (FieldsetClose, will be created automatically after creating _meta)

Of course you can call them however you want but I'm continuing using this names in this article.

Add them to the template (e.g. basic-page)

As with any field in ProcessWire you have to add them to your template afterwards. I recommend to add them to your "home" template to. Why? I'm going to explain this later.

Added to the end of the template's fields it should look like this:

Insert the Meta Data

If you're now editing a page you should recognize a new tab at the top called "Meta" (or if you didn't add a title "_meta"):

Here you can insert specific meta tags for every page. But what happens if you leave it empty? That's why I recommended to add the meta fields to your "home" template to. Because we're going to use the "home" meta tags as default.


That's everything we have to setup in the backend. Now we need to add some code to the frontend (your template files) to display them:

Display the meta tags

Here is the code you have to add. I think it's self explaining (at least if you're knowing PHP shorthand conditions):

<title><?php echo (($page->meta_title) ? $page->meta_title : $pages->get('/')->meta_title); ?></title>

<meta name="keywords" content="<?php echo (($page->meta_keywords) ? $page->meta_keywords : $pages->get('/')->meta_keywords); ?>" />
<meta name="description" content="<?php echo (($page->meta_description) ? $page->meta_description : $pages->get('/')->meta_description); ?>" /> 

Sorry for the bad redability. Should be more clear after copying it into a text editor.

http://supercode.co/s/4d9

CSS: Automatically Add Spaces Between Boxes

If you are a front end designer you probably know this problem: You have to add spaces between every html element like between <p> and <img> or <pre> and <figure> or whatever. It's a lot of code which can be simplified into one line:

.content > * + * {
/* perfect if your line-height is 20px */
margin-top:20px; 
}

What does it do?

It's no magic hidden here. The > means that the following stuff is only for direct childs of .content. The * means every element and the + stand for "following". So in spoken language it would be:
Every element which follows another element (so it's not the first child) whose are both childs of .content should have a space of 20px at it's top.

It's probably not the best way to do it but it works really well for me. You can see it in real life over here: http://jsfiddle.net/Stadtpirat/qQz3r/1/

http://supercode.co/s/4cc

50 Shades of CSS3 background-size

Back in the days when CSS3 was new and really exciting I discovered the "background-size" option. It's a really greatthing and probably important to at least everyone who's builing retina-ready sites. But there are a lot of more interesting ways to use it. Here are my favorites:

background-size:cover;

As you can see in these two example pictures the whole box is covered by the background without changing the proportions. This means that you'll probably never see the whole background because there is always a part which is cut off. On devices with "land screen" orientation you probably parts of the upper and/or the lower. On "portrait" orientated devices you're more likely to see the left and/or right side being cut.

It's like a mix between "100% auto" and "auto 100%" according to which orientation is used.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:cover;
}

 

background-size:contain;

With "contain" the whole background image is always visible. No cuts and no change of proportions. I thinks it's clear and one example image is enough.

It's like a mix between "100% auto" and "auto 100%" according to which orientation is used.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:contain;
}

 

background-size:100%;

With "100%" it's finally getting more interesting. "100%" is the same as "100% 100%" which means 100% width of the box and 100% height of the box is covered by the image. With this set your background image will probably neither remain it's original proportions nor size. But nothing will be cut of, too. 

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:100%;
}

 

background-size:100% auto;

Now "100% auto" is really interesting - I discovered it only not that long ago. It stands for 100% width and auto height. So your background image will remain it's original resolution. But nothing will be cut of (if your screen height is not to small), too, at any size. It's great for designing responsive websites where you want to have something always in 100% at the top and height doesn't matter.

In this example it's used in combination with "background-position:top center":

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:100% auto;
}

 

background-size:auto 100%;

The opposite of "100% auto" is "auto 100%". It does the same thing but uses full height instead of full width. So it resizes you're image to always be in full height without changing proportions. Never needed this but there are probably some use cases for this, too.

.box {
width:400px;
height:225px;
background:url(http://37.media.tumblr.com/a35a6be745f3f60dda5bc4734184ba17/tumblr_n5w6lctTqq1st5lhmo1_1280.jpg) no-repeat center center;
border:3px solid #ff0000;

background-size:auto 100%;
}

 

Others

Of course there are a lot of other ways to resize your background image (at least 45 others). Like using fixed width pixel sizes or not 100% but 70% or 13% or whateever. In combination witth multiple background multiple positionings, etc. it looks like there is an infinite amount of ways to use it. So have fun with it and I hope this article helped you.

P.S.: Here is something to play with: http://jsfiddle.net/e9w4y/

http://supercode.co/s/4c7