Recall & Review

beginner

What is the purpose of meta tags in a web page?

Meta tags provide metadata about the web page, such as description, keywords, and author. They help search engines understand the page content and improve SEO.

Click to reveal answer

beginner

How do you add meta tags in a Svelte component?

You add meta tags inside the element in a Svelte component. This ensures the tags are included in the HTML head section.

Click to reveal answer

beginner

Why is the <title> tag important for SEO?

The <title> tag sets the page title shown in browser tabs and search engine results. It helps users and search engines understand the page topic.

Click to reveal answer

beginner

What is the role of the <meta name="description"> tag?

It provides a short summary of the page content. Search engines often show this description in search results, influencing click rates.

Click to reveal answer

intermediate

How can you make meta tags dynamic in Svelte?

You can use reactive variables inside to update meta tags based on component state or props, allowing SEO info to change per page or content.

Click to reveal answer

Where do you place meta tags in a Svelte component?

AInside <script>

BInside <svelte:head>

CInside <style>

DInside <main>

Which meta tag helps improve search engine snippets with a summary?

A<meta name="description">

B<meta name="keywords">

C<meta charset="UTF-8">

D<meta name="author">

What does the <title> tag affect?

ABrowser tab title and search results title

BPage background color

CPage font size

DImage alt text

✗ Incorrect

