2021-07-07 07:53:40 +00:00
<!DOCTYPE html>
2022-04-30 12:42:22 +00:00
< html lang = "en-us" > < title > Open graph protocol | More Contentful< / title >
2021-07-07 07:53:40 +00:00
2022-05-01 12:40:36 +00:00
< link rel = "stylesheet" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.41ddef3aef88d6e34f0c569ba91d7523fc7b1fa10989de08e9ef90b031339757.css" / > < meta name = "generator" content = "Hugo 0.96.0" / >
2021-07-07 07:53:40 +00:00
< meta charset = "utf-8" >
< meta name = "author" content = "John Doe" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< meta name = "referrer" content = "no-referrer" / >
< meta name = "description" content = "Next up , we ’ re 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 " _internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’ < meta name = "twitter:card" content = "summary" / >
< meta name = "twitter:title" content = "Open graph protocol" / >
< meta name = "twitter:description" content = "Next up , we ’ re 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 " _internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’
< meta property = "og:title" content = "Open graph protocol" / >
< meta property = "og:description" content = "Next up , we ’ re 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 " _internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’
< meta property = "og:type" content = "article" / >
2022-04-30 13:04:28 +00:00
< meta property = "og:url" content = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/open-graph-protocol/" / > < meta property = "article:section" content = "recipes" / >
2021-07-07 07:53:40 +00:00
< meta property = "article:published_time" content = "2020-10-20T20:35:39+08:00" / >
2022-05-04 04:44:15 +00:00
< meta property = "article:modified_time" content = "2022-05-04T12:42:09+08:00" / >
2022-05-01 12:40:36 +00:00
< meta itemprop = "name" content = "Open graph protocol" >
< meta itemprop = "description" content = "Next up , we ’ re 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 " _internal/opengraph.html" . -}} somewhere in your own copy. (For reference, here’ < meta itemprop = "datePublished" content = "2020-10-20T20:35:39+08:00" / >
2022-05-04 04:44:15 +00:00
< meta itemprop = "dateModified" content = "2022-05-04T12:42:09+08:00" / >
2022-05-01 12:40:36 +00:00
< meta itemprop = "wordCount" content = "98" >
< meta itemprop = "keywords" content = "seo,social media," / > < link rel = "canonical" type = "text/html" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/open-graph-protocol/" / >
2021-07-07 07:53:40 +00:00
< script >
let theme = window.localStorage.getItem('theme');
if (theme) {
document.documentElement.dataset.theme = theme;
}
< / script >
< body >
2022-04-30 12:42:22 +00:00
< div class = "site__theme-btn" aria-label = "Theme toggle" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/color-swatch.svg#color-swatch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-04-30 12:42:22 +00:00
< div class = "site__theme-dropdown" >
< div class = "site__theme-dropdown-list" >
< div class = "site__theme-item"
data-theme="Default Dark"
data-theme-dark
>Dark< / div >
< div class = "site__theme-item"
data-theme="Default Light"
data-theme-light
>Light< / div >
< div class = "site__theme-item"
data-theme="Dracula"
>Dracula< / div >
< div class = "site__theme-item"
data-theme="Nord"
>Nord< / div >
< div class = "site__theme-item"
data-theme="Solarized Dark"
>Solarized Dark< / div >
< div class = "site__theme-item"
data-theme="Solarized Light"
>Solarized Light< / div >
< div class = "site__theme-item" data-theme-system >
OS default
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
2021-07-07 07:53:40 +00:00
< / div >
2022-04-30 12:42:22 +00:00
< / div >
< script defer >
const themeDropdown = document.querySelector('.site__theme-btn');
2021-07-07 07:53:40 +00:00
themeDropdown.addEventListener('click', (event) => {
const { target } = event;
if (target.classList.contains("site__theme-item")) {
if (target.dataset.theme) {
theme = target.dataset.theme;
window.localStorage.setItem("theme", theme);
document.documentElement.dataset.theme = theme;
} else {
window.localStorage.removeItem("theme");
delete document.documentElement.dataset.theme;
}
}
});
2022-04-30 12:42:22 +00:00
< / script >
< nav aria-label = "Site header" >
2022-04-30 13:04:28 +00:00
< a class = "site__title" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful" > More Contentful< / a >
2021-07-07 07:53:40 +00:00
< div class = "list site__links" >
2022-04-30 13:04:28 +00:00
< a href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/about/" > About< / a >
< a href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/categories/" > Categories< / a >
< a href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/recipes/" > Recipes< / a >
< a href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/tags/" > Tags< / a >
2021-07-07 07:53:40 +00:00
< / div >
< / nav >
2022-04-30 12:42:22 +00:00
< hr >
2021-07-07 07:53:40 +00:00
< article class = "post--single" >
< header >
< h1 > Open graph protocol< / h1 >
< / header >
2022-05-01 12:40:36 +00:00
< div class = "list post__meta" > < time datetime = "2020-10-20 20:35:39 +0800 +0800" title = "Created" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/calendar.svg#calendar" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< span style = "margin-left: 0.5em;" > 2020-10-20< / span >
< / time >
2022-05-04 04:44:15 +00:00
< time datetime = "2022-05-04 12:42:09 +0800 +0800" title = "Updated" >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/refresh.svg#refresh" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2022-05-04 04:44:15 +00:00
< span style = "margin-left: 0.5em;" > 2022-05-04< / span >
2021-07-07 07:53:40 +00:00
< / time >
< / div >
2022-04-30 12:42:22 +00:00
2021-07-07 07:53:40 +00:00
< main >
< div class = "paragraph" >
< p > Next up, we’ < 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 " _internal/opengraph.html" . -}}< / code > somewhere in your own copy.
(For reference, < a href = "https://github.com/gohugoio/hugo/blob/25a6b33693992e8c6d9c35bc1e781ce3e2bca4be/tpl/tplimpl/embedded/templates/opengraph.html" > here’ < / 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 >
< hr >
< div class = "post__meta--single" >
< p data-content-publication-date = "2020-10-20 20:35:39 +0800 +0800" > Created: < time datetime = "2020-10-20" > 2020-10-20< / time > < / p >
2022-05-04 04:44:15 +00:00
< p data-content-modification-date = "2022-05-04 12:42:09 +0800 +0800" > Updated: < time datetime = "2022-05-04" > 2022-05-04< / time > < / p >
2021-07-07 07:53:40 +00:00
< / div >
< / article >
2022-04-30 12:42:22 +00:00
< hr > < footer aria-label = "Site footer" >
2021-07-07 07:53:40 +00:00
< p > < a href = "#top" > Back to top< / a > < / p >
< p > Available in other languages:
< span class = "list site__languages" >
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/en" hreflang = "en" > English< / a >
2021-07-07 07:53:40 +00:00
2022-04-30 13:04:28 +00:00
< a href = "/hugo-theme-more-contentful/tl" hreflang = "tl" > Tagalog< / a >
2021-07-07 07:53:40 +00:00
< / span >
< / p >
< ul class = "list site__socials" >
< li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/gmail" aria-label = "E-mail" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gmail.svg#gmail" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/keybase" aria-label = "Keybase" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/keybase.svg#keybase" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/devdotto" aria-label = "Dev.to" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/devdotto.svg#devdotto" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/github/" aria-label = "GitHub" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/github.svg#github" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/gitlab" aria-label = "GitLab" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/gitlab.svg#gitlab" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/lichess" aria-label = "Lichess" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/lichess.svg#lichess" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/picartodottv" aria-label = "Picarto.tv" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/picartodottv.svg#picartodottv" > < / use >
2022-04-30 12:42:22 +00:00
< / svg >
< / a >
< / li > < li >
< a class = "site__social-icon" rel = "me" href = "https://example.org/pixiv" aria-label = "Pixiv" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/pixiv.svg#pixiv" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/twitch" aria-label = "Twitch" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitch.svg#twitch" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/twitter" aria-label = "Twitter" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/twitter.svg#twitter" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < li >
2022-04-30 12:42:22 +00:00
< a class = "site__social-icon" rel = "me" href = "https://example.org/youtube" aria-label = "YouTube" >
< svg class = "icon" >
2022-04-30 13:04:28 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/brand/youtube.svg#youtube" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
< / a >
< / li > < / ul >
2022-04-30 12:42:22 +00:00
< p > © 2022 More Contentful< / p >
2021-07-07 07:53:40 +00:00
< / footer >
< / body >
< / html >
