Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する
Middleware Reference

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:

Generator FunctionSitemap MiddlewareBlocklet ServerUser Agent/Search EngineGenerator FunctionSitemap MiddlewareBlocklet ServerUser Agent/Search Engineloop[For each URL to include]HTTP GET Request (e.g., /sitemap.xml)Route Request to Sitemap MiddlewareCall Generator Function (writeFn, req)Prepare SitemapItemwrite(sitemapItem)Indicate CompletionGenerate XML from Sitemap ItemsSend XML ResponseHTTP 200 OK (application/xml)

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

generatorFn

(write: (item: SitemapItem) => void, req?: Request) => Promise<void>

An asynchronous function that receives a write function and the Express Request object. Use write(item) to add each SitemapItem to the sitemap.

Returns

Name

Type

Description

middleware

(req: Request, res: Response) => Promise<void>

An Express.js middleware function that can be used with app.get().

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

url

string

The URL of the page. This is the only required field.

img

Image[]

Optional. An array of image details associated with the URL.

video

Video[]

Optional. An array of video details associated with the URL.

links

Link[]

Optional. An array of alternate language links for the URL.

androidLink

string

Optional. An Android app link for the URL.

news

News

Optional. News-specific metadata for the URL.

Nested Types

Image

Field

Type

Description

url

string

The URL of the image.

caption

string

A caption for the image.

title

string

The title of the image.

geoLocation

string

Geographic location of the image.

license

string

URL to the license of the image.

Video

Field

Type

Description

thumbnail_loc

string

The URL of the video thumbnail.

title

string

The title of the video.

description

string

A description of the video.

player_loc

string

Optional. The URL of the video player.

'player_loc:autoplay'

string

Optional. Autoplay setting for the player.

'player_loc:allow_embed'

string

Optional. Embed allowance setting for the player.

Link

Field

Type

Description

lang

string

The language code (e.g., 'en', 'es').

url

string

The URL in the specified language.

News

Field

Type

Description

publication

Publication

Details about the news publication.

genres

string

A comma-separated list of genres.

publication_date

string

The publication date in W3C format.

title

string

The title of the news article.

keywords

string

A comma-separated list of keywords.

stock_tickers

string

A comma-separated list of stock tickers.

Publication (nested within News)

Field

Type

Description

name

string

The name of the publication.

language

string

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.