Challenge - 5 Problems
SEO Meta Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
What is the rendered tag content?
Given this Svelte component, what will be the content of the tag in the browser tab?
<svelte:head> <title>Welcome to Svelte SEO</title> </svelte:head> <h1>Hello World</h1>
Svelte
<svelte:head> <title>Welcome to Svelte SEO</title> </svelte:head> <h1>Hello World</h1>
Attempts:
2 left
💡 Hint
The <svelte:head> tag lets you set head elements like title.
✗ Incorrect
The <title> inside <svelte:head> sets the page title shown in the browser tab.
📝 Syntax
intermediate2:00remaining
Which option correctly adds a meta description tag in Svelte?
You want to add a meta description tag for SEO inside a Svelte component. Which code snippet is correct?
Attempts:
2 left
💡 Hint
Use <svelte:head> and correct meta attributes.
✗ Incorrect
Option C uses <svelte:head> and the correct meta tag with name="description" and content attribute.
❓ state_output
advanced2:00remaining
What is the final meta tag content after state update?
Consider this Svelte component that updates the meta description dynamically:
What will be the content attribute of the meta description tag after 2 seconds?
<script>
import { onMount } from 'svelte';
let desc = 'Initial description';
onMount(() => {
setTimeout(() => {
desc = 'Updated description';
}, 1000);
});
</script>
<svelte:head>
<meta name="description" content={desc} />
</svelte:head>
<h1>Check meta description</h1>What will be the content attribute of the meta description tag after 2 seconds?
Svelte
<script> import { onMount } from 'svelte'; let desc = 'Initial description'; onMount(() => { setTimeout(() => { desc = 'Updated description'; }, 1000); }); </script> <svelte:head> <meta name="description" content={desc} /> </svelte:head> <h1>Check meta description</h1>
Attempts:
2 left
💡 Hint
The meta tag content updates reactively when the variable changes.
✗ Incorrect
Svelte updates the meta tag content reactively when the variable 'desc' changes after 1 second.
🔧 Debug
advanced2:00remaining
Why does this meta tag not appear in the page head?
You wrote this Svelte code but the meta tag does not show in the browser head:
What is the reason?
<script>
let keywords = 'svelte, seo, meta';
</script>
<head>
<meta name="keywords" content={keywords} />
</head>What is the reason?
Svelte
<script> let keywords = 'svelte, seo, meta'; </script> <head> <meta name="keywords" content={keywords} /> </head>
Attempts:
2 left
💡 Hint
Svelte requires a special tag to modify the document head.
✗ Incorrect
In Svelte, the tag inside components is ignored. You must use to add head elements.
🧠 Conceptual
expert2:00remaining
Which meta tag improves SEO by controlling page indexing?
Which meta tag attribute and value combination tells search engines NOT to index the page?
Attempts:
2 left
💡 Hint
The 'robots' meta tag controls search engine indexing behavior.
✗ Incorrect
The meta tag with name="robots" and content="noindex" tells search engines not to index the page.