SEO Magic - Managing SEO elements with MagicEdit

A web page that is not optimized for search engines is next to invisible.

There are layers of SEO, starting with separation of style and content, clean markup, and other tricks like source ordering. Then there are some specific elements that should be on the page, things like properly formatted headers (<h1>'s) and, well, content that is actually original and relevant. In this post we are going to discuss the two elements that live in the page <head> that actually matter: the <title> and the <meta name="Description">.

These two elements are what will usually show up on the search results, along with the URL itself and portions of the content that are relevant to your search.

"What about meta keywords?" you ask. "Gotta have keywords!!" What, are we still living in 1995? The meta keyword tag is utterly useless, thanks to massive abuse back in the late 90's by sites pushing certain lifestyle enhancement pharmaceuticals.

Now, if you're already using MagicEdit, it's easy enough to manage the actual site content. Piece of cake; just wrap the editable content in <magicedit> tags. But what about the stuff in the head of the document that's hidden away? I'll show you how to quickly add some tags to your HTML that will make the page meta elements automatically update when the content of the page is edited.

Managing the Page Title

Let's start with the page title. We need to add a little code to both the page <head> and the body of the page.

Typically you have the title of the page in an <h1> in the page. If you don't, you should consider adding it. It might look something like this:

<h1>A Super Awesome Title</h1>

Now, let's make this title editable and name it uniquely within the site or MagicRepeat instance:

<h1><magicedit me_name="myPageTitle" me_plain>A Super Awesome Title</magicedit></h1>

So now the content manager can update the page title using the plain text editor. Now, let's just add an ID to the MagicEdit tag:

<h1><magicedit id="pageTitle" me_name="myPageTitle" me_plain>A Super Awesome Title</magicedit></h1>

The trick now is to make the content of the <title> in the document head reflect the content of the title on the page. This can be accomplished like this (remember, this is in the <head>):

<title>My Awesome Site - <cl_marker cl_binding="#pageTitle.value" /></title>

Here is what this code does. A cl_marker will dynamically write something into the page; that something is determined by what you bind it to (read more about cl_marker here). In this case we are actually binding the marker to the element in the page with the ID "pageTitle". That's what #pageTitle accomplishes. For technical reasons beyond the scope of this post, we also need to add the .value key.

Nifty matching titles

What we've just accomplished is extraordinarily useful. The reason we've done it this way is so that we can use the same code in the document head (e.g. by using a Server Side Include) for every page in the site, and simply update the title by giving some element in the page an ID of "pageTitle". This even works if the header element of your page is not editable: just add id="pageTitle" to the wrapper of your header text.

<h1 id="pageTitle">Contact Us</h1>

Managing the Meta Description

Here's how to do the meta description. The only real difference is how we inject the description as an attribute of the meta tag:

<meta name="Description" cl_content="#pageDescription.value" />

Here we're using a feature that allows us to write a dynamically generated attribute into an HTML tag. In this case, it's looking for something on the page with the ID "pageDescription". We'll need to have a MagicEdit region in the document body that will work as the page summary. You might have something like this:

<p><magicedit me_name="myPageDescription" me_plain id="pageDescription">About this page.</magicedit></p>

Now it's easy for the content manager to keep the page description updated using a simple MagicEdit region.

Deploying Admin-Only Regions

There are times when you don't actually want the meta Description shown in the page, but you still want the content manager to be able to manage it. There is an easy way to show content only when an administrator is logged in, so now you can expose special editable regions and content manager instructions for how to use those regions.

What we'll do first is add a div element to the page and do a little magic on it so that it only appears when the site administrator is logged in. Here's how to accomplish that:

<div class="instructions" cl_visible="=CLManager.activeAccount:isAdmin">
  <h2>Administrator Instructions</h2>
  <p>Your instructions go here.</p>

Let's see what this does. First, the class lets you define a look to your admin-only regions that can set it apart from the rest of the site. Not required, but recommended.

The most important part is the cl_visible section, which shows or hides a block of HTML based on the conditions the web designer specifies. You can do lots of stuff with cl_visible, but the most common use is to check if a site administrator is logged in. For more information on cl_visible, check out this article.

So now we have a block of HTML that will only show up when the administrator is logged in, and be invisible otherwise. We'll just add our meta Description editor inside like this:

<div class="instructions" cl_visible="=CLManager.activeAccount:isAdmin">
  <h2>Page Description</h2>
  <p><magicedit me_name="myPageDescription" me_plain id="pageDescription">About this page.</magicedit></p>

That's It!

You just learned how to set up a page that is not only easily managed, but also allows your content manager to maintain the page meta information. Now the site will be prepared for the next time those search engine spiders come sniffing around.

You can check out a demo below, and the demo files are also available as a .zip so you can check it out on your own.

Try Out a Demo

Click here to try a demo.