Bird
Raised Fist0
Svelteframework~20 mins

SEO and meta tags in Svelte - Practice Problems & Coding Challenges

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Challenge - 5 Problems
🎖️
SEO Meta Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate
2:00remaining
What is the rendered tag content?</div><div>Given this Svelte component, what will be the content of the <title> tag in the browser tab?<br><br><pre><svelte:head> <title>Welcome to Svelte SEO</title> </svelte:head> <h1>Hello World</h1></pre></div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">Svelte</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><svelte:head> <title>Welcome to Svelte SEO</title> </svelte:head> <h1>Hello World</h1></pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The browser tab shows "Welcome to Svelte SEO"</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The browser tab shows "Hello World"</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">The browser tab is blank</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">The browser tab shows the default page title</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">The <svelte:head> tag lets you set head elements like title.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The <title> inside <svelte:head> sets the page title shown in the browser tab.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge syntax">📝<!-- --> <!-- -->Syntax</span></div><span class="task-difficulty intermediate">intermediate</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Which option correctly adds a meta description tag in Svelte?</div><div>You want to add a meta description tag for SEO inside a Svelte component. Which code snippet is correct?</div></div><div class="mt-3 d-none"></div><div class="task-options"><div class="task-option task-option-code "><span class="task-option-key">A</span><pre class="option-code">&lt;head&gt; &lt;meta description="This is a Svelte app" /&gt; &lt;/head&gt;</pre></div><div class="task-option task-option-code "><span class="task-option-key">B</span><pre class="option-code">&lt;svelte:head&gt; &lt;meta content="This is a Svelte app" name="description" /&gt; &lt;/svelte:head&gt;</pre></div><div class="task-option task-option-code "><span class="task-option-key">C</span><pre class="option-code">&lt;svelte:head&gt; &lt;meta name="description" content="This is a Svelte app" /&gt; &lt;/svelte:head&gt;</pre></div><div class="task-option task-option-code "><span class="task-option-key">D</span><pre class="option-code">&lt;svelte:head&gt; &lt;meta name="desc" content="This is a Svelte app" /&gt; &lt;/svelte:head&gt;</pre></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Use <svelte:head> and correct meta attributes.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Option C uses <svelte:head> and the correct meta tag with name="description" and content attribute.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge state_output">❓<!-- --> <!-- -->state_output</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">What is the final meta tag content after state update?</div><div>Consider this Svelte component that updates the meta description dynamically:<br><br><pre><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></pre><br>What will be the content attribute of the meta description tag after 2 seconds?</div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">Svelte</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><script> <span class="hl-kw">import</span> { onMount } <span class="hl-kw">from</span> <span class="hl-str">'svelte'</span>; <span class="hl-kw">let</span> desc = <span class="hl-str">'Initial description'</span>; onMount(() => { <span class="hl-fn">setTimeout</span>(() => { desc = <span class="hl-str">'Updated description'</span>; }, <span class="hl-num">1000</span>); }); </script> <svelte:head> <meta name=<span class="hl-str">"description"</span> content={desc} /> </svelte:head> <h1>Check meta description</h1></pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The meta description content is "Initial description"</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The meta description content is "Updated description"</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">The meta description tag is removed</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">The meta description content is empty</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">The meta tag content updates reactively when the variable changes.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Svelte updates the meta tag content reactively when the variable 'desc' changes after 1 second.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge debug">🔧<!-- --> <!-- -->Debug</span></div><span class="task-difficulty advanced">advanced</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Why does this meta tag not appear in the page head?</div><div>You wrote this Svelte code but the meta tag does not show in the browser head:<br><br><pre><script> let keywords = 'svelte, seo, meta'; </script> <head> <meta name="keywords" content={keywords} /> </head></pre><br>What is the reason?</div></div><div class="mt-3 "><div class="code-block"><div class="code-header"><span class="code-title">Svelte</span><button class="code-copy-btn"><span class="new-material-symbols icon-hw-16"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M326.93-211.18q-30.99 0-53.37-22.38t-22.38-53.37v-528.56q0-31.06 22.38-53.48 22.38-22.43 53.37-22.43h408.56q31.06 0 53.48 22.43 22.43 22.42 22.43 53.48v528.56q0 30.99-22.43 53.37-22.42 22.38-53.48 22.38H326.93Zm0-75.75h408.56v-528.56H326.93v528.56ZM184.51-68.6q-31.06 0-53.48-22.43-22.43-22.42-22.43-53.48v-566.43q0-16 10.97-26.94 10.98-10.94 27.1-10.94 16.13 0 26.99 10.94 10.85 10.94 10.85 26.94v566.43h446.43q16 0 26.94 10.97 10.94 10.97 10.94 27.1 0 16.13-10.94 26.98-10.94 10.86-26.94 10.86H184.51Zm142.42-218.33v-528.56 528.56Z"></path></svg></span></button></div><pre class="code-content"><script> <span class="hl-kw">let</span> keywords = <span class="hl-str">'svelte, seo, meta'</span>; </script> <head> <meta name=<span class="hl-str">"keywords"</span> content={keywords} /> </head></pre></div></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">The meta tag must be placed inside <body> to appear</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">The variable 'keywords' is not reactive, so meta tag is empty</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">The meta tag syntax is invalid and causes a runtime error</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">The <head> tag inside Svelte component is ignored; use <svelte:head> instead</span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">Svelte requires a special tag to modify the document head.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">In Svelte, the <head> tag inside components is ignored. You must use <svelte:head> to add head elements.</div></div></div></div><div class="challenge-container "><div class="task-card "><div class="task-header"><div class="task-badge"><span class="challenge-type-badge conceptual">🧠<!-- --> <!-- -->Conceptual</span></div><span class="task-difficulty expert">expert</span></div><div class="challenge-timer "><svg class="timer-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg><span class="timer-value">2:00</span><span class="timer-label">remaining</span></div><div class="challenge-prompt"><div class="challenge-title">Which meta tag improves SEO by controlling page indexing?</div><div>Which meta tag attribute and value combination tells search engines NOT to index the page?</div></div><div class="mt-3 d-none"></div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap"><meta name="robots" content="noindex" /></span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap"><meta name="viewport" content="noindex" /></span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap"><meta http-equiv="refresh" content="noindex" /></span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap"><meta name="description" content="noindex" /></span></div></div><div class="challenge-attempts"><span>Attempts:</span><div class="attempt-dots"><span class="attempt-dot "></span><span class="attempt-dot "></span></div><span>2<!-- --> left</span></div><div class="challenge-hint d-none"><div class="challenge-hint-title">💡 Hint</div><div class="challenge-hint-text">The 'robots' meta tag controls search engine indexing behavior.</div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">The meta tag with name="robots" and content="noindex" tells search engines not to index the page.</div></div></div></div></div></article><div class="confetti-container"></div></div><div><article class="content-card" id="practice"><div class="code-articles-card-header justify-content-between"><div class="d-flex align-items-center" style="gap:12px"><span class="card-icon nofill intro"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="blue-icon-color site-fs-20" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></span><h2 class="codefly-card-title mb-0 pb-0">Practice</h2></div><span class="site-fs-15">(<!-- -->1<!-- -->/<!-- -->5<!-- -->)</span></div><div class="code-articles-card-body" data-theme="light"><div class=""><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">1<!-- -->. <!-- -->What is the main purpose of using <code><svelte:head></code> in a Svelte component?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->To create reactive variables</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->To style the component with CSS</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->To handle user input events</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->To add SEO meta tags like title and description to the page head</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand the role of <svelte:head></h4>The <svelte:head> tag is used to insert elements into the HTML document's <head> section.</li><li><h4>Step 2: Identify what goes inside <svelte:head></h4>SEO meta tags like <title> and <meta name="description"> are placed inside <svelte:head> to improve search engine visibility.</li><li><h4>Final Answer:</h4><strong>To add SEO meta tags like title and description to the page head</strong> -> Option D</li><li><h4>Quick Check:</h4>SEO meta tags = <svelte:head> usage [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Use <svelte:head> to add meta tags in the page head [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Confusing <svelte:head> with styling or event handling</li><li class="ph-mistake-item mb-0">Trying to add meta tags outside <svelte:head></li><li class="ph-mistake-item mb-0">Using <svelte:head> for component layout</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">2<!-- -->. <!-- -->Which of the following is the correct syntax to set the page title inside a Svelte component?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">easy</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->My Page</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->My Page</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->My Page</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->My Page</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Recall correct Svelte syntax for head elements</h4>In Svelte, <svelte:head> is the special tag to add elements to the document head.</li><li><h4>Step 2: Check each option for correctness</h4><svelte:head><title>My Page</title></svelte:head> correctly wraps <title> inside <svelte:head>. Plain <head><title>My Page</title></head> and bare <title>My Page</title> miss the special Svelte tag. <svelte:title>My Page</svelte:title> uses a non-existent tag.</li><li><h4>Final Answer:</h4><strong><svelte:head><title>My Page</title></svelte:head></strong> -> Option A</li><li><h4>Quick Check:</h4>Page title in <svelte:head> = correct syntax [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Always wrap head tags inside <svelte:head> in Svelte [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Using plain <head> instead of <svelte:head></li><li class="ph-mistake-item mb-0">Placing <title> outside any head tag</li><li class="ph-mistake-item mb-0">Using invalid tags like <svelte:title></li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">3<!-- -->. <!-- -->What will be the rendered HTML head content after this Svelte component runs?<br/><pre><svelte:head> <title>Welcome</title> <meta name="description" content="Home page" /> </svelte:head></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->Only <title>Welcome</title> is added</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- --><title>Home page</title><meta name="description" content="Welcome" /></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- --><title>Welcome</title><meta name="description" content="Home page" /></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->No head content is added</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Understand <svelte:head> behavior</h4>All elements inside <svelte:head> are added to the HTML document's <head> section as-is.</li><li><h4>Step 2: Check the given tags inside <svelte:head></h4>The code adds a <title> with text 'Welcome' and a <meta> tag with name 'description' and content 'Home page'. Both appear in the head.</li><li><h4>Final Answer:</h4><strong><title>Welcome</title><meta name="description" content="Home page" /></strong> -> Option C</li><li><h4>Quick Check:</h4>Tags inside <svelte:head> appear in head [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Tags inside <svelte:head> appear exactly in the HTML head [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Mixing up title and meta content values</li><li class="ph-mistake-item mb-0">Thinking <svelte:head> does not render anything</li><li class="ph-mistake-item mb-0">Assuming only one tag can be added</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">4<!-- -->. <!-- -->Identify the error in this Svelte component code for setting meta tags:<br/><pre><svelte:head> <meta name="description" content=Home page> </svelte:head></pre></div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">medium</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->Missing quotes around the content attribute value</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->Using <svelte:head> instead of <head></span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->Meta tags cannot be added in Svelte components</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->The meta tag must be self-closing with a slash</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Check attribute syntax in meta tag</h4>HTML attributes must have their values in quotes. Here, content=Home page lacks quotes around 'Home page'.</li><li><h4>Step 2: Verify other parts of the code</h4><svelte:head> is correct for Svelte. Meta tags can be added. Self-closing slash is optional in HTML5.</li><li><h4>Final Answer:</h4><strong>Missing quotes around the content attribute value</strong> -> Option A</li><li><h4>Quick Check:</h4>Attribute values need quotes [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Always quote attribute values in HTML tags [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Omitting quotes around attribute values</li><li class="ph-mistake-item mb-0">Confusing <svelte:head> with <head></li><li class="ph-mistake-item mb-0">Thinking meta tags can't be used in Svelte</li></ul></div></div></div></div></div></div><div class="d-none"><div class="mb-4"><div class="practice-content"><div class="text-pre-wrap dbd-txt-theme-intense pb-3">5<!-- -->. <!-- -->How can you dynamically update the page title in a Svelte component based on a variable <code>pageTitle</code>?</div></div><div class="question-pills-container " style="padding-top:unset"><span class="level-badge">hard</span></div></div><div class=""><div class="practice-options"><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>A<!-- -->. <!-- -->pageTitle</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>B<!-- -->. <!-- -->{pageTitle}</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>C<!-- -->. <!-- -->{pageTitle}</span></div><div class="practice-option-label" style="cursor:pointer"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="txt-dark-grey-color site-fs-18 me-2 me-md-3" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg><span>D<!-- -->. <!-- -->$pageTitle</span></div></div><div class="py-3"><button class="site-btn" style="width:200px" disabled="">Verify</button></div></div><div class="py-2 d-none"><div class="practice-helper-btns-wrapper"></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-solution-box"><h4 class="helper-solution-box-title">Solution</h4><div class="practice-helper-body"><ol><li><h4>Step 1: Recall Svelte syntax for dynamic content</h4>In Svelte, curly braces {} are used to insert JavaScript variables inside markup.</li><li><h4>Step 2: Check each option for correct dynamic binding</h4><svelte:head><title>{pageTitle}</title></svelte:head> correctly uses <svelte:head> and inserts {pageTitle} inside <title>. <svelte:head><title>pageTitle</title></svelte:head> uses plain text 'pageTitle'. <title>{pageTitle}</title> misses <svelte:head>. <svelte:head><title>$pageTitle</title></svelte:head> uses invalid $ syntax.</li><li><h4>Final Answer:</h4><strong><svelte:head><title>{pageTitle}</title></svelte:head></strong> -> Option B</li><li><h4>Quick Check:</h4>Use {variable} inside <svelte:head> for dynamic title [OK]</li></ol></div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-hint-box"><div class="practice-helper-body"><strong class="helper-hint-box-title">Hint: </strong>Use {variable} inside <svelte:head> for dynamic meta tags [OK]</div></div></div></div><div class="practice-expanation-div "><div class="practice-expanation-div-body"><div class="practice-helper-content helper-mistakes-box"><div class="practice-helper-body"><strong class="helper-mistakes-box-title">Common Mistakes: </strong><ul class="ph-mistakes-list"><li class="ph-mistake-item mb-0">Writing variable name as plain text inside title</li><li class="ph-mistake-item mb-0">Omitting <svelte:head> wrapper</li><li class="ph-mistake-item mb-0">Using $variable syntax incorrectly</li></ul></div></div></div></div></div></div><div class="d-flex align-items-center justify-content-between mt-4"><button class="secondary-site-btn" disabled=""><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"></path></svg> Previous</button><div class="practice-question-toggles-wrapper"><button class="practice-question-toggle-btn active ">1</button><button class="practice-question-toggle-btn ">2</button><button class="practice-question-toggle-btn ">3</button><button class="practice-question-toggle-btn ">4</button><button class="practice-question-toggle-btn ">5</button></div><button class="secondary-site-btn">Next <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path></svg></button></div></div></article></div><div id="mock" class="mtc-wrapper"><div class="mtc-card-container"><div class="mtc-card pulse-effect"><span class="mtc-recommended-badge">Recommended</span><div class="mtc-icon-wrap"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" color="#fff" style="color:#fff" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 7a5 5 0 1 0 5 5"></path><path d="M13 3.055a9 9 0 1 0 7.941 7.945"></path><path d="M15 6v3h3l3 -3h-3v-3z"></path><path d="M15 9l-3 3"></path></svg></div><h4 class="mtc-heading">Ready to prove it?</h4><p class="mtc-sub">Pass the test and this pattern moves <span class="mtc-state-pill">unknown</span> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> <span class="mtc-state-pill good">strong</span> <span class="d-inline-block">while earning <span class="weight-800">+1 Grip</span></span> toward your certificate.</p><div class="mtc-pills"><span class="mtc-pill"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>10 questions</span><span class="mtc-pill"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="13" width="13" xmlns="http://www.w3.org/2000/svg"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path></svg>~5 min</span><span class="mtc-pill"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>easy <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg> hard</span></div><div class="mtc-cta-wrap"><button type="button" class="mtc-cta-btn">Take the Test <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="m268 112 144 144-144 144m124-144H100"></path></svg></button></div></div></div></div></div></main><div class="rpi-float-wrap"><button type="button" class="rpi-float-btn" aria-label="Report an issue"><svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg><span class="rpi-float-label">Report Issue</span></button></div></div><div style="display:none"><div id="ad-management-config-settings" data-blocklist-all="1"></div></div> <script src="/_next/static/chunks/webpack-28170116499ad51b.js" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0]);self.__next_f.push([2,null])</script><script>self.__next_f.push([1,"1:HL[\"/_next/static/css/d071dca61fbb01bf.css\",\"style\"]\n2:HL[\"/_next/static/css/907864b6faf28c32.css\",\"style\"]\n3:HL[\"/_next/static/css/ada9a246b4e9c7f9.css\",\"style\"]\n4:HL[\"/_next/static/css/725c7861d1898ba8.css\",\"style\"]\n5:HL[\"/_next/static/css/a97525600f39e233.css\",\"style\"]\n6:HL[\"/_next/static/css/989afc350a4b3a28.css\",\"style\"]\n7:HL[\"/_next/static/css/ccfdf35169bd162c.css\",\"style\"]\n8:HL[\"/_next/static/css/417e7aee3e688b57.css\",\"style\"]\n"])</script><script>self.__next_f.push([1,"9:I[95751,[],\"\"]\nc:I[39275,[],\"\"]\n12:I[61343,[],\"\"]\n13:I[84080,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"\"]\n14:I[88726,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"Toaster\"]\n15:I[20154,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"3154\",\"static/chunks/3154-0aa2f15561902c10.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"4662\",\"static/chunks/4662-205abea99f9b3adf.js\",\"9160\",\"static/chunks/app/not-found-b9aad74520590312.js\"],\"default\"]\n16:I[78598,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n17:I[56192,[\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"3185\",\"static/chunks/app/layout-e2ef1005801dc1ed.js\"],\"default\"]\n19:I[76130,[],\"\"]\nd:[\"lang\",\"en\",\"d\"]\ne:[\"subject\",\"svelte\",\"d\"]\nf:[\"part\",\"part-3\",\"d\"]\n10:[\"pattern\",\"svelte-seo-and-meta-tags\",\"d\"]\n11:[\"mode\",\"challenge\",\"oc\"]\n1a:[]\n"])</script><script>self.__next_f.push([1,"0:[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/d071dca61fbb01bf.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/907864b6faf28c32.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],[\"$\",\"$L9\",null,{\"buildId\":\"leyaa-prod-build-id\",\"assetPrefix\":\"\",\"initialCanonicalUrl\":\"/en/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\",\"initialTree\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"svelte\",\"d\"],{\"children\":[[\"part\",\"part-3\",\"d\"],{\"children\":[[\"pattern\",\"svelte-seo-and-meta-tags\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"oc\"],{\"children\":[\"__PAGE__\",{}]}]}]}]}]}]}]}]},\"$undefined\",\"$undefined\",true],\"initialSeedData\":[\"\",{\"children\":[[\"lang\",\"en\",\"d\"],{\"children\":[\"codefly\",{\"children\":[\"learn\",{\"children\":[[\"subject\",\"svelte\",\"d\"],{\"children\":[[\"part\",\"part-3\",\"d\"],{\"children\":[[\"pattern\",\"svelte-seo-and-meta-tags\",\"d\"],{\"children\":[[\"mode\",\"challenge\",\"oc\"],{\"children\":[\"__PAGE__\",{},[[\"$La\",\"$Lb\"],null],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\",\"$11\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ada9a246b4e9c7f9.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/725c7861d1898ba8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a97525600f39e233.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/989afc350a4b3a28.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/ccfdf35169bd162c.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"link\",\"5\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/417e7aee3e688b57.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]]}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\",\"$10\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\",\"$f\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\",\"$e\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\",\"learn\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\",\"codefly\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\",\"$d\",\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"notFoundStyles\":\"$undefined\",\"styles\":null}],null]},[[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"meta\",null,{\"name\":\"theme-color\",\"content\":\"#5f56fe\"}],[\"$\",\"meta\",null,{\"name\":\"msapplication-TileColor\",\"content\":\"#5f56fe\"}],[\"$\",\"$L13\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-N2NY2DMMDW\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L13\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag(){dataLayer.push(arguments);}\\n gtag('js', new Date());\\n gtag('config', 'G-N2NY2DMMDW', {\\n page_path: window.location.pathname,\\n });\\n \"}],[\"$\",\"script\",null,{\"async\":true,\"src\":\"https://www.googletagmanager.com/gtag/js?id=AW-18214378714\"}],[\"$\",\"$L13\",null,{\"children\":\"\\n window.dataLayer = window.dataLayer || [];\\n function gtag() {\\n dataLayer.push(arguments);\\n }\\n gtag('js', new Date());\\n gtag('config', 'AW-18214378714');\\n \"}],[\"$\",\"script\",null,{\"data-grow-initializer\":\"\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"!(function(){window.growMe||((window.growMe=function(e){window.growMe._.push(e);}),(window.growMe._=[]));var e=document.createElement(\\\"script\\\");(e.type=\\\"text/javascript\\\"),(e.src=\\\"https://faves.grow.me/main.js\\\"),(e.defer=!0),e.setAttribute(\\\"data-grow-faves-site-id\\\",\\\"U2l0ZTo0MGIxZDBlZC0wNzdlLTQ0NjgtOThmOC1kNDYyZGMwM2IwMWY=\\\");var t=document.getElementsByTagName(\\\"script\\\")[0];t.parentNode.insertBefore(e,t);})();\"}}],[\"$\",\"$L13\",null,{\"src\":\"//scripts.scriptwrapper.com/tags/40b1d0ed-077e-4468-98f8-d462dc03b01f.js\",\"strategy\":\"afterInteractive\",\"data-noptimize\":\"1\",\"data-cfasync\":\"false\"}],[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"WebApplication\\\",\\\"name\\\":\\\"Leyaa.ai\\\",\\\"description\\\":\\\"Leyaa.ai builds learning intelligence that understands how you learn - guiding what to study, how to practice, and when to move forward.\\\",\\\"url\\\":\\\"https://leyaa.ai\\\",\\\"applicationCategory\\\":\\\"EducationalApplication\\\",\\\"operatingSystem\\\":\\\"Web\\\",\\\"offers\\\":{\\\"@type\\\":\\\"Offer\\\",\\\"price\\\":\\\"0\\\",\\\"priceCurrency\\\":\\\"USD\\\"},\\\"creator\\\":{\\\"@type\\\":\\\"Organization\\\",\\\"name\\\":\\\"Leyaa.ai\\\"}}\"}}],[\"$\",\"$L13\",null,{\"id\":\"clarity-script\",\"strategy\":\"afterInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n (function(c,l,a,r,i,t,y){\\n c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};\\n t=l.createElement(r);t.async=1;t.src=\\\"https://www.clarity.ms/tag/\\\"+i;\\n y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);\\n })(window, document, \\\"clarity\\\", \\\"script\\\", \\\"w4gxh6rdmh\\\");\\n \"}}]]}],[\"$\",\"body\",null,{\"children\":[[\"$\",\"$L14\",null,{\"containerStyle\":{\"top\":70}}],[\"$\",\"$Lc\",null,{\"parallelRouterKey\":\"children\",\"segmentPath\":[\"children\"],\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L12\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[\"$\",\"$L15\",null,{}],\"notFoundStyles\":[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/a97525600f39e233.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\"}]],\"styles\":null}],[\"$\",\"$L16\",null,{}],\" \",[\"$\",\"$L17\",null,{}]]}]]}],null],null],\"couldBeIntercepted\":false,\"initialHead\":[false,\"$L18\"],\"globalErrorComponent\":\"$19\",\"missingSlots\":\"$W1a\"}]]\n"])</script><script>self.__next_f.push([1,"1c:I[43489,[\"8422\",\"static/chunks/66ec4792-3d3220126f3e74ee.js\",\"6950\",\"static/chunks/f8025e75-5dd99dd1a689ea97.js\",\"6051\",\"static/chunks/795d4814-8b40e2eae05948ca.js\",\"5706\",\"static/chunks/9c4e2130-0ef90d15550fcb15.js\",\"522\",\"static/chunks/94730671-fd9628eddbd5107b.js\",\"7699\",\"static/chunks/8e1d74a4-d3c1e3cfb4eeea98.js\",\"7240\",\"static/chunks/53c13509-a3e4ac0640ae03f2.js\",\"9956\",\"static/chunks/ee560e2c-27ba7a66c659fa82.js\",\"2516\",\"static/chunks/f7333993-31ab72eb9b202e3d.js\",\"1779\",\"static/chunks/0e762574-cee3ec2351d97ca0.js\",\"6795\",\"static/chunks/6795-1b544390b9b7cb09.js\",\"5214\",\"static/chunks/5214-cc3a3a8017cc6e4d.js\",\"7078\",\"static/chunks/7078-09556dce22020d83.js\",\"4889\",\"static/chunks/4889-de8d1c4f2ff2f134.js\",\"8726\",\"static/chunks/8726-fd60949e252ac8d1.js\",\"7534\",\"static/chunks/7534-02c906a11e681445.js\",\"4220\",\"static/chunks/4220-e3c1264f6e3453a7.js\",\"7562\",\"static/chunks/7562-b71a43604fd32292.js\",\"4481\",\"static/chunks/4481-14671e1e3d1ffff7.js\",\"6857\",\"static/chunks/6857-f9121be732678b30.js\",\"2202\",\"static/chunks/2202-dad5d33fadc7ea73.js\",\"1786\",\"static/chunks/1786-7253d5c3df8362c5.js\",\"7029\",\"static/chunks/app/%5Blang%5D/codefly/learn/%5Bsubject%5D/%5Bpart%5D/%5Bpattern%5D/%5B%5B...mode%5D%5D/page-b11550cd55444a64.js\"],\"default\"]\n1b:T482,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"SEO and meta tags in Svelte - Practice Problems \u0026 Coding Challenges\",\"description\":\"Solve SEO and meta tags in Svelte coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\",\"url\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\",\"learningResourceType\":\"Quiz\",\"programmingLanguage\":\"Svelte\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"SEO and meta tags in Svelte - Practice Problems \u0026 Coding Challenges\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\""])</script><script>self.__next_f.push([1,":\"Home\",\"item\":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SEO and meta tags in Svelte - Practice Problems \u0026 Coding Challenges\",\"item\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Challenge\",\"item\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\"}]}}"])</script><script>self.__next_f.push([1,"b:[[[\"$\",\"script\",\"0\",{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$1b\"}}]],[\"$\",\"$L1c\",null,{\"subject\":\"svelte\",\"dbSubject\":\"svelte\",\"part\":\"part-3\",\"pattern\":\"svelte_seo_and_meta_tags\",\"modeSlug\":\"challenge\",\"lang\":\"en\",\"internalLinks\":[{\"code\":\"LMC\",\"slug\":\"\",\"label\":\"📖 Learn\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags\",\"active\":false},{\"code\":\"LMCWHY\",\"slug\":\"why\",\"label\":\"💡 Why Learn This\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/why\",\"active\":false},{\"code\":\"DLM\",\"slug\":\"deep\",\"label\":\"💡 Deep Learn Mode\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/deep\",\"active\":false},{\"code\":\"TMC\",\"slug\":\"try\",\"label\":\"✏️ Try It\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/try\",\"active\":false},{\"code\":\"VMC\",\"slug\":\"visualize\",\"label\":\"👁 Visualize\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/visualize\",\"active\":false},{\"code\":\"TCM\",\"slug\":\"complexity\",\"label\":\"⏱ Complexity\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/complexity\",\"active\":false},{\"code\":\"CMC\",\"slug\":\"challenge\",\"label\":\"🏆 Challenge\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\",\"active\":true},{\"code\":\"PMC\",\"slug\":\"project\",\"label\":\"📁 Project\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/project\",\"active\":false},{\"code\":\"RMC\",\"slug\":\"review\",\"label\":\"🧠 Quick Review\",\"href\":\"/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/review\",\"active\":false}],\"isLoggedIn\":false,\"seoH1\":\"SEO and meta tags in Svelte - Practice Problems \u0026 Coding Challenges\",\"contentData\":{\"pattern_id\":\"svelte_seo_and_meta_tags\",\"metadata\":{\"slot_map\":{\"LMCWHY\":\"LMCWHY\",\"LMC\":\"LMC\",\"TMC\":\"TMC\",\"CMC\":\"CMC\",\"RMC\":\"RMC\",\"VMC\":\"VMC\",\"TCM\":\"WPM\",\"PMC\":\"PMC\",\"DLM\":\"DLM\"}},\"modes\":{\"CMC\":{\"topic\":\"SEO and meta tags\",\"mode\":\"CMC_v4.2\",\"language\":\"svelte\",\"content_type\":\"Frameworks \u0026 Libraries\",\"challenges\":[{\"id\":\"c1\",\"type\":\"component_behavior\",\"difficulty\":\"intermediate\",\"title\":\"What is the rendered \u003ctitle\u003e tag content?\",\"prompt\":\"Given this Svelte component, what will be the content of the \u003ctitle\u003e tag in the browser tab?\u003cbr\u003e\u003cbr\u003e\u003cpre\u003e\u0026lt;svelte:head\u0026gt;\\n \u0026lt;title\u0026gt;Welcome to Svelte SEO\u0026lt;/title\u0026gt;\\n\u0026lt;/svelte:head\u0026gt;\\n\\n\u0026lt;h1\u0026gt;Hello World\u0026lt;/h1\u0026gt;\u003c/pre\u003e\",\"code\":\"\u003csvelte:head\u003e\\n \u003ctitle\u003eWelcome to Svelte SEO\u003c/title\u003e\\n\u003c/svelte:head\u003e\\n\\n\u003ch1\u003eHello World\u003c/h1\u003e\",\"ordering_targets\":[],\"options\":{\"A\":\"The browser tab shows \\\"Welcome to Svelte SEO\\\"\",\"B\":\"The browser tab shows \\\"Hello World\\\"\",\"C\":\"The browser tab is blank\",\"D\":\"The browser tab shows the default page title\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"The \u0026lt;svelte:head\u0026gt; tag lets you set head elements like title.\",\"explanation\":\"The \u0026lt;title\u0026gt; inside \u0026lt;svelte:head\u0026gt; sets the page title shown in the browser tab.\",\"solution\":\"\u003csvelte:head\u003e\\n \u003ctitle\u003eWelcome to Svelte SEO\u003c/title\u003e\\n\u003c/svelte:head\u003e\",\"tags\":[\"svelte\",\"seo\",\"meta tags\",\"component behavior\"]},{\"id\":\"c2\",\"type\":\"syntax\",\"difficulty\":\"intermediate\",\"title\":\"Which option correctly adds a meta description tag in Svelte?\",\"prompt\":\"You want to add a meta description tag for SEO inside a Svelte component. Which code snippet is correct?\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"\u003chead\u003e\\n \u003cmeta description=\\\"This is a Svelte app\\\" /\u003e\\n\u003c/head\u003e\",\"B\":\"\u003csvelte:head\u003e\\n \u003cmeta content=\\\"This is a Svelte app\\\" name=\\\"description\\\" /\u003e\\n\u003c/svelte:head\u003e\",\"C\":\"\u003csvelte:head\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"This is a Svelte app\\\" /\u003e\\n\u003c/svelte:head\u003e\",\"D\":\"\u003csvelte:head\u003e\\n \u003cmeta name=\\\"desc\\\" content=\\\"This is a Svelte app\\\" /\u003e\\n\u003c/svelte:head\u003e\"},\"correct_answer\":[\"C\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Use \u0026lt;svelte:head\u0026gt; and correct meta attributes.\",\"explanation\":\"Option C uses \u0026lt;svelte:head\u0026gt; and the correct meta tag with name=\\\"description\\\" and content attribute.\",\"solution\":\"\u003csvelte:head\u003e\\n \u003cmeta name=\\\"description\\\" content=\\\"This is a Svelte app\\\" /\u003e\\n\u003c/svelte:head\u003e\",\"tags\":[\"svelte\",\"seo\",\"meta tags\",\"syntax\"]},{\"id\":\"c3\",\"type\":\"state_output\",\"difficulty\":\"advanced\",\"title\":\"What is the final meta tag content after state update?\",\"prompt\":\"Consider this Svelte component that updates the meta description dynamically:\u003cbr\u003e\u003cbr\u003e\u003cpre\u003e\u0026lt;script\u0026gt;\\n import { onMount } from 'svelte';\\n let desc = 'Initial description';\\n onMount(() =\u0026gt; {\\n setTimeout(() =\u0026gt; {\\n desc = 'Updated description';\\n }, 1000);\\n });\\n\u0026lt;/script\u0026gt;\\n\\n\u0026lt;svelte:head\u0026gt;\\n \u0026lt;meta name=\\\"description\\\" content={desc} /\u0026gt;\\n\u0026lt;/svelte:head\u0026gt;\\n\\n\u0026lt;h1\u0026gt;Check meta description\u0026lt;/h1\u0026gt;\u003c/pre\u003e\u003cbr\u003eWhat will be the content attribute of the meta description tag after 2 seconds?\",\"code\":\"\u003cscript\u003e\\n import { onMount } from 'svelte';\\n let desc = 'Initial description';\\n onMount(() =\u003e {\\n setTimeout(() =\u003e {\\n desc = 'Updated description';\\n }, 1000);\\n });\\n\u003c/script\u003e\\n\\n\u003csvelte:head\u003e\\n \u003cmeta name=\\\"description\\\" content={desc} /\u003e\\n\u003c/svelte:head\u003e\\n\\n\u003ch1\u003eCheck meta description\u003c/h1\u003e\",\"ordering_targets\":[],\"options\":{\"A\":\"The meta description content is \\\"Initial description\\\"\",\"B\":\"The meta description content is \\\"Updated description\\\"\",\"C\":\"The meta description tag is removed\",\"D\":\"The meta description content is empty\"},\"correct_answer\":[\"B\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"The meta tag content updates reactively when the variable changes.\",\"explanation\":\"Svelte updates the meta tag content reactively when the variable 'desc' changes after 1 second.\",\"solution\":\"After 2 seconds, the meta tag content is \\\"Updated description\\\" because the reactive update happened.\",\"tags\":[\"svelte\",\"seo\",\"meta tags\",\"state\",\"reactivity\"]},{\"id\":\"c4\",\"type\":\"debug\",\"difficulty\":\"advanced\",\"title\":\"Why does this meta tag not appear in the page head?\",\"prompt\":\"You wrote this Svelte code but the meta tag does not show in the browser head:\u003cbr\u003e\u003cbr\u003e\u003cpre\u003e\u0026lt;script\u0026gt;\\n let keywords = 'svelte, seo, meta';\\n\u0026lt;/script\u0026gt;\\n\\n\u0026lt;head\u0026gt;\\n \u0026lt;meta name=\\\"keywords\\\" content={keywords} /\u0026gt;\\n\u0026lt;/head\u0026gt;\u003c/pre\u003e\u003cbr\u003eWhat is the reason?\",\"code\":\"\u003cscript\u003e\\n let keywords = 'svelte, seo, meta';\\n\u003c/script\u003e\\n\\n\u003chead\u003e\\n \u003cmeta name=\\\"keywords\\\" content={keywords} /\u003e\\n\u003c/head\u003e\",\"ordering_targets\":[],\"options\":{\"A\":\"The meta tag must be placed inside \u003cbody\u003e to appear\",\"B\":\"The variable 'keywords' is not reactive, so meta tag is empty\",\"C\":\"The meta tag syntax is invalid and causes a runtime error\",\"D\":\"The \u003chead\u003e tag inside Svelte component is ignored; use \u003csvelte:head\u003e instead\"},\"correct_answer\":[\"D\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"Svelte requires a special tag to modify the document head.\",\"explanation\":\"In Svelte, the \u003chead\u003e tag inside components is ignored. You must use \u003csvelte:head\u003e to add head elements.\",\"solution\":\"Replace \u003chead\u003e with \u003csvelte:head\u003e to correctly add meta tags to the document head.\",\"tags\":[\"svelte\",\"seo\",\"meta tags\",\"debug\"]},{\"id\":\"c5\",\"type\":\"conceptual\",\"difficulty\":\"expert\",\"title\":\"Which meta tag improves SEO by controlling page indexing?\",\"prompt\":\"Which meta tag attribute and value combination tells search engines NOT to index the page?\",\"code\":\"\",\"ordering_targets\":[],\"options\":{\"A\":\"\u003cmeta name=\\\"robots\\\" content=\\\"noindex\\\" /\u003e\",\"B\":\"\u003cmeta name=\\\"viewport\\\" content=\\\"noindex\\\" /\u003e\",\"C\":\"\u003cmeta http-equiv=\\\"refresh\\\" content=\\\"noindex\\\" /\u003e\",\"D\":\"\u003cmeta name=\\\"description\\\" content=\\\"noindex\\\" /\u003e\"},\"correct_answer\":[\"A\"],\"time_limit_seconds\":120,\"attempts_allowed\":2,\"hint\":\"The 'robots' meta tag controls search engine indexing behavior.\",\"explanation\":\"The meta tag with name=\\\"robots\\\" and content=\\\"noindex\\\" tells search engines not to index the page.\",\"solution\":\"\u003cmeta name=\\\"robots\\\" content=\\\"noindex\\\" /\u003e\",\"tags\":[\"seo\",\"meta tags\",\"conceptual\"]}],\"achievement_badge\":{\"name\":\"SEO Meta Master\",\"condition\":\"complete_all_5\"},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"framework\",\"total_challenges\":5,\"estimated_time_minutes\":20}}},\"subject\":\"svelte\",\"title\":\"SEO and meta tags\",\"puzzleDetails\":[{\"_id\":\"69b1785145baa2b585462633\",\"question_number\":1,\"question\":\"What is the main purpose of using \u003ccode\u003e\u0026lt;svelte:head\u0026gt;\u003c/code\u003e in a Svelte component?\",\"options\":{\"A\":\"To create reactive variables\",\"B\":\"To style the component with CSS\",\"C\":\"To handle user input events\",\"D\":\"To add SEO meta tags like title and description to the page head\"},\"correct_answer\":[\"D\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand the role of \u0026lt;svelte:head\u0026gt;\u003c/h4\u003eThe \u0026lt;svelte:head\u0026gt; tag is used to insert elements into the HTML document's \u0026lt;head\u0026gt; section.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Identify what goes inside \u0026lt;svelte:head\u0026gt;\u003c/h4\u003eSEO meta tags like \u0026lt;title\u0026gt; and \u0026lt;meta name=\\\"description\\\"\u0026gt; are placed inside \u0026lt;svelte:head\u0026gt; to improve search engine visibility.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eTo add SEO meta tags like title and description to the page head\u003c/strong\u003e -\u003e Option D\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eSEO meta tags = \u0026lt;svelte:head\u0026gt; usage [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Use \u0026lt;svelte:head\u0026gt; to add meta tags in the page head [OK]\",\"common_mistakes\":[\"Confusing \u0026lt;svelte:head\u0026gt; with styling or event handling\",\"Trying to add meta tags outside \u0026lt;svelte:head\u0026gt;\",\"Using \u0026lt;svelte:head\u0026gt; for component layout\"],\"subject\":\"svelte\",\"pattern\":\"SEO and meta tags\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"conceptual\",\"difficulty\":\"easy\",\"topic\":\"SvelteKit Advanced Features\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"conceptual\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"svelte_seo_and_meta_tags\",\"subjectTitle\":\"Svelte\",\"part\":\"part-3\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"svelte_p3_t5\"},{\"_id\":\"69b1785145baa2b585462634\",\"question_number\":2,\"question\":\"Which of the following is the correct syntax to set the page title inside a Svelte component?\",\"options\":{\"A\":\"\u003csvelte:head\u003e\u003ctitle\u003eMy Page\u003c/title\u003e\u003c/svelte:head\u003e\",\"B\":\"\u003chead\u003e\u003ctitle\u003eMy Page\u003c/title\u003e\u003c/head\u003e\",\"C\":\"\u003ctitle\u003eMy Page\u003c/title\u003e\",\"D\":\"\u003csvelte:title\u003eMy Page\u003c/svelte:title\u003e\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Recall correct Svelte syntax for head elements\u003c/h4\u003eIn Svelte, \u0026lt;svelte:head\u0026gt; is the special tag to add elements to the document head.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check each option for correctness\u003c/h4\u003e\u0026lt;svelte:head\u0026gt;\u0026lt;title\u0026gt;My Page\u0026lt;/title\u0026gt;\u0026lt;/svelte:head\u0026gt; correctly wraps \u0026lt;title\u0026gt; inside \u0026lt;svelte:head\u0026gt;. Plain \u0026lt;head\u0026gt;\u0026lt;title\u0026gt;My Page\u0026lt;/title\u0026gt;\u0026lt;/head\u0026gt; and bare \u0026lt;title\u0026gt;My Page\u0026lt;/title\u0026gt; miss the special Svelte tag. \u0026lt;svelte:title\u0026gt;My Page\u0026lt;/svelte:title\u0026gt; uses a non-existent tag.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;svelte:head\u0026gt;\u0026lt;title\u0026gt;My Page\u0026lt;/title\u0026gt;\u0026lt;/svelte:head\u0026gt;\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003ePage title in \u0026lt;svelte:head\u0026gt; = correct syntax [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Always wrap head tags inside \u0026lt;svelte:head\u0026gt; in Svelte [OK]\",\"common_mistakes\":[\"Using plain \u0026lt;head\u0026gt; instead of \u0026lt;svelte:head\u0026gt;\",\"Placing \u0026lt;title\u0026gt; outside any head tag\",\"Using invalid tags like \u0026lt;svelte:title\u0026gt;\"],\"subject\":\"svelte\",\"pattern\":\"SEO and meta tags\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"syntax\",\"difficulty\":\"easy\",\"topic\":\"SvelteKit Advanced Features\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"syntax\",\"level\":\"easy\",\"test_type\":\"puzzle\",\"pattern_id\":\"svelte_seo_and_meta_tags\",\"subjectTitle\":\"Svelte\",\"part\":\"part-3\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"svelte_p3_t5\"},{\"_id\":\"69b1785145baa2b585462635\",\"question_number\":3,\"question\":\"What will be the rendered HTML head content after this Svelte component runs?\u003cbr\u003e\u003cpre\u003e\u0026lt;svelte:head\u0026gt;\\n \u0026lt;title\u0026gt;Welcome\u0026lt;/title\u0026gt;\\n \u0026lt;meta name=\\\"description\\\" content=\\\"Home page\\\" /\u0026gt;\\n\u0026lt;/svelte:head\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"Only \u0026lt;title\u0026gt;Welcome\u0026lt;/title\u0026gt; is added\",\"B\":\"\u0026lt;title\u0026gt;Home page\u0026lt;/title\u0026gt;\u0026lt;meta name=\\\"description\\\" content=\\\"Welcome\\\" /\u0026gt;\",\"C\":\"\u0026lt;title\u0026gt;Welcome\u0026lt;/title\u0026gt;\u0026lt;meta name=\\\"description\\\" content=\\\"Home page\\\" /\u0026gt;\",\"D\":\"No head content is added\"},\"correct_answer\":[\"C\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Understand \u0026lt;svelte:head\u0026gt; behavior\u003c/h4\u003eAll elements inside \u0026lt;svelte:head\u0026gt; are added to the HTML document's \u0026lt;head\u0026gt; section as-is.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check the given tags inside \u0026lt;svelte:head\u0026gt;\u003c/h4\u003eThe code adds a \u0026lt;title\u0026gt; with text 'Welcome' and a \u0026lt;meta\u0026gt; tag with name 'description' and content 'Home page'. Both appear in the head.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;title\u0026gt;Welcome\u0026lt;/title\u0026gt;\u0026lt;meta name=\\\"description\\\" content=\\\"Home page\\\" /\u0026gt;\u003c/strong\u003e -\u003e Option C\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eTags inside \u0026lt;svelte:head\u0026gt; appear in head [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Tags inside \u0026lt;svelte:head\u0026gt; appear exactly in the HTML head [OK]\",\"common_mistakes\":[\"Mixing up title and meta content values\",\"Thinking \u0026lt;svelte:head\u0026gt; does not render anything\",\"Assuming only one tag can be added\"],\"subject\":\"svelte\",\"pattern\":\"SEO and meta tags\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"component_behavior\",\"difficulty\":\"medium\",\"topic\":\"SvelteKit Advanced Features\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"component_behavior\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"svelte_seo_and_meta_tags\",\"subjectTitle\":\"Svelte\",\"part\":\"part-3\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"svelte_p3_t5\"},{\"_id\":\"69b1785145baa2b585462636\",\"question_number\":4,\"question\":\"Identify the error in this Svelte component code for setting meta tags:\u003cbr\u003e\u003cpre\u003e\u0026lt;svelte:head\u0026gt;\\n \u0026lt;meta name=\\\"description\\\" content=Home page\u0026gt;\\n\u0026lt;/svelte:head\u0026gt;\u003c/pre\u003e\",\"options\":{\"A\":\"Missing quotes around the content attribute value\",\"B\":\"Using \u0026lt;svelte:head\u0026gt; instead of \u0026lt;head\u0026gt;\",\"C\":\"Meta tags cannot be added in Svelte components\",\"D\":\"The meta tag must be self-closing with a slash\"},\"correct_answer\":[\"A\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Check attribute syntax in meta tag\u003c/h4\u003eHTML attributes must have their values in quotes. Here, content=Home page lacks quotes around 'Home page'.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Verify other parts of the code\u003c/h4\u003e\u0026lt;svelte:head\u0026gt; is correct for Svelte. Meta tags can be added. Self-closing slash is optional in HTML5.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003eMissing quotes around the content attribute value\u003c/strong\u003e -\u003e Option A\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eAttribute values need quotes [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Always quote attribute values in HTML tags [OK]\",\"common_mistakes\":[\"Omitting quotes around attribute values\",\"Confusing \u0026lt;svelte:head\u0026gt; with \u0026lt;head\u0026gt;\",\"Thinking meta tags can't be used in Svelte\"],\"subject\":\"svelte\",\"pattern\":\"SEO and meta tags\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"debug\",\"difficulty\":\"medium\",\"topic\":\"SvelteKit Advanced Features\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"debug\",\"level\":\"medium\",\"test_type\":\"puzzle\",\"pattern_id\":\"svelte_seo_and_meta_tags\",\"subjectTitle\":\"Svelte\",\"part\":\"part-3\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"svelte_p3_t5\"},{\"_id\":\"69b1785145baa2b585462637\",\"question_number\":5,\"question\":\"How can you dynamically update the page title in a Svelte component based on a variable \u003ccode\u003epageTitle\u003c/code\u003e?\",\"options\":{\"A\":\"\u003csvelte:head\u003e\u003ctitle\u003epageTitle\u003c/title\u003e\u003c/svelte:head\u003e\",\"B\":\"\u003csvelte:head\u003e\u003ctitle\u003e{pageTitle}\u003c/title\u003e\u003c/svelte:head\u003e\",\"C\":\"\u003ctitle\u003e{pageTitle}\u003c/title\u003e\",\"D\":\"\u003csvelte:head\u003e\u003ctitle\u003e$pageTitle\u003c/title\u003e\u003c/svelte:head\u003e\"},\"correct_answer\":[\"B\"],\"solution_explanation\":\"\u003cdiv class='solution-box'\u003e\u003cspan class='solution-label'\u003e\u003cstrong\u003eSolution:\u003c/strong\u003e\u003c/span\u003e\u003col\u003e\u003cli\u003e\u003ch4\u003eStep 1: Recall Svelte syntax for dynamic content\u003c/h4\u003eIn Svelte, curly braces {} are used to insert JavaScript variables inside markup.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eStep 2: Check each option for correct dynamic binding\u003c/h4\u003e\u0026lt;svelte:head\u0026gt;\u0026lt;title\u0026gt;{pageTitle}\u0026lt;/title\u0026gt;\u0026lt;/svelte:head\u0026gt; correctly uses \u0026lt;svelte:head\u0026gt; and inserts {pageTitle} inside \u0026lt;title\u0026gt;. \u0026lt;svelte:head\u0026gt;\u0026lt;title\u0026gt;pageTitle\u0026lt;/title\u0026gt;\u0026lt;/svelte:head\u0026gt; uses plain text 'pageTitle'. \u0026lt;title\u0026gt;{pageTitle}\u0026lt;/title\u0026gt; misses \u0026lt;svelte:head\u0026gt;. \u0026lt;svelte:head\u0026gt;\u0026lt;title\u0026gt;$pageTitle\u0026lt;/title\u0026gt;\u0026lt;/svelte:head\u0026gt; uses invalid $ syntax.\u003c/li\u003e\u003cli\u003e\u003ch4\u003eFinal Answer:\u003c/h4\u003e\u003cstrong\u003e\u0026lt;svelte:head\u0026gt;\u0026lt;title\u0026gt;{pageTitle}\u0026lt;/title\u0026gt;\u0026lt;/svelte:head\u0026gt;\u003c/strong\u003e -\u003e Option B\u003c/li\u003e\u003cli\u003e\u003ch4\u003eQuick Check:\u003c/h4\u003eUse {variable} inside \u0026lt;svelte:head\u0026gt; for dynamic title [OK]\u003c/li\u003e\u003c/ol\u003e\u003c/div\u003e\",\"quick_trick\":\"Use {variable} inside \u0026lt;svelte:head\u0026gt; for dynamic meta tags [OK]\",\"common_mistakes\":[\"Writing variable name as plain text inside title\",\"Omitting \u0026lt;svelte:head\u0026gt; wrapper\",\"Using $variable syntax incorrectly\"],\"subject\":\"svelte\",\"pattern\":\"SEO and meta tags\",\"category\":\"Frameworks \u0026 Libraries\",\"question_format\":\"MCQ\",\"question_mode\":\"application\",\"difficulty\":\"hard\",\"topic\":\"SvelteKit Advanced Features\",\"type\":\"Frameworks \u0026 Libraries\",\"question_type\":\"application\",\"level\":\"hard\",\"test_type\":\"puzzle\",\"pattern_id\":\"svelte_seo_and_meta_tags\",\"subjectTitle\":\"Svelte\",\"part\":\"part-3\",\"set_no\":1,\"usage_count\":0,\"topic_id\":\"svelte_p3_t5\"}]},\"syllabusData\":{\"subject\":\"svelte\",\"part\":\"part-3\",\"difficulty\":\"advanced\",\"metadata\":{\"total_topics\":6,\"total_patterns\":46,\"patterns_with_content\":46,\"created_at\":\"2026-02-28T20:18:29.430912Z\",\"version\":\"4.2\",\"upload_tool\":\"upload_to_mongo.py v2.0\"},\"part_title\":\"Advanced\",\"subjectTitle\":\"Svelte\",\"topics\":[{\"topic_id\":\"svelte_p3_t1\",\"title\":\"SvelteKit Routing\",\"order\":1,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"svelte_why_sveltekit_handles_fullstack_routing\",\"title\":\"Why SvelteKit handles full-stack routing\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_filebased_routing\",\"title\":\"File-based routing\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_dynamic_route_parameters\",\"title\":\"Dynamic route parameters\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_layout_files_layoutsvelte\",\"title\":\"Layout files (+layout.svelte)\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_error_pages_errorsvelte\",\"title\":\"Error pages (+error.svelte)\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_route_groups\",\"title\":\"Route groups\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_optional_parameters\",\"title\":\"Optional parameters\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_rest_parameters\",\"title\":\"Rest parameters\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"svelte_p3_t2\",\"title\":\"SvelteKit Data Loading\",\"order\":2,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"svelte_why_load_functions_fetch_data_serverside\",\"title\":\"Why load functions fetch data server-side\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_page_load_functions_pagejs\",\"title\":\"Page load functions (+page.js)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_server_load_functions_pageserverjs\",\"title\":\"Server load functions (+page.server.js)\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_layout_load_functions\",\"title\":\"Layout load functions\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_using_data_in_pages\",\"title\":\"Using data in pages\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_invalidation_and_reloading\",\"title\":\"Invalidation and reloading\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_streaming_with_promises\",\"title\":\"Streaming with promises\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_error_handling_in_load\",\"title\":\"Error handling in load\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"svelte_p3_t3\",\"title\":\"SvelteKit Forms and Actions\",\"order\":3,\"pattern_count\":7,\"patterns\":[{\"pattern_id\":\"svelte_why_form_actions_handle_mutations\",\"title\":\"Why form actions handle mutations\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_default_actions\",\"title\":\"Default actions\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_named_actions\",\"title\":\"Named actions\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_progressive_enhancement\",\"title\":\"Progressive enhancement\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_form_validation\",\"title\":\"Form validation\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_action_return_data\",\"title\":\"Action return data\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_redirect_from_actions\",\"title\":\"Redirect from actions\",\"order\":7,\"has_content\":true}]},{\"topic_id\":\"svelte_p3_t4\",\"title\":\"SvelteKit API Routes\",\"order\":4,\"pattern_count\":6,\"patterns\":[{\"pattern_id\":\"svelte_why_api_routes_serve_data_endpoints\",\"title\":\"Why API routes serve data endpoints\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_server_routes_serverjs\",\"title\":\"Server routes (+server.js)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_get_post_put_delete_handlers\",\"title\":\"GET, POST, PUT, DELETE handlers\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_request_parsing\",\"title\":\"Request parsing\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_response_helpers_json_error\",\"title\":\"Response helpers (json, error)\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_api_authentication_patterns\",\"title\":\"API authentication patterns\",\"order\":6,\"has_content\":true}]},{\"topic_id\":\"svelte_p3_t5\",\"title\":\"SvelteKit Advanced Features\",\"order\":5,\"pattern_count\":8,\"patterns\":[{\"pattern_id\":\"svelte_why_advanced_features_enable_production_apps\",\"title\":\"Why advanced features enable production apps\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_hooks_handle_handleerror_handlefetch\",\"title\":\"Hooks (handle, handleError, handleFetch)\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_middleware_patterns_with_hooks\",\"title\":\"Middleware patterns with hooks\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_environment_variables_env\",\"title\":\"Environment variables ($env)\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_page_options_ssr_csr_prerender\",\"title\":\"Page options (SSR, CSR, prerender)\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_adapter_configuration\",\"title\":\"Adapter configuration\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_service_workers\",\"title\":\"Service workers\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_seo_and_meta_tags\",\"title\":\"SEO and meta tags\",\"order\":8,\"has_content\":true}]},{\"topic_id\":\"svelte_p3_t6\",\"title\":\"Testing and Deployment\",\"order\":6,\"pattern_count\":9,\"patterns\":[{\"pattern_id\":\"svelte_why_testing_validates_svelte_applications\",\"title\":\"Why testing validates Svelte applications\",\"order\":1,\"has_content\":true},{\"pattern_id\":\"svelte_component_testing_with_testing_library\",\"title\":\"Component testing with Testing Library\",\"order\":2,\"has_content\":true},{\"pattern_id\":\"svelte_unit_testing_logic\",\"title\":\"Unit testing logic\",\"order\":3,\"has_content\":true},{\"pattern_id\":\"svelte_vitest_setup\",\"title\":\"Vitest setup\",\"order\":4,\"has_content\":true},{\"pattern_id\":\"svelte_e2e_testing_with_playwright\",\"title\":\"E2E testing with Playwright\",\"order\":5,\"has_content\":true},{\"pattern_id\":\"svelte_static_adapter_deployment\",\"title\":\"Static adapter deployment\",\"order\":6,\"has_content\":true},{\"pattern_id\":\"svelte_node_adapter_deployment\",\"title\":\"Node adapter deployment\",\"order\":7,\"has_content\":true},{\"pattern_id\":\"svelte_vercel_and_netlify_deployment\",\"title\":\"Vercel and Netlify deployment\",\"order\":8,\"has_content\":true},{\"pattern_id\":\"svelte_docker_deployment\",\"title\":\"Docker deployment\",\"order\":9,\"has_content\":true}]}]},\"modeCode\":\"CMC\",\"productId\":\"codefly\"}]]\n"])</script><script>self.__next_f.push([1,"18:[[\"$\",\"meta\",\"0\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"1\",{\"charSet\":\"utf-8\"}],[\"$\",\"title\",\"2\",{\"children\":\"SEO and meta tags in Svelte Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Solve SEO and meta tags in Svelte coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"4\",{\"name\":\"author\",\"content\":\"Leyaa.ai\"}],[\"$\",\"link\",\"5\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"use-credentials\"}],[\"$\",\"meta\",\"6\",{\"name\":\"keywords\",\"content\":\"learning intelligence,AI learning,personalized learning,adaptive learning,study guide,exam preparation,learning platform,education technology,edtech,smart learning\"}],[\"$\",\"meta\",\"7\",{\"name\":\"creator\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"8\",{\"name\":\"publisher\",\"content\":\"Leyaa.ai\"}],[\"$\",\"meta\",\"9\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"10\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"11\",{\"name\":\"mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"12\",{\"name\":\"content-language\",\"content\":\"en\"}],[\"$\",\"link\",\"13\",{\"rel\":\"canonical\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\"}],[\"$\",\"meta\",\"16\",{\"name\":\"apple-mobile-web-app-capable\",\"content\":\"yes\"}],[\"$\",\"meta\",\"17\",{\"name\":\"apple-mobile-web-app-title\",\"content\":\"Leyaa\"}],[\"$\",\"meta\",\"18\",{\"name\":\"apple-mobile-web-app-status-bar-style\",\"content\":\"default\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:title\",\"content\":\"SEO and meta tags in Svelte Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:description\",\"content\":\"Solve SEO and meta tags in Svelte coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/challenge\"}],[\"$\",\"meta\",\"22\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"23\",{\"property\":\"og:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"meta\",\"24\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"25\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"26\",{\"property\":\"og:image:alt\",\"content\":\"SEO and meta tags in Svelte Practice Problems - Coding Exercises\"}],[\"$\",\"meta\",\"27\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"28\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"29\",{\"name\":\"twitter:site\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"30\",{\"name\":\"twitter:creator\",\"content\":\"@leyaaai\"}],[\"$\",\"meta\",\"31\",{\"name\":\"twitter:title\",\"content\":\"SEO and meta tags in Svelte Practice Problems - Coding Exercises | Leyaa.ai\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Solve SEO and meta tags in Svelte coding challenges from easy to hard. Practice problems with hints, solutions, and step-by-step explanations. Free practice.\"}],[\"$\",\"meta\",\"33\",{\"name\":\"twitter:image\",\"content\":\"https://leyaa.ai/Assets/metaImages/leyaa-preview-image.png\"}],[\"$\",\"link\",\"34\",{\"rel\":\"icon\",\"href\":\"/leyaa-logo.png\"}],[\"$\",\"link\",\"35\",{\"rel\":\"apple-touch-icon\",\"href\":\"https://leyaa.ai/Assets/Favicons/apple-touch-icon.png\"}],[\"$\",\"meta\",\"36\",{\"name\":\"next-size-adjust\"}]]\n"])</script><script>self.__next_f.push([1,"a:null\n"])</script></body></html>