104 lines
5.8 KiB
HTML
104 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="main-background-image">
|
|
<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?v=1.0.0.7'>
|
|
<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>
|
|
<div class="main-background-image">
|
|
<body>
|
|
<main>
|
|
<header><h1 style="margin-top: 0%; padding-top: 2%;" id="tag_Meta Description in Hugo">Meta Description in Hugo</h1></header>
|
|
<hr style="color:var(--strong)"><article><article style="padding-top: 0%;">
|
|
<div class="breadcrumbs">
|
|
|
|
<nav><a href="/">vodoraslo</a> / <a href="/articles/">Articles</a> / Meta Description in Hugo</nav>
|
|
|
|
</div>
|
|
|
|
<p style="color: var(--muted_text);">Last updated: 2023年5月14日 (日)</p>
|
|
<div class="post-content"><h2 id="adding-meta-description-in-hugo">Adding meta description in Hugo<a hidden class="anchor" aria-hidden="true" href="#adding-meta-description-in-hugo">#</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 hidden class="anchor" aria-hidden="true" href="#setting-a-global-meta-description">#</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" class="chroma"><code class="language-toml" data-lang="toml"><span style="display:flex;"><span>[<span style="color:#c1abea">params</span>]
|
|
</span></span><span style="display:flex;"><span> <span style="color:#c1abea">description</span> = <span style="color:#63c381">"The global meta description of your website"</span></span></span></code></pre></div>
|
|
|
|
<p>For config.yaml</p>
|
|
|
|
|
|
|
|
<div class="highlight">
|
|
|
|
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#e06c75">params</span>:
|
|
</span></span><span style="display:flex;"><span> <span style="color:#e06c75">description</span>: <span style="color:#98c379">The global meta description of your website</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>
|
|
<h3 id="updating-the-baseofhtml-file">Updating the baseof.html file<a hidden class="anchor" aria-hidden="true" href="#updating-the-baseofhtml-file">#</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" class="chroma"><code class="language-html" data-lang="html"><span style="display:flex;"><span><<span style="color:#e06c75">meta</span> <span style="color:#b3d23c">name</span><span style="color:#c7bf54">=</span><span style="color:#98c379">"description"</span> <span style="color:#b3d23c">content</span><span style="color:#c7bf54">=</span><span style="color:#98c379">"{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}"</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>
|
|
<h3 id="replacing-the-global-description-with-a-custom-one">Replacing the global description with a custom one<a hidden class="anchor" aria-hidden="true" href="#replacing-the-global-description-with-a-custom-one">#</a></h3>
|
|
<ol>
|
|
<li>Have a markdown file ready</li>
|
|
<li>In the preamble, add</li>
|
|
</ol>
|
|
|
|
|
|
|
|
<div class="highlight">
|
|
|
|
<pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span style="display:flex;"><span><span style="color:#76a9f9">---</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#e06c75">description</span>: <span style="color:#63c381">"Your custom description for this page"</span>
|
|
</span></span><span style="display:flex;"><span><span style="color:#76a9f9">---</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 style="text-align: right;">
|
|
<a href="mailto:chad@vodoraslo.xyz?subject=Re: Meta%20Description%20in%20Hugo&body=Page in question - https%3a%2f%2fvodoraslo.xyz%2farticles%2fblog%2fmeta-description-in-hugo%2f">⏩📧 Reply via email!</a>
|
|
</div></div>
|
|
|
|
<div id="nextprev">
|
|
<a href="/articles/blog/multiple-index-pages-in-hugo/"><div id="prevart">Previous:<br>Multiple Index Pages in Hugo</div></a>
|
|
<a href="/articles/blog/recover-lost-anki-streak/"><div id="nextart">Next:<br>Recover Lost Anki Streak</div></a>
|
|
</div>
|
|
<div style="padding-top: 1.5em" class="index-links">
|
|
<div style="clear:both" class=taglist>
|
|
Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
|
|
<footer class="rssSvg">
|
|
<div style="padding-bottom: 0.7em; padding-top: 1em;" class="index-links"><a href="https://vodoraslo.xyz/">Homepage</a></div> <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>
|
|
</div>
|
|
</html>
|