hugo-theme-contentful/recipes/open-graph-protocol/index.html

115 lines
5.8 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en-us"><title>Open graph protocol</title>
<link rel="stylesheet" href="https://foo-dogsquared.github.io/hugo-theme-contentful/css/main.min.ac4668a81007ca38fcac8e88436ad4fa6a969ee4ce9352f52f795abf04e1624a.css" /><meta name="generator" content="Hugo 0.76.0" />
<meta charset="utf-8">
<meta name="author" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="referrer" content="no-referrer" />
<meta name="description" content="Next up, were implementing Open Graph protocol for our webpages. Commonly used for making suitable format when sharing the content on certain sites like Facebook. (Be sure to copy the head partial first in your own layout folder.)
Similar to Twitter cards, Hugo has an internal template for this. Simply add {{- template &#34;_internal/opengraph.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template." /><meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Open graph protocol"/>
<meta name="twitter:description" content="Next up, were implementing Open Graph protocol for our webpages. Commonly used for making suitable format when sharing the content on certain sites like Facebook. (Be sure to copy the head partial first in your own layout folder.)
Similar to Twitter cards, Hugo has an internal template for this. Simply add {{- template &#34;_internal/opengraph.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template."/>
<meta property="og:title" content="Open graph protocol" />
<meta property="og:description" content="Next up, were implementing Open Graph protocol for our webpages. Commonly used for making suitable format when sharing the content on certain sites like Facebook. (Be sure to copy the head partial first in your own layout folder.)
Similar to Twitter cards, Hugo has an internal template for this. Simply add {{- template &#34;_internal/opengraph.html&#34; . -}} somewhere in your own copy. (For reference, heres the source code for the internal template." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/open-graph-protocol/" />
<meta property="article:published_time" content="2020-10-20T20:35:39+08:00" />
<meta property="article:modified_time" content="2020-10-24T15:49:14+08:00" />
<link rel="canonical" type="text/html" href="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/open-graph-protocol/" />
<script>
const theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
</script>
<body><nav aria-label="Primary navigation">
<a class="site__title" href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Contentful</a>
<div class="site__links">
|
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/about/">About</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/categories/">Categories</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/recipes/">Recipes</a> |
<a href="https://foo-dogsquared.github.io/hugo-theme-contentful/tags/">Tags</a> |
</div>
<button class="site__theme-btn" aria-label="theme-toggle" onclick="const theme = window.localStorage.getItem('theme') == 'dark' ? 'light' : 'dark'; window.localStorage.setItem('theme', theme); document.documentElement.dataset.theme = theme">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12-5.373-12-12-12-12 5.373-12 12zm2 0c0-5.514 4.486-10 10-10v20c-5.514 0-10-4.486-10-10z"></path>
</svg>
</button>
</nav>
<article>
<header>
<h1>Open graph protocol</h1>
</header>
<div class="post__meta">
<p data-content-publication-date="2020-10-20 20:35:39 &#43;0800 &#43;0800">Created: <time datetime="2020-10-20">2020-10-20</time></p>
<p data-content-modification-date="2020-10-24 15:49:14 &#43;0800 &#43;0800">Updated: <time datetime="2020-10-24">2020-10-24</time></p>
</div>
<hr>
<style>
#TableOfContents:not(:empty)::before {
content: "Table of contents";
font-weight: bold;
}
</style>
<nav id="TableOfContents"></nav>
<main>
<div class="paragraph">
<p>Next up, were implementing <a href="https://opengraphprotocol.org/">Open Graph protocol</a> for our webpages.
Commonly used for making suitable format when sharing the content on certain sites like Facebook.
(Be sure to copy the <code>head</code> partial first in your own layout folder.)</p>
</div>
<div class="paragraph">
<p>Similar to Twitter cards, Hugo has <a href="https://gohugo.io/templates/internal/#open-graph">an internal template for this</a>.
Simply add <code>{{- template &#34;_internal/opengraph.html&#34; . -}}</code> somewhere in your own copy.
(For reference, <a href="https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html">heres the source code for the internal template</a>.)</p>
</div>
<div class="paragraph">
<p>If you want more control and customized version of the output, I recommend to copy the internal template and create a partial (e.g., <code>layouts/partials/opengraph.html</code>) and modify it.</p>
</div>
</main>
</article>
<hr>
<footer>
<p><a href="https://foo-dogsquared.github.io/hugo-theme-contentful/">Back to home</a></p>
</footer>
<p>Available in other languages:
<span class="site__languages">|
<a href="/hugo-theme-contentful/en">English</a> |
<a href="/hugo-theme-contentful/tl">Tagalog</a> |
</span>
</p>
<p>© 2021 Contentful</p>
</body>
</html>