How to Configure Page Headers
By olayway
Learn how to customize your page headers in Flowershow Cloud with frontmatter configuration options for titles, descriptions, authors, dates, and featured images.
If you're using Flowershow Cloud to build your website, one of the first things you'll want to customize is how your pages look. The page header is particularly important as it's the first thing visitors see and plays a crucial role in SEO and social sharing. Let's dive into how you can configure your page headers to look exactly the way you want.
Essential Configuration Options
Title
The title is perhaps the most important element of your page header. You have 3 ways to set it:
- Using the
title
frontmatter field - Using the top-level markdown heading (
# Page Title
) - Not setting any of the above and allowing Flowershow to use file name as the title.
Your title doesn't just appear in the page header - it's also used in:
- Search results
- Social media previews
- Sidebar navigation
- Browser tabs
Example:
title: Chasing Auroras in Norway
Alternatively you could use the top level heading:
# Chasing Auroras in Norway
Or just name your file Chasing Auroras in Norway.md
.
Description
A good description helps visitors understand what your page is about and improves SEO. It appears in your page header and is also used for search engine results and social media previews. You can set it using description
frontmatter field.
Example:
description: "Join me on a mesmerizing journey beneath the Arctic skies, where nature's most enchanting spectacle dances."
Authors
Whether you're running a solo blog or managing a team publication, you can easily attribute content to its creators by setting authors
frontmatter field.
Example:
authors: ["Jane Doe"]
Publication date
Adding publication dates helps visitors understand when content was created. You can configure it with date
frontmatter field.
Example:
date: 2024-04-17 # Use YYYY-MM-DD format
Featured Image
Featured images make your content more engaging and improve social sharing. You can set them with image
frontmatter field.
You have several options for adding them:
- Repository Images:
image: content/assets/my-image.jpg # relative path
image: /content/assets/my-image.jpg # absolute path
- External Images:
image: https://example.com/my-image.jpg
Best Practices for Header Configuration
To get the most out of your page headers:
-
Write Descriptive Titles
- Make them clear and specific
- Include relevant keywords
- Keep them under 60 characters for optimal SEO
-
Craft Compelling Descriptions
- Summarize your content clearly
- Include key information
- Aim for 150-160 characters
-
Optimize Featured Images
- Use 1200x630 pixels for optimal social sharing
- Keep file sizes under 1MB
- Choose visually appealing images that represent your content
-
Maintain Consistency
- Use consistent date formats (YYYY-MM-DD)
- Standardize author names across posts
- Follow a consistent image naming convention
By following these guidelines and utilizing all available configuration options, you can create professional-looking pages that are both user-friendly and optimized for search engines and social sharing.