Posts from "2012"

3 Attributes that Define an Organic SEO Friendly CMS

Content management systems (CMS) are massively popular when it comes to building and operating a website. When seeking a CMS platform for your website, you should take into account search engine optimization (SEO), for organic SEO is a powerful way to get your blog and website content exposed in the search results.

Organic SEO is simply the practice of optimizing your content in an effort to earn higher rankings in the organic search results (unlike PPC advertising where users bid on keywords for search exposure.) The CMS platform you choose will ultimately impact how efficient your content can be optimized, and thus its potential at getting ranked for organic search marketing.

For this reason, it's important that you choose an organic SEO friendly CMS to ensure your website can be properly optimized.

If you plan to develop web content and manage a blog or website using a CMS, you'll definitely want to pinpoint a software platform that's highly SEO friendly. The following three attributes that define an organic SEO friendly CMS will help you determine which platforms will work best for your website.

Elements of Organic SEO Friendly CMS Platforms

  • Effective organic SEO utilizes a number of website elements, such as a footer, HTML sitemap, and a number of off-page and on-page SEO elements. It's critical to ensure that your CMS caters to these necessary organic SEO friendly website elements.
  • It's imperative that your CMS enables you to write custom page titles (or "Meta titles,") Meta descriptions, and URL's per page. These pieces of content contribute heavily to organic SEO. And although some CMS platforms have these features built-in, others systems require you to download or purchase plug-ins.
  • Organic SEO friendly CMS platforms will generate the coding of a website to be very crawler-centric. In other words, some CMS platforms produce websites using seamless HTML coding structures (ideal for organic SEO,) whereas others use cumbersome coding structures that can limit SEO performance. Understand these back-end considerations before making your final decision.

Bonus Tip!

In addition to the latter three qualities that define an organic SEO friendly CMS, check the categories feature of the CMS. Some CMS software platforms do not allow users to create categories and subcategories. This is particular important for blogging, as well as structuring multi-folder URL naming conventions for organic SEO.

There's a lot of consideration that goes into choosing the right CMS. These are just the foundational elements that make a CMS friendly for organic search marketing and SEO. Keep these qualities top of mind when searching for that ideal, organic SEO friendly CMS platform to manage and optimize your web presence.

About the Author:

Tyler Tafelsky is organic SEO expert for the Web Presence Group, a full-service website optimization company that specializes in web presence optimization. Tyler has worked with several CMS platforms to optimize websites, and he's well-adept the features and functionalities that constitute organic SEO friendly CMS platforms. You can connect with Tyler on Google+, or follow him on Twitter.


Keyword Optimization Tips for Your Exponent Ecommerce Website

The Exponent CMS is the ideal platform for online stores, especially when it comes to ecommerce SEO. Not only does Exponent generate website's to be SEO code-friendly in the back end, but Exponent makes keyword optimization easy in the front-end user interface.

In this video, we share with you some tips on how to go about properly keyword optimizing the product pages of you ecommerce site for better SEO performance. We start with some brief insights on keyword research and selection, then move forward on some of the best practices of optimizing your company's website via the page title, meta description, keyword, and URL.

If you'd like to learn more about the SEO strengths and weaknesses of you ecommerce site, visit ClickCentric SEO for free website assessment. The experts at ClickCentric will perform a hands-on audit and evaluation of your website.

Coping with the v2.0.9 Upgrade

Unlike most previous releases, the release of v2.0.9 has seen it's share of problems.  Though most of these are minor issues, they can seem to be an obstacle if not addressed.  Here's some things to watch out for, and steps to correct these issues:

Git Pull upgrade creates a merge conflict and the site 'crashes':

'Git' is supposed to prevent this, but for some reason when updating (git pull) a 'git' maintained site from 2.0.8 (or the patches) to 2.0.9, you'll receive a notice of a merge conflict and the site will no longer work.  The problem lies in two files (exponent_version.php and framework/modules-1/calendarmodule/class.php).  There are a couple different options to fix this, so you'll find the details in this forum post.  We are working to alleviate this issue!

Menus don't work the same as before the upgrade:

