Sitemaps with ExpressionEngine ~ Create an index and organize entries by year or month

Sitemap Index with ExpressionEngine

Sites that are driven by new entries every week can quickly grow to have thousands of entries in a channel. In which case, having a single sitemap is very taxing on resources, and the end result is a sitemap that is slow to render.

SEO discussions are the politics of web design. Page load speed and resource usage on the other hand are something everyone can agree on. My goal is to show a sustainable solution that is considerate of resources and quick to render.

The example below creates a yearly archive of posts. It can be easily modified to create a monthly archive if necessary.

P.S: I formatted the code for readability and added comments to make it self explanatory

Sitemap Index Template

<?xml version="1.0" encoding="UTF-8">
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 
    http://www.sitemaps.org/schemas/sitemap/0.9/siteindex.xsd">

{!-- Use EEs channel:month_links tag to generate years or months of entries --}
{exp:channel:month_links channel="articles" limit="10000" status="not closed"}
{year_heading}
<sitemap>

{!-- Link to sitemap for specific year --}
<loc>{site_url}/sitemap/entries-{year}.xml</loc>

{!-- Get the date of the most recent entry --}
{exp:channel:entries channel="articles" dynamic="no" status="not closed" limit="1" orderby="edit_date" sort="desc" year="{year}" disable="member_data|pagination|categories|custom_fields|relationships"}

<lastmod>{edit_date format='%Y-%m-%dT%H:%i:%sZ'}</lastmod>
{/exp:channel:entries}
</sitemap>
{/year_heading}
{/exp:channel:month_links}
</sitemapindex>

Next step is to create a template group named sitemap and add a template named entries to it. Then your template will look something like this:

Sitemap Entries Template

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 
    xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 
    http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">

{!-- Use entries_year segment from template route to determine year --}
{exp:channel:entries channel="articles" status="not closed" dynamic="no" orderby="entry_date" sort="desc" disable="member_data|pagination|categories|custom_fields|relationships" limit="5000" year="{segment:entries_year}"}

<url>
{!-- Hardcoding URL is highly recommended and saves seconds when dealing with 1000s of entries --}
<loc>http://domain.com/news/{url_title}</loc>
<lastmod>{edit_date format="%Y-%m-%dT%H:%i:%sZ"}</lastmod>
<priority>1.0</priority>  
<changefreq>daily</changefreq>
</url>
{/exp:channel:entries}  
</urlset>

Template Route

The last step is to set the template route for /sitemap/entries to the following:

/sitemap/entries-{entries_year:alpha_numeric}.xml

Reference

  1. Sitemap Index (Google)
  2. Template Routes (ExpressionEngine)

Content, Design, Development and ExpressionEngine

We are now a design studio that solely focuses on ExpressionEngine for websites, and we truly believe is the best way to serve our current and future clients. There are countless reasons why EE has become our sole choice, but it boils down to it’s unmatched flexible and extensible platform.

The experience

Our focus from the beginning has been to focus on designs that are clean and lightweight. From there on, the user experience should match that same philosophy. These are the only two aspects that a client’s customer will see, how the website looks and the experience of interacting with it. All the customer cares about is the content and the experience of using the website.

The backend

If the client manages their own site, they will have one more layer of interaction, which is managing the website in the backend. This will directly dictate how the website will look and function over time. If you have a clean and easy to use backend that does not require the client to try to arrange a page’s content in an editor, the website will be updated and maintain the original’s design.

Design & Development

As a studio that does both design and development, finding ExpressionEngine has been a breath of fresh air over any other Content Management System we have used in the past. We can separate, design from the front end development (HTML, CSS, Javascript), as well as from the server-side development (custom add-ons, PHP). This allows us to bring our clients an extremely clean and easy to use backend, all while maintaining our work in separate layers that are clean, easy to update and maintain.

We are proud to support EllisLab for all their amazing work in making ExpressionEngine a stable, secure and modern platform to work with. We have also been invited to be one of the moderators of their new support forums and are extremely grateful for the opportunity to give back to the company and community that surrounds it.

Adaptive Images for Responsive Design with ExpressionEngine

Most of the websites I design have large images that fill out the width of the screen, but there’s no point in serving a 1920 pixels wide image to a phone with a 480 pixels wide resolution. In fact, if you run Google PageSpeed Insights on such a site, the mobile score can be 10 to 20 points lower due to such large images.

This example uses the following setup: ExpressionEngine, jQuery, bootstrap and breakpoint.js which comes with HiSRC. It uses bootstrap’s standard media queries, 480, 768, 992 and 1200 screen widths.

ExpressionEngine setup:

Create constraints for the File Directory you intend to use. Here’s how I did it:

Example image tag for your ExpressionEngine templates:

The last step is to add breakpoint.js to the site:

This setup will have ExpressionEngine automatically create the different size images upon upload. It can be used with the standard File & Grid fields as well as other instances such as the File Entries tag.

New site design for Pioneer Telephone

Just fresh off the press is a new responsive website design for Pioneer Telephone, a Maine based phone company with customers across the United States.