Sitemap generation in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Astro sitemap generation snippet?

Given this Astro sitemap generation code, what will be the content of the generated sitemap.xml?

Astro

import { Sitemap } from 'astro:sitemap';

export async function get() {
  return Sitemap({
    site: 'https://example.com',
    filter: (page) => !page.includes('draft'),
  });
}

// Pages: ['index.astro', 'about.astro', 'draft-post.astro']

A

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url><loc>https://example.com/draft-post</loc></url>
</urlset>

B

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url><loc>https://example.com/</loc></url>
  <url><loc>https://example.com/about</loc></url>
  <url><loc>https://example.com/draft-post</loc></url>
</urlset>

C

<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url><loc>https://example.com/</loc></url>
  <url><loc>https://example.com/about</loc></url>
</urlset>

D SyntaxError: Unexpected token in filter function

💡 Hint

Remember the filter excludes pages containing 'draft'.

The filter function removes any page with 'draft' in its name, so 'draft-post.astro' is excluded from the sitemap.

📝 Syntax

intermediate

Which option causes a syntax error in Astro sitemap generation?

Identify the code snippet that will cause a syntax error when generating a sitemap in Astro.

Astro

import { Sitemap } from 'astro:sitemap';

export async function get() {
  return Sitemap({
    site: 'https://mysite.com',
    exclude: ['private.astro'],
  });
}

A return Sitemap({ site: 'https://mysite.com', exclude: ['private.astro', 'temp.astro'] });

B return Sitemap({ site: 'https://mysite.com', exclude: ['private.astro'] });

