SEO and performance determine whether your Wagtail site reaches its audience. A 1-second delay drops conversions by 7%, and pages without meta descriptions are invisible to search engines. In this lesson, you'll add Open Graph meta tags, generate XML sitemaps, configure Redis caching for sub-50ms responses, optimize images with WebP and lazy loading, and apply production tuning that pushes your Lighthouse score from 50 to 95+.
1. Learning Objectives
By the end of this lesson, you will be able to:
2. Why This Matters (Real-World Scenario)
You've just launched your Wagtail-powered blog to thousands of daily readers. Pages load slowly — 4 seconds on average — and your Google Lighthouse score hovers at 52. Your beautifully crafted content never appears in search results because you haven't configured meta descriptions or sitemaps. A competitor's site loads in under a second, ranks higher for every keyword, and gets all the traffic.
In the real world, SEO and performance are not optional add-ons — they determine whether your site reaches its audience. Google's ranking algorithm heavily weights Core Web Vitals (LCP, FID, CLS), and a 1-second delay in page load can reduce conversions by 7%. Wagtail gives you the tools to excel at both, but you need to know where to find them and how to wire them together. By the end of this lesson, you'll turn a sluggish, invisible site into a blazing-fast, search-engine magnet.
3. Core Concepts
SEO (Search Engine Optimization): The practice of improving your site's visibility in search engine results. This includes technical SEO (meta tags, sitemaps, structured data), on-page SEO (content quality, keyword usage), and off-page SEO (backlinks, social signals). Wagtail handles on-page SEO through its Promote tab and StreamField content model.
Meta Tags: HTML tags in the <head> that provide metadata to search engines and social platforms. Key tags include <title>, <meta name="description">, Open Graph (og:title, og:image), and Twitter Cards (twitter:card, twitter:image). Wagtail stores these per-page via the Promote tab.
XML Sitemap: A file listing all public URLs on your site, their last modified dates, change frequency, and priority. Wagtail can generate this automatically using wagtail.contrib.sitemaps. Sitemaps tell search engines which pages exist and when they were last updated, ensuring new content is crawled promptly.
Wagtail Cache: Wagtail has a built-in caching framework that caches page renditions, image renditions, and querysets. Combined with a backend like Redis (in-memory data store), caching can reduce database queries by 90%+ and drop page load times from seconds to milliseconds.
Template Fragment Caching: Django's {% cache %} template tag lets you cache specific parts of a template (sidebar, navigation, footer) for a set duration. Even when the main page content changes, the cached fragments serve instantly.
Wagtail Image Engine: Wagtail's wagtailimages renders images on-the-fly in any size, format, or filter. It supports WebP (smaller files, same quality), focal-point cropping (never lose the subject), and responsive <picture> elements via the {% picture %} tag (Renditions).
Core Web Vitals: Google's three performance metrics: Largest Contentful Paint (LCP — loading speed, should be under 2.5s), First Input Delay (FID — interactivity, under 100ms), and Cumulative Layout Shift (CLS — visual stability, under 0.1). Every Wagtail optimization in this lesson directly improves one or more of these metrics.
4. Hands-On Practice: SEO & Performance Optimization
We'll build step by step, starting with the SEO foundation (meta tags, sitemaps) and then layering on performance optimizations (caching, images, production tuning). Each step is immediately testable with curl or the browser's DevTools.
Step 1: Add SEO Meta Tags with Wagtail's Promote Tab
Wagtail includes a built-in Promote tab on every page model. It provides fields for seo_title, search_description, slug, and show_in_menus — no plugin required. Start by using these in your base template:
{% block extra_head %}\\n {# Page title & description #}\\n <title>{% block title %}{{ page.seo_title|default:page.title }}{% endblock %} | My Site</title>\\n <meta name="description" content="{% firstof page.search_description page.caption %}">\\n \\n {# Open Graph #}\\n <meta property="og:title" content="{{ page.title }}">\\n <meta property="og:description" content="{{ page.search_description }}">\\n <meta property="og:type" content="article">\\n <meta property="og:url" content="{{ page.full_url }}">\\n {% image page.hero_image fill-1200x630 as og_image %}\\n <meta property="og:image" content="{{ og_image.url }}">\\n \\n {# Twitter Cards #}\\n <meta name="twitter:card" content="summary_large_image">\\n <meta name="twitter:title" content="{{ page.title }}">\\n <meta name="twitter:description" content="{{ page.search_description }}">\\n{% endblock %}Add this to your base template's <head> section. Wagtail stores seo_title and search_description per-page through the Promote tab. When editing any page in Wagtail admin, click the Promote tab to fill them in.
$ curl -s https://yoursite.com/ | grep -E '<title>|<meta name="description"'\n<title>Wagtail SEO Guide | My Site</title>\n<meta name="description" content="A comprehensive guide to SEO...">
Step 2: Enable Wagtail SEO Settings
Configure the global site name and ensure the Promote tab fields are fully utilized:
# settings/base.py\\n\\nWAGTAIL_SITE_NAME = 'My Awesome Site'\\n\\n# Wagtail SEO panel configures per-page fields:\\n# - seo_title: Override for <title> tag\\n# - search_description: Meta description\\n# - promote [tab]: Slug, show_in_menus, search_promote\\n# These are built-in — no plugins needed.In your page models, ensure search_description is exposed in the Promote panel. For custom pages, add the Promote panel explicitly:
# blog/models.py\\nfrom wagtail.admin.panels import FieldPanel, MultiFieldPanel, PromotePanel\\n\\nclass BlogPostPage(Page):\\n body = StreamField(StreamBlock()) \\n caption = models.CharField(max_length=255, blank=True)\\n \\n content_panels = Page.content_panels + [\\n FieldPanel('body'),\\n FieldPanel('caption'),\\n ]\\n promote_panels = Page.promote_panels + [\\n # Use PromotePanel to place it in the Promote tab\\n FieldPanel('caption'),\\n ]Step 3: Generate an XML Sitemap
Wagtail's wagtail.contrib.sitemaps generates a standards-compliant sitemap. First add it to INSTALLED_APPS:
INSTALLED_APPS = [\\n ...\\n 'wagtail.contrib.sitemaps',\\n]\n\nWAGTAIL_SITEMAPS_DEFAULT_PRIORITY = 0.5Then add the sitemap URL to your root urls.py:
from django.urls import path\\nfrom wagtail.contrib.sitemaps.views import sitemap\\n\\nurlpatterns = [\\n ...\\n path('sitemap.xml', sitemap),\\n]For custom page types, create a dedicated sitemap class to control per-content-type priority and changefreq:
# home/models.py\\nfrom wagtail.contrib.sitemaps import Sitemap\\n\\nclass BlogSitemap(Sitemap):\\n def get_wagtail_site(self):\\n return Site.find_for_request(self.request)\\n\\n def items(self):\\n return BlogPostPage.objects.live().public()Test it with curl:
$ curl -s https://yoursite.com/sitemap.xml | head -30\n<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n <url>\n <loc>https://yoursite.com/</loc>\n <lastmod>2026-07-07</lastmod>\n <changefreq>weekly</changefreq>\n <priority>1.0</priority>\n </url>\n ...
Step 4: Configure Redis Caching
Caching is the single biggest performance win for any Wagtail site. Install and configure Redis as your cache backend:
# Install Redis server\nsudo apt install redis-server\n\n# Install Python bindings\npip install redis django-redis# settings/base.py\\nCACHES = {\\n 'default': {\\n 'BACKEND': 'django.core.cache.backends.redis.RedisCache',\\n 'LOCATION': 'redis://127.0.0.1:6379/1',\\n }\\n}\\n\\nWAGTAIL_CACHE = True\\nWAGTAIL_CACHE_BACKEND = 'default'With WAGTAIL_CACHE = True, Wagtail caches page renditions, image renditions, and site-level querysets. The first request after a cache miss populates Redis; every subsequent request serves from memory — typically dropping response times from 200ms to 5ms.
Step 5: Template Fragment Caching
For dynamic-but-expensive template regions (navigation menus, category lists, recent posts), use Django's {% cache %} tag:
{% load wagtailcore_tags cache %} \\n{% cache 600 'sidebar' request.site.root_page %}\\n {% for page in sidebar_pages %}\\n <li><a href="{% pageurl page %}">{{ page.title }}</a></li>\\n {% endfor %}\\n{% endcache %}The first argument is the timeout in seconds (600 = 10 minutes). The second is a unique cache key — use request.site.root_page or a similar context variable to invalidate the fragment when the underlying data changes. For time-sensitive content (e.g., recent posts list), choose a shorter TTL like 60 seconds.
Step 6: Image Optimization with Wagtail
Wagtail's image system is one of its strongest features. Every image uploaded can be rendered on-the-fly in any dimension, with automatic WebP conversion and focal-point-aware cropping:
{% load wagtailimages_tags %}\\n\\n{# Responsive image with WebP support #}\\n{% image page.hero_image fill-1200x630 as hero_img %}\\n<picture>\\n <source srcset="{{ hero_img.url }}" type="image/webp">\\n <img src="{{ hero_img.url }}" alt="{{ page.hero_image.title }}"\\n width="{{ hero_img.width }}" height="{{ hero_img.height }}"\\n loading="lazy">\\n</picture>Key filters used here:
To enable WebP globally, configure:
# settings/base.py\nWAGTAILIMAGES_FORMAT_CONVERTERS = {\n 'jpeg': 'webp',\n 'png': 'webp',\n}Step 7: Production Performance Tuning
Before deploying to production, apply these performance optimizations:
# settings/production.py\\n\\nCOMPRESS_ENABLED = True\\nCOMPRESS_OFFLINE = True\\n\\n# Whitenoise for static files\\nSTATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'\\nMIDDLEWARE = [\\n 'django.middleware.security.SecurityMiddleware',\\n 'whitenoise.middleware.WhiteNoiseMiddleware',\\n ...\\n]Additional production best practices:
Expected performance improvement: Applying all steps above typically moves a Wagtail site from 50-60 Lighthouse score to 90-98, cuts Time to First Byte (TTFB) from 400ms to under 50ms, and reduces page weight from 2MB+ to under 500KB.
5. Common Errors & Solutions
6. Summary Checklist
7. Practice Exercise
Challenge: Optimize a Wagtail Blog for SEO and Speed
Take a Wagtail blog with at least 5 pages and apply the full optimization pipeline:
Bonus challenge: Add JSON-LD structured data (Schema.org Article markup) to your page template. Test with Google's Rich Results Test tool.
8. Next Steps
You've now transformed your Wagtail site from SEO-blind and sluggish into a search-engine-optimized, blazing-fast content machine. Meta tags tell search engines what your content is about. Sitemaps ensure every page is discovered. Redis caching makes repeat visits nearly instantaneous. And WebP images keep bandwidth low without sacrificing quality.
Coming up in Lesson 5: Wagtail Custom Blocks & Advanced StreamField — We'll dive into building reusable content components with custom StreamField blocks, including nested blocks, block-level templates, and third-party block libraries.
Key resources for further learning:
Common pitfalls to avoid:
Comments (0)
This is exactly what I needed! The initContainer approach solved our migration issues completely. Thanks for the detailed guide!
ReplyLeave a Comment