How to Customize Meta Tags for Route Pages?
Table of Contents
In the Zora Ghost theme, certain pages like the courses listing and archive page are generated from routes defined in routes.yaml. To customize the meta tags (title, description, etc.) for these pages, you need to create a corresponding page that overrides the default metadata.
What Are Route Pages?
Route pages are pages that are automatically generated by Ghost based on route configurations. In Zora, these include:
- Courses Page (
/courses/) - Lists all courses - Archive Page (
/archive/) - Shows all posts organized by date
These pages don’t have a traditional page in Ghost admin by default, which means their meta tags use default values.
Why Customize Meta Tags?
Customizing meta tags is important for:
- SEO: Better search engine rankings with descriptive titles and descriptions
- Social Sharing: Control how your pages appear when shared on social media
- User Experience: Clear, descriptive titles help users understand the page content
- Branding: Consistent messaging across your site
How to Customize Meta Tags
Method Overview
To customize meta tags for route pages, you create a regular Ghost page with the same URL slug. Ghost will then use that page’s title, excerpt, and metadata for the route page.
Customizing the Courses Page Meta Tags
The courses page appears at /courses/ and lists all posts tagged with #course.
Step 1: Create a New Page
- Go to Pages in Ghost Admin
- Click New page
- Set the page title (this will be used for the page title)
- Example: “All Courses - Learn with [Your Brand]”
Step 2: Add Page Content
You can leave the content empty or add a brief introduction. The main purpose is to provide metadata.
Step 3: Set the URL Slug
In Page Settings (right sidebar):
- Find the URL field
- Set the slug to:
courses - This will make the page URL
/courses/
Step 4: Add Meta Title
In Page Settings, find the SEO section:
- Add a custom meta title (optional - defaults to page title)
-
Example: “Browse All Courses [Your Brand] - Online Learning Platform”
-
- Keep it under 60 characters for optimal SEO
Step 5: Add Meta Description
In the SEO section:
- Add a meta description
- Example: “Explore our complete collection of online courses. Learn web development, design, marketing, and more with expert-led courses.”
- Keep it under 160 characters
- Include relevant keywords
Step 6: Add Featured Image (Optional)
In Page Settings:
- Upload a featured image
- This image will be used for:
- Open Graph tags (Facebook, LinkedIn)
- Twitter cards
- Search result previews
Step 7: Publish the Page
Click Publish. Now when visitors go to /courses/, they will see:
- Your custom page title in the browser tab
- Your meta description in search results
- Your featured image when shared on social media
- The actual courses list (from the route, not this page’s content)
Customizing the Archive Page Meta Tags
The archive page appears at /archive/ and shows all posts organized by date.
Step 1: Create a New Page
- Go to Pages in Ghost Admin
- Click New page
- Set the page title
- Example: “Blog Archive - All Posts”
Step 2: Set URL Slug
In Page Settings:
- Find the URL field
- Set the slug to:
archive
Step 3: Add Meta Title and Description
In the SEO section:
Meta Title:
-
Example: “Blog Archive [Your Brand] - All Posts by Date” - Keep under 60 characters
Meta Description:
- Example: “Browse our complete blog archive. Find all articles, tutorials, and guides organized by date. Stay updated with our latest content.”
- Keep under 160 characters
Step 4: Add Featured Image (Optional)
Upload a featured image for social sharing.
Step 5: Publish
Click Publish. The archive page at /archive/ will now use your custom metadata.
Example Configurations
Courses Page Example
Page Title: “All Courses - [Your Brand]”
| Meta Title: “Online Courses | [Your Brand] - Learn Web Development & Design” |
Meta Description: “Discover expert-led online courses in web development, UX design, digital marketing, and more. Start learning today with practical, project-based courses.”
Featured Image: Upload a course-related image (1200x630px recommended)
URL Slug: courses
Archive Page Example
Page Title: “Blog Archive”
| Meta Title: “Blog Archive | [Your Brand] - Articles & Tutorials” |
Meta Description: “Browse our complete collection of blog posts, tutorials, and guides. Find the latest insights on web development, design, and technology.”
Featured Image: Upload a blog-related image (1200x630px recommended)
URL Slug: archive
Important Notes
- Content Doesn’t Matter: The actual content of these pages doesn’t affect the route page display. The route page shows the courses/archive/ , not this page’s content.
- URL Slug Must Match: The URL slug must exactly match the route (e.g.,
courses,archive) - One Page Per Route: Create only one page per route for consistent metadata
- Page Visibility: These pages won’t appear in navigation or be indexed as separate pages - they’re just metadata overrides
- Updates: To change meta tags, simply edit the corresponding page and save
What Gets Overridden
When you create these override pages, the following is customized:
- Page Title - Appears in browser tab
- Meta Title - Used for SEO and social sharing
- Meta Description - Used for search results and social media
- Featured Image - Used for Open Graph and Twitter cards
- Excerpt - Can be used for descriptions
What Doesn’t Change:
- The actual page content (courses list, archive, etc.)
- The page layout
- The page template
- The route functionality
Best Practices
SEO Optimization
- Include Keywords: Add relevant keywords to titles and descriptions
- Brand Name: Include your brand name in meta titles
- Length Limits:
- Meta titles: Under 60 characters
- Meta descriptions: Under 160 characters
- Compelling Copy: Write descriptions that encourage clicks
Social Sharing
- Featured Images: Use high-quality images (1200x630px)
- Consistent Branding: Use brand colors and styles in images
- Engaging Descriptions: Make social media users want to click
Consistency
- Naming Convention: Use consistent naming across all pages
- Tone: Maintain your brand voice in all metadata
- Updates: Review and update metadata regularly
Testing Your Meta Tags
After creating your override pages:
- Test the Page: Visit the route page (e.g.,
/courses/) - Check Browser Tab: Verify the title appears correctly
- Test Social Sharing:
- Use Facebook’s Sharing Debugger
- Use Twitter Card Validator
- Test by sharing the URL
- Check Search Results: Search for your site to see how it appears
- Use SEO Tools: Use tools like Screaming Frog or Google’s Rich Results Test
Troubleshooting
Meta tags not updating?
- Ensure the URL slug exactly matches the route
- Check that the page is published (not draft)
- Clear browser cache and reload
- Wait a few minutes for Ghost to process changes
Featured image not showing?
- Verify image is uploaded and published with the page
- Check image format (JPG, PNG, WEBP supported)
- Ensure image size is appropriate (under 5MB)
- Test with social media validators
Page content showing instead of route content?
- This shouldn’t happen if configured correctly
- The route takes precedence for content display
- The override page only affects metadata
Multiple pages with same URL slug?
- Ghost will use the most recently published page
- Delete or unpublish duplicate pages
- Keep only one page per route
Removing Custom Meta Tags
To revert to default meta tags:
- Go to Pages
- Find the override page (e.g., the page with URL slug “courses”)
- Either:
- Delete the page entirely
- Or change the URL slug to something else
- Save
The route page will then use default meta tags again.
Summary
To customize meta tags for route-based pages:
- Create a new page in Ghost Admin
- Set the URL slug to match the route (
courses,archive) - Add custom title, meta title, and meta description
- Optionally add a featured image
- Publish the page
The route page will now use your custom metadata for SEO and social sharing, while still displaying the actual courses, archive. All customization is done through the Ghost admin with no coding required.