vodoraslo.xyz/new-site/public/blog/meta-description-in-hugo/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Meta Description in Hugo | vodoraslo</title>
	<link rel="canonical" href="https://vodoraslo.xyz/">
	<link rel='alternate' type='application/rss+xml' title="vodoraslo RSS" href='/index.xml'>
	<link rel='stylesheet' type='text/css' href='/style.css'>
	<link rel="icon" href="/favicon.ico">
	<meta name="description" content="This step by step guide will show you how to add meta description in your own Hugo site."/>
	<meta name="keywords" content="blog">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="robots" content="index, follow">
	<meta charset="utf-8">
</head>
<body>
<main>
<header><h1 id="tag_Meta Description in Hugo">Meta Description in Hugo</h1></header>
<article>

<h2 id="adding-meta-description-in-hugo">Adding meta description in Hugo <a class="anchor" href="#adding-meta-description-in-hugo">
    <span class="spanForHeader">#</span>
</a></h2><p>I assume you are using Luke Smith&rsquo;s theme - Lugo, if you are not, you&rsquo;d have to find these files yourself (e.g. search using vscode).</p>
<h3 id="setting-a-global-meta-description">Setting a global meta description <a class="anchor" href="#setting-a-global-meta-description">
    <span class="spanForHeader">#</span>
</a></h3><ol>
<li>Locate your config.toml or config.yaml file</li>
<li>Add the following line inside it</li>
</ol>
<p>For config.toml</p>
<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">[</span><span style="color:#c9c9c9">params</span><span style="color:#56b6c2">]</span><span style="color:#c9c9c9">
</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">  </span><span style="color:#c9c9c9">description</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">=</span><span style="color:#c9c9c9"> </span><span style="color:#82cc6a">&#34;The global meta description of your website&#34;</span><span style="color:#c9c9c9">
</span></span></span></code></pre></div><p>For config.yaml</p>
<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#bc74c4">params</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9">
</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">  </span><span style="color:#bc74c4">description</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#c9c9c9">The global meta description of your website</span><span style="color:#c9c9c9">
</span></span></span></code></pre></div><p>It won&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">
    <span class="spanForHeader">#</span>
</a></h3><ol>
<li>Locate baseof.html</li>
<li>Add or change the meta description line with the following</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">&lt;</span><span style="color:#bc74c4">meta</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">name</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">&#34;description&#34;</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">content</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">&#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&#34;</span><span style="color:#56b6c2">/&gt;</span><span style="color:#c9c9c9">
</span></span></span></code></pre></div><p>And now if you start your Hugo server locally with <code>hugo serve --noHTTPCache</code> and you right click on your page -&gt; View Page Source -&gt; Search for the meta description tag. It should match what you left in the config file.</p>
<h3 id="replacing-the-global-description-with-a-custom-one">Replacing the global description with a custom one <a class="anchor" href="#replacing-the-global-description-with-a-custom-one">
    <span class="spanForHeader">#</span>
</a></h3><ol>
<li>Have a markdown file ready</li>
<li>In the preamble, add</li>
</ol>
<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">---</span><span style="color:#c9c9c9">
</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#bc74c4">description</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#82cc6a">&#34;Your custom description for this page&#34;</span><span style="color:#c9c9c9">
</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#c9c9c9">---</span><span style="color:#c9c9c9">
</span></span></span></code></pre></div><p>Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!</p>


<div id="nextprev">
<a href="/blog/multiple-index-pages-in-hugo/"><div id="prevart">Previous:<br>Multiple Index Pages in Hugo</div></a>
<a href="/blog/recover-lost-anki-streak/"><div id="nextart">Next:<br>Recover Lost Anki Streak</div></a>
</div>
<div style="clear:both" class=taglist>
            Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]
        </div>
<br>
</article>
</main>

<footer>
	<a href="https://vodoraslo.xyz/">Homepage</a> <div><a href="/index.xml"><img src="/rss.svg" style="max-height:1.5em" alt="RSS Feed" title="Subscribe via RSS for updates."></a></div> 
</footer>

</body>
</html>
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<title>Meta Description in Hugo \| vodoraslo</title>`
			`<link rel="canonical" href="https://vodoraslo.xyz/">`
			`<link rel='alternate' type='application/rss+xml' title="vodoraslo RSS" href='/index.xml'>`
			`<link rel='stylesheet' type='text/css' href='/style.css'>`
			`<link rel="icon" href="/favicon.ico">`
			`<meta name="description" content="This step by step guide will show you how to add meta description in your own Hugo site."/>`
			`<meta name="keywords" content="blog">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
			`<meta name="robots" content="index, follow">`
			`<meta charset="utf-8">`
			`</head>`
			`<body>`
			`<main>`
			`<header><h1 id="tag_Meta Description in Hugo">Meta Description in Hugo</h1></header>`
			`<article>`