C ;)} ]'ortsa.etavirp'[ :edulcxe ,'moc.etisym//:sptth' :etis {(pametiS nruter

D return Sitemap({ site: 'https://mysite.com', exclude: 'private.astro' });

💡 Hint

Check the type of the 'exclude' property value.

The 'exclude' property expects an array of strings, not a single string. Option D passes a string, causing a syntax or runtime error.

❓ state_output

advanced

What is the value of the sitemap URL count after running this Astro code?

Given this sitemap generation code and pages, how many URLs will the sitemap contain?

Astro

import { Sitemap } from 'astro:sitemap';

const pages = ['index.astro', 'blog/post1.astro', 'blog/post2.astro', 'secret.astro'];

export async function get() {
  return Sitemap({
    site: 'https://blogsite.com',
    filter: (page) => !page.includes('secret'),
  });
}

A 4

B 3

C 2

D 1

💡 Hint

Count pages excluding those with 'secret' in the name.

The filter removes 'secret.astro', so the sitemap includes 3 pages: 'index.astro', 'blog/post1.astro', and 'blog/post2.astro'.

🔧 Debug

advanced

Why does this Astro sitemap generation code fail to include nested pages?

This code generates a sitemap but misses nested pages like 'blog/post1.astro'. What is the likely cause?

Astro

import { Sitemap } from 'astro:sitemap';

export async function get() {
  return Sitemap({
    site: 'https://mysite.com',
    pages: ['index.astro', 'about.astro'],
  });
}

A The 'pages' option is missing nested pages; it must include all page paths explicitly.

B The code is missing an async keyword causing nested pages to be skipped.

C The Sitemap function does not support nested pages at all.

D The 'site' URL is incorrect and prevents nested pages from appearing.

💡 Hint

Check what pages are passed to the sitemap generator.

Only 'index.astro' and 'about.astro' are listed in 'pages', so nested pages like 'blog/post1.astro' are not included.

🧠 Conceptual

expert

Which option best describes how Astro's sitemap generation handles dynamic routes?

Astro supports dynamic routes like '/blog/[slug].astro'. How does the sitemap generation handle these routes by default?

A Astro excludes dynamic routes from the sitemap unless you provide a custom list of URLs.

B Astro generates a sitemap entry with a wildcard URL for dynamic routes like '/blog/*'.

C Astro automatically includes all possible dynamic route URLs in the sitemap by scanning data sources.

D Astro throws an error if dynamic routes are present during sitemap generation.

💡 Hint

Think about how dynamic routes need data to generate URLs.

Astro cannot guess all dynamic URLs automatically; you must supply them manually for the sitemap.

Practice

1. What is the main purpose of generating a sitemap in an Astro project?

easy

A. To speed up the website's loading time

B. To improve the website's visual design

C. To help search engines find and index all pages of the website

D. To add interactive animations to the site

Solution

1. Step 1: Understand sitemap purpose

   Sitemaps list all pages so search engines can find them easily.

2. Step 2: Match purpose to options

   Only To help search engines find and index all pages of the website describes helping search engines find pages.

3. Final Answer:

   To help search engines find and index all pages of the website -> Option C

4. Quick Check:

   Sitemap purpose = Help search engines [OK]

Hint: Sitemaps guide search engines to your pages [OK]

Common Mistakes:

• Confusing sitemap with design or speed improvements
• Thinking sitemap adds animations
• Assuming sitemap affects page loading

2. Which of the following is the correct way to import the Sitemap function in an Astro project?

easy

A. import { Sitemap } from 'astro/sitemap';

B. import Sitemap from 'astro/sitemap';

C. import { sitemap } from 'astro';

D. import * as Sitemap from 'astro/sitemap';

Solution

1. Step 1: Recall correct import syntax

   Astro exports Sitemap as a named export, so curly braces are needed.

2. Step 2: Match syntax to options

   import { Sitemap } from 'astro/sitemap'; uses named import with correct path and casing.

3. Final Answer:

   import { Sitemap } from 'astro/sitemap'; -> Option A

4. Quick Check:

   Named import with braces = import { Sitemap } from 'astro/sitemap'; [OK]

Hint: Use curly braces for named imports in Astro [OK]

Common Mistakes:

• Using default import syntax for named exports
• Incorrect module path or casing
• Importing with wrong variable name

3. Given this Astro sitemap configuration snippet:

export const get = () => {
  return Sitemap({
    filter: (page) => !page.includes('/drafts/'),
    changefreq: 'weekly'
  });
};

What will be the effect of the filter function?

medium

A. Exclude pages that have '/drafts/' in their path

B. Include all pages regardless of path

C. Include only pages that have '/drafts/' in their path

D. Cause a syntax error due to incorrect filter usage

Solution

1. Step 1: Understand the filter function logic

   The filter returns true only if the page path does NOT include '/drafts/'.

2. Step 2: Determine which pages are included

   Pages with '/drafts/' are excluded because filter returns false for them.

3. Final Answer:

   Exclude pages that have '/drafts/' in their path -> Option A

4. Quick Check:

   Filter excludes '/drafts/' pages = Exclude pages that have '/drafts/' in their path [OK]

Hint: Filter returns true to keep pages, false to exclude [OK]

Common Mistakes:

• Thinking filter includes '/drafts/' pages
• Confusing filter logic with map or reduce
• Assuming syntax error without checking code

4. Identify the error in this Astro sitemap generation code:

export const get = () => {
  return Sitemap({
    changefreq: 'daily',
    filter: page => page.startsWith('/blog')
  });
};

medium

A. Missing async keyword in get function

B. Sitemap function requires an array, not an object

C. Filter function should return a boolean but returns undefined

D. No error; code is correct

Solution

1. Step 1: Check get function signature

   Astro allows get to be sync or async; sync is valid here.

2. Step 2: Verify Sitemap usage

   Sitemap accepts an object with changefreq and filter keys as shown.

3. Step 3: Confirm filter function returns boolean

   page.startsWith('/blog') returns true or false, so filter is valid.

4. Final Answer:

   No error; code is correct -> Option D

5. Quick Check:

   Code syntax and logic are correct = No error; code is correct [OK]

Hint: Check return types and function signatures carefully [OK]

Common Mistakes:

• Assuming async is always required for get
• Thinking Sitemap needs an array argument
• Misunderstanding filter return value

5. You want to generate a sitemap in Astro that excludes pages with empty paths or falsy values and sets changefreq to 'monthly'. Which code snippet correctly achieves this?

hard

A. export const get = () => Sitemap({ filter: page => page, changefreq: 'monthly' });

B. export const get = () => Sitemap({ filter: page => !!page, changefreq: 'monthly' });

C. export const get = () => Sitemap({ filter: page => page === '', changefreq: 'monthly' });

D. export const get = () => Sitemap({ filter: page => page.length > 0, changefreq: 'monthly' });

Solution

1. Step 1: Understand filtering falsy values

   Using !!page converts page to boolean, excluding falsy values like empty strings.

2. Step 2: Check other options

   export const get = () => Sitemap({ filter: page => page, changefreq: 'monthly' }); returns page directly, which may include falsy values; export const get = () => Sitemap({ filter: page => page.length > 0, changefreq: 'monthly' }); assumes page has length property which may cause errors if undefined; export const get = () => Sitemap({ filter: page => page === '', changefreq: 'monthly' }); includes only empty strings, which is opposite of desired filtering; export const get = () => Sitemap({ filter: page => !!page, changefreq: 'monthly' }); correctly filters out falsy values.

3. Final Answer:

   export const get = () => Sitemap({ filter: page => !!page, changefreq: 'monthly' }); -> Option B

4. Quick Check:

   Double negation filters falsy values = export const get = () => Sitemap({ filter: page => !!page, changefreq: 'monthly' }); [OK]

Hint: Use !! to convert values to true/false for filtering [OK]

Common Mistakes:

• Using filter that includes empty strings
• Not converting to boolean before filtering
• Assuming page.length works if page can be undefined