Sitemaps

Sitemaps are a fundamental component of most websites and essential if your site needs to be indexed by a search engine. Creating a sitemap that is automatically updated whenever your content is updated is easy with TakeShape.

This recipe references the Shape Books Sample Project that comes preloaded into every TakeShape account. The sitemap points to every page on the sample site. Setting up a sitemap on your own site requires three steps

1. Create a GraphQL query file

Your query file should return all of the pages you want to appear in your sitemap. For the sample project that should be:

  • Homepage
  • All blog posts
  • All book pages
  • All author pages
query {
    homepage: getHomepage {
        _updatedAt
    }

    posts: getPostList {
        total
        items {
            title
            _updatedAt
        }
    }

    books: getBookList {
        total
        items {
            title
            _updatedAt
        }
    }

    authors: getAuthorList {
        total
        items {
            name
            _updatedAt
        }
    }
}

2. Create the sitemap template file

The sitemap format requires only 3 fields <urlset>, <url> and <loc>. You should also usually include the <lastmod> field. For the sample project we're keeping things simple and only using those 4 fields, however you can read the [sitemap spec](https://www.sitemaps.org/protocol.html) and add more complexity to your sitemap. 

<?xml version="1.0" encoding="utf-8"?>
<urlset 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/sitemap.xsd">
    <url>
        <loc>http://www.takeshapesampleproject.com{{ homepage|route('homepage') }}</loc>
        <lastmod>{{ homepage._updatedAt }}</lastmod>
    </url>

    {% for post in posts.items %}
        <url>
            <loc>http://www.takeshapesampleproject.com{{ post|route('posts') }}</loc>
            <lastmod>{{ post._updatedAt }}</lastmod>
        </url>
    {% endfor %}

    {% for book in books.items %}
        <url>
            <loc>http://www.takeshapesampleproject.com{{ book|route('books') }}</loc>
            <lastmod>{{ book._updatedAt }}</lastmod>
        </url>
    {% endfor %}

    {% for author in authors.items %}
        <url>
            <loc>http://www.takeshapesampleproject.com{{ author|route('authors') }}</loc>
            <lastmod>{{ author._updatedAt }}</lastmod>
        </url>
    {% endfor %}
</urlset>

3. Setup a new route

sitemap:
    path: /sitemap.xml
    template: feeds/sitemap.xml
    context: data/sitemap.graphql

Robots.txt

If your site has a robots.txt file you might also want to reference the sitemap from there.

User-agent: *
Sitemap: http://www.takeshapesampleproject.com/sitemap.xml


Lastly deploy your updated site to the desired deploy target and confirm that everything is working correctly.

Join us

Interested in joining the team as coworker or investor?

contact@takeshape.com