Sitemap Generation
The Blocklet SDK includes a powerful middleware for dynamically generating sitemap XML files. This is essential for search engine optimization (SEO), allowing search engines to efficiently crawl and index the content of your Blocklet application. This middleware integrates seamlessly with Express.js.
For an overview of all available Express.js middleware, refer to the Middleware Reference section.
How it Works#
The sitemap
middleware takes a generator function as an argument. This function is responsible for defining the URLs and associated metadata that should be included in your sitemap. The middleware then handles the XML formatting and sends the sitemap as a response.
Here's a sequence diagram illustrating the flow:
Usage#
To use the sitemap middleware, you need to import it and register it with your Express application. You must provide a generatorFn
that will populate the sitemap.
Parameters
Name | Type | Description |
---|---|---|
|
| An asynchronous function that receives a |
Returns
Name | Type | Description |
---|---|---|
|
| An Express.js middleware function that can be used with |
SitemapItem Structure#
The SitemapItem
type defines the structure for each entry in your sitemap. It includes the URL and optional fields for images, videos, alternate language links, Android app links, and news-specific metadata.
Field | Type | Description |
---|---|---|
|
| The URL of the page. This is the only required field. |
|
| Optional. An array of image details associated with the URL. |
|
| Optional. An array of video details associated with the URL. |
|
| Optional. An array of alternate language links for the URL. |
|
| Optional. An Android app link for the URL. |
|
| Optional. News-specific metadata for the URL. |
Nested Types
Image
Field | Type | Description |
---|---|---|
|
| The URL of the image. |
|
| A caption for the image. |
|
| The title of the image. |
|
| Geographic location of the image. |
|
| URL to the license of the image. |
Video
Field | Type | Description |
---|---|---|
|
| The URL of the video thumbnail. |
|
| The title of the video. |
|
| A description of the video. |
|
| Optional. The URL of the video player. |
|
| Optional. Autoplay setting for the player. |
|
| Optional. Embed allowance setting for the player. |
Link
Field | Type | Description |
---|---|---|
|
| The language code (e.g., 'en', 'es'). |
|
| The URL in the specified language. |
News
Field | Type | Description |
---|---|---|
|
| Details about the news publication. |
|
| A comma-separated list of genres. |
|
| The publication date in W3C format. |
|
| The title of the news article. |
|
| A comma-separated list of keywords. |
|
| A comma-separated list of stock tickers. |
Publication
(nested within News
)
Field | Type | Description |
---|---|---|
|
| The name of the publication. |
|
| The language of the publication (e.g., 'en', 'es'). |
Example#
This example demonstrates how to create a sitemap that includes a homepage and an about page. The generatorFn
dynamically adds these pages to the sitemap.
import { sitemap } from '@blocklet/sdk/middlewares';
// Assuming 'app' is your Express application instance
// For demonstration, we'll use a placeholder for app.get()
async function mySitemapGenerator(write, req) {
// You can fetch dynamic content here if needed
// const articles = await fetchArticlesFromDatabase();
write({
url: '/',
img: [
{
url: 'https://your-app.blocklet.app/images/home-hero.jpg',
caption: 'Homepage hero image',
title: 'Welcome to Our App',
geoLocation: 'Global',
license: 'https://creativecommons.org/licenses/by/4.0/'
}
],
});
write({
url: '/about',
links: [
{ lang: 'es', url: 'https://your-app.blocklet.app/es/about' },
{ lang: 'fr', url: 'https://your-app.blocklet.app/fr/about' }
]
});
// Example for a news item
write({
url: '/news/latest-update',
news: {
publication: {
name: 'Blocklet News',
language: 'en',
},
genres: 'blog, press',
publication_date: '2023-10-27T10:00:00+00:00',
title: 'Exciting New Features Released',
keywords: 'Blocklet, SDK, update',
stock_tickers: 'ABT'
}
});
// Example for a video page
write({
url: '/videos/tutorial',
video: [
{
thumbnail_loc: 'https://your-app.blocklet.app/thumbnails/tutorial.jpg',
title: 'Blocklet SDK Tutorial',
description: 'A comprehensive guide to using the Blocklet SDK.',
player_loc: 'https://www.youtube.com/embed/your_video_id'
}
]
});
}
// Register the sitemap middleware
// app.get('/sitemap.xml', sitemap(mySitemapGenerator));
// For a real Express app, you would do:
// import express from 'express';
// const app = express();
// app.get('/sitemap.xml', sitemap(mySitemapGenerator));
// app.listen(3000, () => console.log('Server running on port 3000'));
Example Response (Simplified XML Output)
<?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:xhtml="http://www.w3.org/1999/xhtml"
xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
<url>
<loc>https://your-app.blocklet.app/</loc>
<image:image>
<image:loc>https://your-app.blocklet.app/images/home-hero.jpg</image:loc>
<image:caption>Homepage hero image</image:caption>
<image:title>Welcome to Our App</image:title>
<image:geo_location>Global</image:geo_location>
<image:license>https://creativecommons.org/licenses/by/4.0/</image:license>
</image:image>
</url>
<url>
<loc>https://your-app.blocklet.app/about</loc>
<xhtml:link rel="alternate" hreflang="es" href="https://your-app.blocklet.app/es/about"/>
<xhtml:link rel="alternate" hreflang="fr" href="https://your-app.blocklet.app/fr/about"/>
</url>
<url>
<loc>https://your-app.blocklet.app/news/latest-update</loc>
<news:news>
<news:publication>
<news:name>Blocklet News</news:name>
<news:language>en</news:language>
</news:publication>
<news:genres>blog, press</news:genres>
<news:publication_date>2023-10-27T10:00:00+00:00</news:publication_date>
<news:title>Exciting New Features Released</news:title>
<news:keywords>Blocklet, SDK, update</news:keywords>
<news:stock_tickers>ABT</news:stock_tickers>
</news:news>
</url>
<url>
<loc>https://your-app.blocklet.app/videos/tutorial</loc>
<video:video>
<video:thumbnail_loc>https://your-app.blocklet.app/thumbnails/tutorial.jpg</video:thumbnail_loc>
<video:title>Blocklet SDK Tutorial</video:title>
<video:description>A comprehensive guide to using the Blocklet SDK.</video:description>
<video:player_loc>https://www.youtube.com/embed/your_video_id</video:player_loc>
</video:video>
</url>
</urlset>
This middleware streamlines the process of providing up-to-date sitemaps for search engines, improving the discoverability of your Blocklet application's content.
Continue exploring other middleware functionalities in the Authentication section.