add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`<h2 id="adding-meta-description-in-hugo">Adding meta description in Hugo <a class="anchor" href="#adding-meta-description-in-hugo">`
forgot "hugo" 2023-03-31 20:06:39 +02:00			`<span class="spanForHeader">#</span>`
add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`</a></h2><p>I assume you are using Luke Smith’s theme - Lugo, if you are not, you’d have to find these files yourself (e.g. search using vscode).</p>`
			`<h3 id="setting-a-global-meta-description">Setting a global meta description <a class="anchor" href="#setting-a-global-meta-description">`
forgot "hugo" 2023-03-31 20:06:39 +02:00			`<span class="spanForHeader">#</span>`
add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`</a></h3><ol>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`<li>Locate your config.toml or config.yaml file</li>`
			`<li>Add the following line inside it</li>`
			`</ol>`
			`<p>For config.toml</p>`
update styling on syntax highlights 2023-04-08 20:49:05 +02:00			`<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-toml" data-lang="toml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2">[</span><span style="color:#c9c9c9">params</span><span style="color:#56b6c2">]</span><span style="color:#c9c9c9">`
			`</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"> </span><span style="color:#c9c9c9">description</span><span style="color:#c9c9c9"> </span><span style="color:#56b6c2">=</span><span style="color:#c9c9c9"> </span><span style="color:#82cc6a">"The global meta description of your website"</span><span style="color:#c9c9c9">`
			`</span></span></span></code></pre></div><p>For config.yaml</p>`
			`<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#bc74c4">params</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9">`
			`</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">description</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#c9c9c9">The global meta description of your website</span><span style="color:#c9c9c9">`
			`</span></span></span></code></pre></div><p>It won’t work just yet because you have to update the <code>baseof.html</code> file.</p>`
add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file <a class="anchor" href="#updating-the-baseofhtml-file">`
forgot "hugo" 2023-03-31 20:06:39 +02:00			`<span class="spanForHeader">#</span>`
add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`</a></h3><ol>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`<li>Locate baseof.html</li>`
			`<li>Add or change the meta description line with the following</li>`
			`</ol>`
update styling on syntax highlights 2023-04-08 20:49:05 +02:00			<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#56b6c2"><</span><span style="color:#bc74c4">meta</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">name</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">"description"</span><span style="color:#c9c9c9"> </span><span style="color:#bc74c4">content</span><span style="color:#bc74c4">=</span><span style="color:#82cc6a">"{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"</span><span style="color:#56b6c2">/></span><span style="color:#c9c9c9">
			`</span></span></span></code></pre></div><p>And now if you start your Hugo server locally with <code>hugo serve --noHTTPCache</code> and you right click on your page -> View Page Source -> Search for the meta description tag. It should match what you left in the config file.</p>`
add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`<h3 id="replacing-the-global-description-with-a-custom-one">Replacing the global description with a custom one <a class="anchor" href="#replacing-the-global-description-with-a-custom-one">`
forgot "hugo" 2023-03-31 20:06:39 +02:00			`<span class="spanForHeader">#</span>`
add table of contents (premable "toc: true", scuffed 2023-04-01 14:39:34 +02:00			`</a></h3><ol>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`<li>Have a markdown file ready</li>`
			`<li>In the preamble, add</li>`
			`</ol>`
update styling on syntax highlights 2023-04-08 20:49:05 +02:00			`<div class="highlight"><pre tabindex="0" style="color:#c9c9c9color: #282c34;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-yaml" data-lang="yaml"><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9">---</span><span style="color:#c9c9c9">`
			`</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#bc74c4">description</span><span style="color:#56b6c2">:</span><span style="color:#c9c9c9"> </span><span style="color:#82cc6a">"Your custom description for this page"</span><span style="color:#c9c9c9">`
			`</span></span></span><span style="display:flex;color:#c9c9c9"><span style="color:#c9c9c9"><span style="color:#c9c9c9"></span><span style="color:#c9c9c9">---</span><span style="color:#c9c9c9">`
			`</span></span></span></code></pre></div><p>Following these steps would guarantee that you have a meta description for everypage with the ability for creating a custom one whenever you need it!</p>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00

			`<div id="nextprev">`
			`<a href="/blog/multiple-index-pages-in-hugo/"><div id="prevart">Previous:<br>Multiple Index Pages in Hugo</div></a>`
added new blog entry on recovering a lost streak in anki 2023-01-12 20:40:05 +01:00			`<a href="/blog/recover-lost-anki-streak/"><div id="nextart">Next:<br>Recover Lost Anki Streak</div></a>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`</div>`
			`<div style="clear:both" class=taglist>`
			`Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]`
			`</div>`
remove one br from tags and footer 2023-04-03 19:25:32 +02:00			`<br>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`</article>`
			`</main>`

			`<footer>`
update footer rss 2023-04-03 19:17:09 +02:00			`<a href="https://vodoraslo.xyz/">Homepage</a> <div><a href="/index.xml"><img src="/rss.svg" style="max-height:1.5em" alt="RSS Feed" title="Subscribe via RSS for updates."></a></div>`
added meta descriptions - im a fucking godHolyShit new blog post with explanation of how to add meta description 2023-01-04 22:09:59 +01:00			`</footer>`

			`</body>`
			`</html>`