Even though the new navigation controller includes some compatibility to still allow old style navigationmodule modules to work...this apparently isn't true in all circumstances, especially complex menus.  The solution is to update the calls and the templates/views to the new 2.0 navigation module format.  This is a fairly simple change as it entails copying and renaming those custom templates.  You'll find the details in this forum post.

My customized site 'crashes':

This occurs if you are running customized modules (controllers) on your site.  Because PHP v5.4.x enforces greater code standards, we've had to update some of the main code which in turn requires updates to any custom modules (controllers).  This is a fairly simple update as it entails adding the 'static' keyword to the static functions inherited from the parent expController class.  You'll find the details in this forum post.

We'll keep this article up to date as things progress.

Tutorials: How to Convert a Generic Theme to Exponent

Here is a tutorial that will be appearing on the docs site which walks you through converting a generic web theme/template found on the internet into an Exponent theme.

Here's how you can create a custom theme using a generic web theme template.  There are countless free and paid web templates available on the internet.  You may search one of the template collection web sites to locate a 'theme' you would like to incorporate into Exponent.  For the purposes of this tutorial, we'll select a simple 3-column liquid template.

The template we've chosen can be found at and we'll use the 3 Column (Blog Style) Liquid Layout which can be downloaded here.  Most themes are very easy to convert EXCEPT for the menu.  In this case the menu is an easy drop in replacement since the basic template doesn't really feature a menu,  Other templates might require custom styles to make it look similar, where others might require a near rewrite to create a duplicate menu.

Extract the template package to a new subfolder within the /themes folder.  Rename the folder to 'blogtheme'.  ALL themes MUST use a folder name that ends with the 'theme' phrase!  Inside the folder you'll note several files, one of which is 'index.htm.'  Open it in your browser to see what we've got.  You'll also note several graphics and a single stylesheet file in the folder.

Next we'll need to reorganize the folder to conform to Exponent theme requirements.  Create a 'css' folder and place all the stylesheets there (in this case only screen.css).  Create an 'images' folder and place all the images there (in this case none of the images are really used in the theme).  Next edit the index.htm and css/screen.css files to update the references to the new locations.

  • In index.htm, you'll need to change the stylesheet and image references (this isn't necessary, but a good troubleshooting step).
    • <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />


      <link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />
    • <img src="mjt-125x125.gif"


      <img src="images/mjt-125x125.gif"

      there are several of these.

  • In css/screen.css, you need to change the references to graphics.  This is NOT necessary in this tutorial since there are NO graphics referenced by this particular css file, HOWEVER this is not simply a trouble shooting step!

    • Search for every instance of 'background : url(' and correct the url.  In this sample if there were any images, we could add an '../images' prefix to point to the new location of images.

  • Refresh the sample page in the browser and you should see NO changes if everything went well.  Otherwise you need to check your edits.

