kurets/vodoraslo.xyz
kurets/vodoraslo.xyz
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
vodoraslo.xyz/public/articles/blog/meta-description-in-hugo/index.html

111 lines
6.4 KiB
HTML
Raw Normal View History

update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<!DOCTYPE html>
add kitty background image
2023-07-12 21:46:08 +02:00
<html lang="en" class="main-background-image">
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<head>
add gitignored draft articles, add <details> to TOC, update css for nicer looking codeblocks and footnotes now have square brackets in html like [1] [2], add makefile
2024-08-29 21:46:33 +02:00
<title>Meta Description in Hugo | vodoraslo&#39;s blog</title>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<link rel="canonical" href="https://vodoraslo.xyz/">
add gitignored draft articles, add <details> to TOC, update css for nicer looking codeblocks and footnotes now have square brackets in html like [1] [2], add makefile
2024-08-29 21:46:33 +02:00
<link rel='alternate' type='application/rss+xml' title="vodoraslo&#39;s blog RSS" href='/index.xml'>
<link rel='stylesheet' type='text/css' href='/style.css?v=1.0.0.12'>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<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>
add kitty background image
2023-07-12 21:46:08 +02:00
<div class="main-background-image">
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<body>
<main>
.
2023-07-21 17:57:40 +02:00
<header><h1 style="margin-top: 0%; padding-top: 0.5em;" id="tag_Meta Description in Hugo">Meta Description in Hugo</h1></header>
.
2023-11-04 13:03:07 +01:00
<hr style="color:var(--strong);background-color: var(--strong); border-color: var(--strong);"><article style="padding: 0% 2.5% 0% 2.5%;">
add breadcrumbs
2023-05-18 17:28:55 +02:00
<div class="breadcrumbs">
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
add new font - firacode fix breadcrumbs
2023-05-28 08:50:26 +02:00
<nav><a href="/">vodoraslo</a> /&nbsp;<a href="/articles/">Articles</a> /&nbsp;Meta Description in Hugo</nav>
add breadcrumbs
2023-05-18 17:28:55 +02:00
</div>
.
2023-07-20 20:49:09 +02:00
fix typo
2024-09-13 16:00:58 +02:00
<small><em><p style="color: var(--muted_text);">作成日: <time datetime="2023-01-04T22:52:24&#43;03:00" style="color: var(--muted_text);">2023年1月4日 (水)</time>; 最終更新日: <time datetime="2024-08-29T22:46:33&#43;03:00" style="color: var(--muted_text);">2024年8月29日 (木)</time> </p></em></small>
fix toc and last updated
2023-07-20 20:45:40 +02:00
<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>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<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 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>
add codeblock title, add css versioning
2023-05-31 17:47:54 +02:00
<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">&#34;The global meta description of your website&#34;</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&rsquo;t work just yet because you have to update the <code>baseof.html</code> file.</p>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<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>
add codeblock title, add css versioning
2023-05-31 17:47:54 +02:00
<div class="highlight">
<pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#e06c75">meta</span> <span style="color:#b3d23c">name</span><span style="color:#c7bf54">=</span><span style="color:#98c379">&#34;description&#34;</span> <span style="color:#b3d23c">content</span><span style="color:#c7bf54">=</span><span style="color:#98c379">&#34;{{ if .Page.Params.description }}{{ .Page.Params.description }}{{ else if .Summary}}{{ .Summary }}{{else}}{{ .Site.Params.description}}{{ end }}&#34;</span>/&gt;</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>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<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>
add codeblock title, add css versioning
2023-05-31 17:47:54 +02:00
<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>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
</span></span><span style="display:flex;"><span><span style="color:#e06c75">description</span>: <span style="color:#63c381">&#34;Your custom description for this page&#34;</span>
add codeblock title, add css versioning
2023-05-31 17:47:54 +02:00
</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>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
add mailto reply, add next prev & parent for hackbook
2023-07-15 13:53:02 +02:00
<div style="text-align: right;">
.
2024-08-30 22:27:10 +02:00
add mailto reply, add next prev & parent for hackbook
2023-07-15 13:53:02 +02:00
</div></div>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
add 2024 goals, fix wrong tag, fix issue with hr
2024-02-27 18:59:49 +01:00
<br>
<hr style="color:var(--strong); margin: 0; background-color: var(--strong); border-color: var(--strong);">
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
<div id="nextprev">
rework css (again)
2023-10-08 09:57:26 +02:00
<a href="/articles/blog/multiple-index-pages-in-hugo/"><div id="prevart"><i>Previous:</i><br>Multiple Index Pages in Hugo</div></a>
<a href="/articles/blog/recover-lost-anki-streak/"><div id="nextart"><i>Next:</i><br>Recover Lost Anki Streak</div></a>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
</div>
rework css (again)
2023-10-08 09:57:26 +02:00
<div ><div style="clear:both" class=taglist>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
Tags: [<a id="tag_blog" href="https://vodoraslo.xyz/tags/blog">Blog</a>]
rework css (again)
2023-10-08 09:57:26 +02:00
</div><br>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
</div>
</article>
</main>
rework css (again)
2023-10-08 09:57:26 +02:00
<footer style="padding-top: 0.5em;">
.
2024-08-30 22:27:10 +02:00
add gitignored draft articles, add <details> to TOC, update css for nicer looking codeblocks and footnotes now have square brackets in html like [1] [2], add makefile
2024-08-29 21:46:33 +02:00
<div style="padding-bottom: 0.2em; display: inline-block;"><a href="https://vodoraslo.xyz/articles" title="List of all my articles and writings.">📜 Articles</a> <strong>&bull;</strong> <a href="https://vodoraslo.xyz/library" title="My personal library.">📚 Library</a> <strong>&bull;</strong> <a href="https://wiki.vodoraslo.xyz" title="My personal Wiki page.">🌐 Wiki</a> <strong>&bull;</strong> <a href="https://vodoraslo.xyz/index.xml" title="Subscribe via RSS for updates.">📰 RSS</a><hr></div>
add links to the footer
2023-10-13 19:52:35 +02:00
.
2024-08-30 22:27:10 +02:00
add gitignored draft articles, add <details> to TOC, update css for nicer looking codeblocks and footnotes now have square brackets in html like [1] [2], add makefile
2024-08-29 21:46:33 +02:00
<div style="padding-bottom: 0.7em;" class="index-links"><a href="https://vodoraslo.xyz/" title="Return to the homepage.">🏠 Homepage</a></div>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
</footer>
</body>
add kitty background image
2023-07-12 21:46:08 +02:00
</div>
update blog and updates pages - combined into Articles
2023-05-14 13:33:48 +02:00
</html>
Reference in a new issue Copy permalink