The tag sets the text shown in browser tabs and search engine listings.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">How can meta tags be updated dynamically in Svelte?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap">By editing the <script> tag only</span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap">By changing CSS styles</span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap">By adding inline JavaScript in HTML</span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap">Using reactive variables inside <svelte:head></span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">Reactive variables inside <svelte:head> allow meta tags to update when data changes.</div></div></div><div class="task-card "><div class="task-instruction text-pre-wrap">Which of these is NOT a common meta tag for SEO?</div><div class="task-options"><div class="task-option "><span class="task-option-key">A</span><span class="text-pre-wrap"><meta name="viewport"></span></div><div class="task-option "><span class="task-option-key">B</span><span class="text-pre-wrap"><meta name="description"></span></div><div class="task-option "><span class="task-option-key">C</span><span class="text-pre-wrap"><meta name="background"></span></div><div class="task-option "><span class="task-option-key">D</span><span class="text-pre-wrap"><meta name="robots"></span></div></div><div class="feedback-box incorrect d-none"><div class="feedback-title">✗ Incorrect</div><div class="feedback-text">There is no standard meta tag named 'background' for SEO.</div></div></div></div><div class="recall-section "><div class="recall-prompt-card"><div class="recall-prompt-text">Explain how to add SEO meta tags in a Svelte component and why it matters.</div><textarea class="recall-prompt-textarea" id="prompt-rp1" placeholder="Type your answer here..."></textarea><div class="recall-prompt-actions"><button class="recall-check-btn">Check Answer</button><button class="recall-hint-btn">💡 Hint</button></div><div class="recall-prompt-hint d-none">Think about where HTML head content goes in Svelte.</div><div class="recall-prompt-feedback d-none "><div class="recall-prompt-feedback-title"></div><div class="recall-prompt-feedback-text">You got /4 concepts.<ul class="expected-elements-list"></ul></div></div></div><div class="recall-prompt-card"><div class="recall-prompt-text">Describe how to make meta tags dynamic in Svelte and give an example use case.</div><textarea class="recall-prompt-textarea" id="prompt-rp2" placeholder="Type your answer here..."></textarea><div class="recall-prompt-actions"><button class="recall-check-btn">Check Answer</button><button class="recall-hint-btn">💡 Hint</button></div><div class="recall-prompt-hint d-none">Consider how Svelte reacts to data changes.</div><div class="recall-prompt-feedback d-none "><div class="recall-prompt-feedback-title"></div><div class="recall-prompt-feedback-text">You got /3 concepts.<ul class="expected-elements-list"></ul></div></div></div></div></div></article></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\",\"review\",\"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/review\",\"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\",\"review\",\"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\",\"review\",\"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:T46b,{\"@context\":\"https://schema.org\",\"@type\":\"LearningResource\",\"name\":\"SEO and meta tags in Svelte - Cheat Sheet \u0026 Quick Revision\",\"description\":\"Quick revision of SEO and meta tags in Svelte. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\",\"url\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/review\",\"learningResourceType\":\"Tutorial\",\"programmingLanguage\":\"Svelte\",\"inLanguage\":\"en\",\"isAccessibleForFree\":true,\"teaches\":\"SEO and meta tags in Svelte - Cheat Sheet \u0026 Quick Revision\",\"provider\":{\"@type\":\"Organization\",\"url\":\"https://leyaa.ai\"},\"educationalLevel\":\"Beginner to Advanced\",\"breadcrumb\":{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\""])</script><script>self.__next_f.push([1,":\"https://leyaa.ai\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"SEO and meta tags in Svelte - Cheat Sheet \u0026 Quick Revision\",\"item\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Quick Review\",\"item\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/review\"}]}}"])</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\":\"review\",\"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\":false},{\"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\":true}],\"isLoggedIn\":false,\"seoH1\":\"SEO and meta tags in Svelte - Cheat Sheet \u0026 Quick Revision\",\"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\":{\"RMC\":{\"concept\":\"SEO and meta tags\",\"mode\":\"RMC_v4.2\",\"language\":\"svelte\",\"content_type\":\"Frameworks \u0026 Libraries\",\"flashcards\":[{\"id\":\"f1\",\"front\":\"What is the purpose of meta tags in a web page?\",\"back\":\"Meta tags provide metadata about the web page, such as description, keywords, and author. They help search engines understand the page content and improve SEO.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"meta tags\"]},{\"id\":\"f2\",\"front\":\"How do you add meta tags in a Svelte component?\",\"back\":\"You add meta tags inside the \u003csvelte:head\u003e element in a Svelte component. This ensures the tags are included in the HTML head section.\",\"difficulty\":\"beginner\",\"tags\":[\"Svelte\",\"meta tags\"]},{\"id\":\"f3\",\"front\":\"Why is the \u003ctitle\u003e tag important for SEO?\",\"back\":\"The \u003ctitle\u003e tag sets the page title shown in browser tabs and search engine results. It helps users and search engines understand the page topic.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"title tag\"]},{\"id\":\"f4\",\"front\":\"What is the role of the \u003cmeta name=\\\"description\\\"\u003e tag?\",\"back\":\"It provides a short summary of the page content. Search engines often show this description in search results, influencing click rates.\",\"difficulty\":\"beginner\",\"tags\":[\"SEO\",\"meta description\"]},{\"id\":\"f5\",\"front\":\"How can you make meta tags dynamic in Svelte?\",\"back\":\"You can use reactive variables inside \u003csvelte:head\u003e to update meta tags based on component state or props, allowing SEO info to change per page or content.\",\"difficulty\":\"intermediate\",\"tags\":[\"Svelte\",\"dynamic meta tags\"]}],\"micro_quiz\":[{\"id\":\"mq1\",\"question\":\"Where do you place meta tags in a Svelte component?\",\"options\":{\"A\":\"Inside \u003cscript\u003e\",\"B\":\"Inside \u003csvelte:head\u003e\",\"C\":\"Inside \u003cstyle\u003e\",\"D\":\"Inside \u003cmain\u003e\"},\"correct_answer\":[\"B\"],\"explanation\":\"Meta tags belong in the \u003csvelte:head\u003e element to be included in the HTML head.\"},{\"id\":\"mq2\",\"question\":\"Which meta tag helps improve search engine snippets with a summary?\",\"options\":{\"A\":\"\u003cmeta name=\\\"description\\\"\u003e\",\"B\":\"\u003cmeta name=\\\"keywords\\\"\u003e\",\"C\":\"\u003cmeta charset=\\\"UTF-8\\\"\u003e\",\"D\":\"\u003cmeta name=\\\"author\\\"\u003e\"},\"correct_answer\":[\"A\"],\"explanation\":\"The description meta tag provides a summary shown in search results.\"},{\"id\":\"mq3\",\"question\":\"What does the \u003ctitle\u003e tag affect?\",\"options\":{\"A\":\"Browser tab title and search results title\",\"B\":\"Page background color\",\"C\":\"Page font size\",\"D\":\"Image alt text\"},\"correct_answer\":[\"A\"],\"explanation\":\"The \u003ctitle\u003e tag sets the text shown in browser tabs and search engine listings.\"},{\"id\":\"mq4\",\"question\":\"How can meta tags be updated dynamically in Svelte?\",\"options\":{\"A\":\"By editing the \u003cscript\u003e tag only\",\"B\":\"By changing CSS styles\",\"C\":\"By adding inline JavaScript in HTML\",\"D\":\"Using reactive variables inside \u003csvelte:head\u003e\"},\"correct_answer\":[\"D\"],\"explanation\":\"Reactive variables inside \u003csvelte:head\u003e allow meta tags to update when data changes.\"},{\"id\":\"mq5\",\"question\":\"Which of these is NOT a common meta tag for SEO?\",\"options\":{\"A\":\"\u003cmeta name=\\\"viewport\\\"\u003e\",\"B\":\"\u003cmeta name=\\\"description\\\"\u003e\",\"C\":\"\u003cmeta name=\\\"background\\\"\u003e\",\"D\":\"\u003cmeta name=\\\"robots\\\"\u003e\"},\"correct_answer\":[\"C\"],\"explanation\":\"There is no standard meta tag named 'background' for SEO.\"}],\"recall_prompts\":[{\"id\":\"rp1\",\"prompt\":\"Explain how to add SEO meta tags in a Svelte component and why it matters.\",\"expected_elements\":[\"Use \u003csvelte:head\u003e to add meta tags\",\"Include \u003ctitle\u003e and \u003cmeta name=\\\"description\\\"\u003e\",\"Helps search engines understand page content\",\"Improves search result appearance and ranking\"],\"hint\":\"Think about where HTML head content goes in Svelte.\"},{\"id\":\"rp2\",\"prompt\":\"Describe how to make meta tags dynamic in Svelte and give an example use case.\",\"expected_elements\":[\"Use reactive variables inside \u003csvelte:head\u003e\",\"Update meta tags based on component state or props\",\"Example: change page title and description per page\"],\"hint\":\"Consider how Svelte reacts to data changes.\"}],\"spaced_repetition\":{\"initial_interval_hours\":24,\"multiplier\":2.5,\"max_interval_days\":30},\"metadata\":{\"version\":\"4.2\",\"content_type\":\"framework\",\"total_flashcards\":5,\"total_quiz\":5,\"estimated_time_minutes\":5}}},\"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\":\"RMC\",\"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 Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"3\",{\"name\":\"description\",\"content\":\"Quick revision of SEO and meta tags in Svelte. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"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/review\"}],[\"$\",\"link\",\"14\",{\"rel\":\"alternate\",\"hrefLang\":\"en\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/review\"}],[\"$\",\"link\",\"15\",{\"rel\":\"alternate\",\"hrefLang\":\"x-default\",\"href\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/review\"}],[\"$\",\"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 Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:description\",\"content\":\"Quick revision of SEO and meta tags in Svelte. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"meta\",\"21\",{\"property\":\"og:url\",\"content\":\"https://leyaa.ai/codefly/learn/svelte/part-3/svelte-seo-and-meta-tags/review\"}],[\"$\",\"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 Cheat Sheet - Quick Revision\"}],[\"$\",\"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 Cheat Sheet - Quick Revision | Leyaa.ai\"}],[\"$\",\"meta\",\"32\",{\"name\":\"twitter:description\",\"content\":\"Quick revision of SEO and meta tags in Svelte. Key points, syntax summary, common mistakes, and flashcards for fast recall. Perfect for exam and interview prep.\"}],[\"$\",\"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>