Next we'll create the theme class file.  Copy the 'class.php' file from the simpletheme folder.

  • Change the following line:
    if (class_exists('simpletheme')) return;
    if (class_exists('blogtheme')) return;
  • and change the following line:
    class simpletheme extends theme {
    class blogtheme extends theme {
  • Change the string in the name() function to "3-Column Blog Theme", you could also eidt the author() and description() strings as desired.

Now we'll convert the index.htm file into a theme template.

  • Rename index.htm to index.php
  • Replace the contents of <head>...</head> with expTheme::head() since Exponent handles this for us:
  • We'll also need to add the mandatory Exponent footer just above the closing </body></html> tags since this is what actually places the css and javascript on our pages

    <?php expTheme::foot(); ?>

You should now be able to select your new (useless) theme in Exponent, so log on to your site and Manage Themes and select your new "3-Column Blog Theme".  Don't expect too much just yet as we have NO dynamic content.  If you can select the theme and the site displays properly with the Exponent menu, we can proceed.  Otherwise you'll need to check the above steps and your editing for accuracy.

Next we'll clean the dead wood (static content) out of our template, index.php and replace it with dynamic content code.

  • Delete all the lines between <div id="header"> and its closing </div> tag, about 13 lines and replace it with our header and menu 
        <a href="<?php echo URL_FULL; ?>" title="<?php echo SITE_TITLE; ?>"><?php echo ORGANIZATION_NAME; ?></a> <sub><?php echo SITE_HEADER; ?></sub> 
    <?php expTheme::module(array("controller"=>"navigation","action"=>"showall","view"=>"showall_YUI Top Nav","source"=>"@top")); ?>
  • Look for the <!-- Column 1 start --> comment and delete all the lines to the <!-- Column 1 end --> comment and replace it with our main container

    <?php expTheme::main(); ?>
  • Look for the <!-- Column 2 start --> comment and delete all the lines to the <!-- Column 2 end --> comment and replace it with our left column container
    <?php expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@left")); ?>
  • Look for the <!-- Column 3 start --> comment and delete all the lines to the <!-- Column 3 end --> comment and replace it with our right column container
    <?php expTheme::module(array("module"=>"container","view"=>"Default","source"=>"@right")); ?>
  • Finally, replace all the lines between <div id="footer"> and it's closing </div> with our footer text module
    <?php expTheme::module(array("controller"=>"text","action"=>"showall","view"=>"single","source"=>"@footer","chrome"=>1)) ?>

We're almost done, but need to add some styling to the .css file to ensure Exponent menus, etc.. are always in front of other items.

  • The easiest way to do this is to create a 'base-styles.css' file in the /css folder.  We'll need to ensure the <div> id's match the one's used in the template.  Here's what our's would look like
    #header, #bd, #footer {
    #header {
    #header {
    #bd {
    #footer {

At this point we should have a fully functioning theme suitable for use.  In most cases you may need to tweak the theme styles to override system styling or other conflicts resulting from the theme's styles.  This may be as simple as too much/little spacing to the menus don't work because most menus are actived by css styling or javascript which rests on using css styling.

The last thing we might want to do is to create a CKEditor css file.  You can find those details here.

On-Page SEO Tips for Your Exponent CMS Website

On-page SEO is essential to ensure the pages of your site are indexed according to certain keyword targets. On-page SEO, or on-page optimization, is the art of using specific keywords throughout the content of a page.

As a result, pages of your site will be stored in the right 'search engine deck' or keyword category, and your potential to rank on those keywords is optimized. When it comes to on-page SEO, having an Exponent CMS website offers many advantages. Exponent aids the on-page optimization process by providing content editing fields for the page elements that have the most impact on SEO.

Three of those page elements are the Page Title, Meta Description, and Page Copy (or text). In short, it's critical that you establish keyword relevancy in these three areas of the page. For the context of this article, we'll assume you've done your keyword research and move forward with the on-page SEO process.

Optimizing Page Titles

The page title highlights the main focus or subject matter of a page. The text of the page title makes up the hyperlink that's shown on a Google search engine results page. Page titles have the most weight for on-page SEO and establishing keyword relevancy for a page.

It is thus important to write well-balanced page titles that are both keyword optimized and user focused. Below are several tips to keep in mind when creating well optimized page titles:

  1. Always include the exact phrase match of your primary keyword target for each page. It also helps to introduce the keyword phrase as early as possible in the page title.
  2. Make sure the page title accurately describes the content of the webpage (and is not overly keyword-stuffed.) This gives search engine users a good representation of what the page is about.
  3. Try to keep the length of each page title between 60 and 70 characters. Google will only display so many characters, so keep your titles tight and to the point.
  4. Ensure that the title for each page is unique. This is extremely important for ecommerce SEO, for some deep websites have automatically generated page titles that are duplicated throughout the site. Taking the time to customize and keyword optimized the title for each page is critical for SEO.

Optimizing Meta Descriptions

In essence, Meta descriptions are short summaries of a page that are displayed just below page titles in a search results listing. Similar to page titles, Meta descriptions are not visible on the actual page (only in the search results,) yet they still carry a great deal of importance for SEO and establishing keyword relevancy.

In addition to including keywords for SEO, good Meta descriptions are informative, value-oriented, and will usually include a call to action. Below are a few tips for writing quality Meta descriptions with both SEO and users in mind.

  1. Keep your Meta descriptions about one sentence long, or between 150 and 200 characters. Google and other search engine will only display about 160 characters.
  2. Use your primary keyword target early in the Meta description. If you have room or if it makes sense in the copy, try using a keyword variation towards the end, but do this respectively and avoid keyword stuffing.
  3. Write creative and compelling Meta descriptions. Include verbs and call to action statements, and really promote what’s unique and valuable about the page or what's being offered.

Optimizing On-Page Copy

The on-page copy or visible text is what users read while on your pages. It is also what spiders crawl after they hit the page title and Meta description. Thus it is important that your page copy is user-focused in that it reads smoothly and expresses value to visitors, as well as keyword-focused in that the copy includes a balance of keywords in the right places. Writing keyword-optimized copy is not always easy. The process is a balancing act of writing with a natural, creative flow while making sure your targeted keywords are mentioned throughout the copy. Below are some on-page optimization tips to keep top of mind while scribing optimized webpage copy.

  1. Use different types of headers in your page copy. That is, group or chunk your copy based on various ideas and concepts, and make use of H1's, H2's, and H3's while separating each idea. Think of H1's as the primary title of a page, while h2's and h3's are supportive sub-headers for each topic. Respectively include your keyword targets in headers.
  2. Strong tag (not bold) instances of keywords in the copy. This tells search engine spiders that a specific word or phrase is a bit more significant.
  3. Apply other text styling attributes, like italics or underlining, to the copy. Whether or not your keywords are involved, these styling elements can offer a bit more stimulation for users when reading your page copy.
  4. Reference your primary keyword target a few times in the page copy. Mention your keyword target in first H1 and in the first few sentences of the copy, but avoid keyword-stuffing. Use keywords naturally while writing optimized copy.
  5. Try to include a sufficient amount of text on each page. Pages that have been well optimized will have between 200 and 2,000 words of text, depending on the nature of the page. Typically, the more (unique and valuable) content you include on your optimized pages, the better potential they'll have of ranking well in the search engines.

Optimizing the Page Title, Meta Description, and Page Copy is not rocket science, and neither is search engine optimization. The focus of on-page SEO is to establish keyword relevancy with creative and logical use of certain semantics. Although this phase is essential for SEO, it is only half the battle of achieving a top ranking. Off-page SEO holds just as much importance to the website optimization process.

(updated) Two Column Forms (or something like that...)

(Updated Aug 2nd) We've had several requests lately to 'make forms look like they did in versions prior to v0.97.'  Meaning, place the label and input control on the same line instead of the label above the input control.  Since we're trying to move away from using tables to format the layout (the html5 way of doing things), it's not an easy fix, HOWEVER we can simulate the look using css styles.  (NOTE: we have implemented a Single column/Two Column form settings option in the next version 2.0.9 which will easily implement this feature)

Forms in 2.0

Forms in 0.96

Restyled Forms in 2.0

Though you won't necessarily end up with an exact reproduction, it will look similar.  One drawback is the width of the label is a hard width and will truncate long labels.  This more robust styling below prevents the label truncation.  Enter/Change this into your theme stylesheet: (updated Aug 2nd)

.control  {
    overflow: auto;

.control .label {
    display: block;
    float: left;
    width: 150px;  /* non-flexible part truncates label */
    text-align: right;
} .label {
    width: auto;  /* make radio buttons look normal */

.control.checkbox .label {
    width: auto;  /* make checkboxes look normal? may not be needed */
}, .control table, .control.radiogroup table, table, .control.checkbox table {
    display: inline;

.control-desc {
    margin-left: 160px;  /* make description fall directly under input */

.formmoduleedit .item-actions {
    display: inline;
    float:  right;


The Shape of Things to Come?

In recent conversations in the #exponent-cms irc chat on we’ve been discussing how best to maintain Exponent using the most current software technology.  Though Exponent has been based on YUI (Yahoo User Interface) for years, there are more commonly supported libraries which might be worth considering.  Some of these have familiar names in the developer community such as ‘jQuery’, ‘Twitter-Bootstrap’, and the ‘LESS’ css stylesheet compiler.  What’s more, several aspects of YUI are currently broken and unusable in Exponent (e.g., we ship v3.4.0 because newer versions such as v3.4.1, v3.5.x and the soon to be released v3.6.x break our displays).  (Rest assured, we'll maintain backwards compatibility) So here’s where Exponent MIGHT go within the next several releases.

The LESS css stylesheet compiler will likely be implemented and ship with v2.0.8, though not necessarily in its final configuration.  LESS allows a designer to create stylesheet templates with variables and other programming commands to allow the ‘machine’ to do most of the work rather than the designer needing to continually re-write redundant styles.  More information can be found at  You will be able to fully use .less files in v2.0.8, however their location MAY have to be moved and their inclusion statements MAY need to be edited in future versions once we finalize support.

jQuery is a javascript library similar to YUI, but is designed for smaller projects.  However, it is more widely used and supported across the developer community.  If you were to browse the internet for examples of coding solutions, you’d most likely see several based on jQuery and very few solutions based on YUI.  There are tons of interface add-ons and other solutions available for jQuery.  More information can be found at

Twitter-Bootstrap is a new user interface library of components and styles similar to YUI .  It uses both jQuery & LESS.  In many ways it is much simpler to implement than YUI and is more responsive to various display sizes without the need for multiple stylesheets or themes.  More information can be found at
We already have locally running copies of Exponent using these technologies in the form of a custom theme which could easily be dropped into an existing v2.0.8 installation if desired.  So a future version of Exponent with a Bootstrap theme could look like this:

Theming for the iPad

I have been working this week on updating some of my Exponent sites to take advantage of the mobile theming feature now available in Exponent 2. In a nutshell, the feature allows you to define a separate index.php file that will be viewed by clients using mobile browsers. You can also use specific CSS code to adjust the appearance of your page to better suit the browsing of small screen mobile devices.

Enter the iPad. With a maximum screen width of 1024 px you have a screen size equivalent to most laptop screens but with the handicap that dropdown menus (Such as the YUI Top Menu) do not work in the safari browser on the iPad.

Now if you talk to other web designers you will find many who advocate that dropdown menus are a poor way to provide efficient navigation to your users and the fact that they do not work on the iPad calls for a solution.

In my early testing, I made changes in  /themename/mobile/index.php  and was not able to see them  on my iPad. I later found that the iPad was not included in the array that is used to identify browsers in expTheme.php  (fixed for 2.0.7) Once past this hurdle it was not too hard to provide specific code to replace the dropdown menus with a tabbed interface.

That same page has dropdown menus when viewed with a regular PC.

The code in the template for the above tabbed interface contains two embedded navigator modules, each in their own div.

<div id="nav">
<?php expTheme::module(array("module"=>"navigation","view"=>"Tab Nav","source"=>"@top")); ?>

<div id="top-sub-nav">    
<?php expTheme::module(array("module"=>"navigation","view"=>"children-only-top-nav","source"=>"@top")); ?>

Included in the CSS directory is a stylesheet for mobile devices.

iPad.css contains some CSS3 specific code which recognizes the iPad and displays css which will work on its 1024 pixel wide screen.

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
/* Navigation */
#top-sub-nav .navigationmodule.children-only-top-nav ul li a:link {
text-decoration:none; }

​The CSS above is just an example, obviously there is a whole lot more code needed to display the tabs but you get the idea. The CSS declarations are all wrapped in curly braces and the @media screen and max-device-width designations make this css specific to the iPad.

I have not done a lot of testing with other mobile devices (iPod Touch, iPhone or Droid) but for my purposes where my school sites are increasingly being visited by iPads, I think this will be a workable solution.

You can read a bit more about Mobile theming in this exponent docs site article.

Upgrading Templates from Smarty v2 to v3

When Exponent v2.0.2 was released at the end of October 2011 it incorporated a fairly major change under the hood that could 'break' some custom themes or mods.  The template engine (what is used to display everything) was upgraded from Smarty v2.5.x to v3.1.x.  This was a major upgrade, but the syntax basically remained the same...the issue is that 'bad' template code which worked under previous versions will likely break with this version.  However, Smarty v3 adds many enhancements including the ability to use inline computations/math.  Details on how to identify problems and fixes is at the end of this post.

The Smarty v3 template engine adds a parser/lexer feature to better handle inline code (javascript and php) and also better parses commands such as handling inline math, etc...  However, because the parsing has changed slightly, it tends to choke when running across 'bad syntax' conditions that used to work (slipped by) in earlier versions.  So, if you have any custom templates you are using, you may have to update/edit them to work. 

  • We'd recommend you first install v2.0.2 as a test installation on a server with php debug extensions loaded, and have DEVELOPMENT (Error Reporting) turned on (1).  This will point out which file and line number is causing any problems.
    • In most cases the error message will be somewhat descriptive of what needs changing e.g.,
      • Fatal error: Uncaught exception 'SmartyCompilerException' with message 'Syntax Error in template "C:xampphtdocsexp2frameworkmodulestextviewstextshowall.tpl" on line 49 "<a href="{link action=delete id=$text->id enabled=0}">{img src=`$smarty.const.ICON_RELATIVE`toggle_on.gif}</a>" - Unexpected "`"' in C:xampphtdocsexp2externalSmarty-3libssyspluginssmarty_internal_templatecompilerbase.php on line 617
      • This error tells you that the file '/framework/modules/text/view/text/showall.tpl' has a problem on line 49 which is an unexpected backtick
  • When updating/changing Smarty versions or plugins, you MUST ALWAYS clear the smarty cache
  • $smarty->_tpl_vars was deprecated without notice, so we MUST now use the getTemplateVars() method instead
  • Smarty v2 automatically disabled error reporting in templates, not so under v3 therefore there are TONS of warnings (missing indexes, etc...) with our plugins and templates.
    • A partial interim solution is that we've turned off error reporting after creating the Smarty object
    • In future versions we may turn error reporting back on to ensure we have clean plugin code which will expose a lot of warnings.
  • Smarty v3 allows expressions or variable references almost anywhere, and (apparently) isn't very tolerant of the backticks required to perform this in v2 (though this shouldn't be the case according to the documentation)...we use a lot of backticks for variables inside of plugin calls in templates.
    • In most cases you can simply remove the backticks in the 'offending' statement.
    • Look for any math statements in backticks such as rank=`$text->rank+1
      • Should be rank=$text->rank+1
    • This will NOT work in pre-2.0.2 since it handles math pretty poorly
  • Because of the better parsing, some of the formerly unescaped characters in template strings will break. The fix is to escape them by adding a backslash before.
  • You MUST enclose filenames containing symbols such as a period or dash, inside quotes now.
  • Look for any unquoted filenames in the {icon call with the img param
    • Search for '{icon' in the *.tpl files in your theme folder
    • {icon img=image.png ...}, should be {icon img='image.png' ...}
    • This will also work well in pre-2.0.2
  •  Concatenation of variables in strings can work by simply placing the text next to the closing brace {$variable}text, but you might best be served by using the 'cat' modifier such as $variable|cat:'text'
    • E.g., search for '{img' in the *.tpl files in your theme folder
    • Typically seen more in filenames such as {img src=`$smarty.const.ICON_RELATIVE`clean.png} or src={$smarty.const.ICON_RELATIVE}clean.png
    • Should be {img src=$smarty.const.ICON_RELATIVE|cat:'clean.png'
    • This will also work well in pre-2.0.2
    • In some server configurations, the $smarty.const.ICON_RELATIVE|cat:'clean.png' resolves literally to .const.ICON_RELATIVE|cat:'clean.png' instead of something like home/path/icons/clean.png.  Therefore it might be best to use the older backtick-delimted variation src='`$smarty.const.ICON_RELATIVE`clean.png'
  • Variables for arrays and objects in Smarty MUST be preceded with the dollar ($) sign. This should be obvious, but even Smarty v3.1.3 still allows basic variables to be referenced without the $.
    • Sometimes shows up as error '...Unexpected "[", expected one of: "}" , " "' in...'
  • And last, but not least...some of these required changes won't work under the older Smarty v2 (Exp v2.0.1 or older) so you'll have to wat least install a test using 2.0.2 to begin any updates.

(This article was originally a news post)