2021-07-07 07:53:40 +00:00
<!DOCTYPE html>
2022-11-28 03:05:34 +00:00
< html lang = "en-us" >
< head > < title > Open graph protocol | More Contentful< / title >
2021-07-07 07:53:40 +00:00
2023-02-27 05:29:11 +00:00
< link rel = "stylesheet" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/css/main.min.f1121c040b0aa510fb90a5e6ff2389d0944483dd2515d61c36d0b599f873b72b.css" / >
2022-11-12 05:42:16 +00:00
2022-11-28 03:05:34 +00:00
< link rel = "shortcut icon" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/favicon.png" / > < 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" / >
2023-02-27 05:29:11 +00:00
< meta property = "article:modified_time" content = "2023-02-27T13:27:15+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" / >
2023-02-27 05:29:11 +00:00
< meta itemprop = "dateModified" content = "2023-02-27T13:27:15+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 >
2022-11-28 03:05:34 +00:00
< / head >
2023-02-24 13:35:28 +00:00
< body > < header aria-label = "Site header" >
2023-02-24 12:26:30 +00:00
< nav >
< a class = "site__title" href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful" > More Contentful< / a >
< div class = "list site__links" >
< 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 >
< / div >
< / nav >
< div class = "site__theme-btn" aria-label = "Theme toggle" aria-hidden = "true" >
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-10-23 16:14:26 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/swatch.svg#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 >
2022-10-23 16:14:26 +00:00
< div class = "site__theme-item"
data-theme="Gruvbox dark, hard"
>Gruvbox dark, hard< / div >
< div class = "site__theme-item"
data-theme="Gruvbox light, hard"
>Gruvbox light, hard< / div >
2022-04-30 12:42:22 +00:00
< 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 >
2022-06-13 13:51:31 +00:00
< script >
function styleTheme() {
const selectedTheme = window.localStorage.getItem("theme");
for (const el of document.querySelectorAll(".site__theme-item")) {
if (el.dataset.theme == selectedTheme) {
el.classList.add("site__theme-item--selected");
} else {
el.classList.remove("site__theme-item--selected");
}
}
}
2022-04-30 12:42:22 +00:00
const themeDropdown = document.querySelector('.site__theme-btn');
2022-06-13 13:51:31 +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;
2021-07-07 07:53:40 +00:00
}
2022-06-13 13:51:31 +00:00
}
styleTheme();
});
styleTheme();
2022-04-30 12:42:22 +00:00
< / script >
2023-02-24 12:26:30 +00:00
2023-02-24 13:35:28 +00:00
< / header >
2023-02-24 12:26:30 +00:00
< hr aria-hidden = "true" / >
< div class = "post--single" >
< main >
< article >
< header >
< h1 > Open graph protocol< / h1 >
2023-02-24 13:35:28 +00:00
< div class = "list post__meta" aria-hidden = "true" > < span >
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 >
2023-02-24 13:35:28 +00:00
< time datetime = "2020-10-20T20:35:39+08:00" title = "Created" style = "margin-left: 0.5em;" >
2020-10-20
< / time >
< / span >
< span >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
< svg class = "icon" >
2022-10-23 16:14:26 +00:00
< use href = "https://foo-dogsquared.github.io/hugo-theme-more-contentful/icons/generic/arrow-path.svg#arrow-path" > < / use >
2021-07-07 07:53:40 +00:00
< / svg >
2023-02-27 05:29:11 +00:00
< time datetime = "2023-02-27T13:27:15+08:00" title = "Updated" style = "margin-left: 0.5em;" >
2023-02-27
2023-02-24 13:35:28 +00:00
< / time >
< / span >
2021-07-07 07:53:40 +00:00
< / div >
2023-02-24 12:26:30 +00:00
< / header >
2022-04-30 12:42:22 +00:00
2023-02-24 12:26:30 +00:00
2021-07-07 07:53:40 +00:00
2023-02-24 12:26:30 +00:00
< div class = "paragraph" >
2021-07-07 07:53:40 +00:00
< 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 >
2023-02-24 12:26:30 +00:00
< / article >
2021-07-07 07:53:40 +00:00
< / main >
2023-02-24 12:26:30 +00:00
< hr aria-hidden = "true" / >
< div class = "post__meta--single" aria-hidden = "true" >
2021-07-07 07:53:40 +00:00
2023-02-24 13:35:28 +00:00
< p data-content-publication-date = "2020-10-20T20:35:39+08:00" > Created: < time datetime = "2020-10-20T20:35:39+08:00" > 2020-10-20< / time > < / p >
2021-07-07 07:53:40 +00:00
2023-02-27 05:29:11 +00:00
< p data-content-modification-date = "2023-02-27T13:27:15+08:00" > Updated: < time datetime = "2023-02-27T13:27:15+08:00" > 2023-02-27< / time > < / p >
2021-07-07 07:53:40 +00:00
< / div >
2023-02-24 12:26:30 +00:00
< / div >
2021-07-07 07:53:40 +00:00
2022-04-30 12:42:22 +00:00
2023-02-24 12:26:30 +00:00
< hr aria-hidden = "true" / > < footer aria-label = "Site footer" >
2021-07-07 07:53:40 +00:00
2022-11-22 12:06:56 +00:00
< a href = "#top" > Back to top< / a >
2021-07-07 07:53:40 +00:00
< 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-11-22 12:06:56 +00:00
2023-02-21 06:49:55 +00:00
< p > © 2023 More Contentful< / p >
2021-07-07 07:53:40 +00:00
< / footer >
< / body >
< / html >
