Intro
Semantic Web for Hugo adds structured data and linked data into a Hugo-powered website. Through it search engines can easily read the data of a Hugo-powered website and establish relationships between objects. This enables search engines to intelligently store information about a website and use it to increase a website’s exposure in search results.
For this project, we chose to implement Schema.org’s Vocabulary by adding JSON-LD markup automatically. In areas where custom input is required, we took advantage of Hugo’s shortcode feature.
Latest version: v1.1.3: codeberg migration released on 2022-12-31.
History
- v1.1.3 “codeberg migration” releeased on 2022-12-31; changes
- v1.1.2 “Migration” released on 2022-04-02; changes
- v1.1.1 No changes; only enabled Zenodo DOI integration for the project - 2021-12-10
- v1.1.0 “ᜐᜎᜋᜆ᜔ (salamat)” released on 2021-11-15.
- v1.0.0 “감사합니다 (gamsahabnida)” released on 2021-11-08.
Features
These are the currently supported Schema.org Types:
Installation
Hugo module method
- In your
hugo
config file add the following:
[module]
[[module.imports]]
path = "codeberg.org/yelosan/hugo-semantic-web"
module:
imports:
- path: codeberg.org/yelosan/hugo-semantic-web
{
"module": {
"imports": [
{
"path": "codeberg.org/yelosan/hugo-semantic-web"
}
]
}
}
- Add this in
/layouts/_default/baseof.html
(or whichever is appropriate):
{{ $semwebcss := resources.Get "css/semweb-style.css" }}
{{ $semwebstyle := $semwebcss | resources.Minify }}
<link rel="stylesheet" href="{{ $semwebstyle.RelPermalink }}" media="all" type="text/css" />
- Initialize your project as a module:
hugo mod init your-site-name-or-link-to-repo
- Download Hugo Semantic Web module
hugo mod get codeberg.org/yelosan/hugo-semantic-web
- Proceed to the next step.
We recommend installing the Semantic Web for Hugo project by taking advantage of the Hugo module feature. This method ensures your project will always use the latest release of Semantic Web for Hugo.
Follow the steps on the right (or below if viewing in mobile).
To update
To update the Semantic Web for Hugo module run this while in your project’s root: hugo mod get -u codeberg.org/yelosan/hugo-semantic-web
git submodule method
- Add this in your
config
file:
theme = ["hugo-semantic-web", "your-theme"]
theme:
- hugo-semantic-web
- your-theme
{
"theme": [
"hugo-semantic-web",
"your-theme"
]
}
- In your project’s root folder:
git submodule add https://codeberg.org/yelosan/hugo-semantic-web.git themes/hugo-semantic-web
- Then initialize the Semantic Web for Hugo submodule:
git submodule update --init --recursive themes/hugo-semantic-web
- Add this in
/layouts/_default/baseof.html
(or whichever is appropriate):
{{ $semwebcss := resources.Get "css/semweb-style.css" }}
{{ $semwebstyle := $semwebcss | resources.Minify }}
<link rel="stylesheet" href="{{ $semwebstyle.RelPermalink }}" media="all" type="text/css" />
- Proceed to the next step.
The git submodule method is our second recommendation. This method also makes it easier to update the Semantic Web for Hugo module.
Follow the steps on the right (or below if viewing in mobile).
To update
While in your project’s root run this command: git submodule update --init --recursive themes/hugo-semantic-web
git clone method
- Add this in your
config
file:
theme = ["hugo-semantic-web", "your-theme"]
theme:
- hugo-semantic-web
- your-theme
{
"theme": [
"hugo-semantic-web",
"your-theme"
]
}
- In your project’s root folder:
git clone https://codeberg.org/yelosan/hugo-semantic-web.git themes/hugo-semantic-web
- Add this in
/layouts/_default/baseof.html
(or whichever is appropriate):
{{ $semwebcss := resources.Get "css/semweb-style.css" }}
{{ $semwebstyle := $semwebcss | resources.Minify }}
<link rel="stylesheet" href="{{ $semwebstyle.RelPermalink }}" media="all" type="text/css" />
- Proceed to the next step.
git clone is the simplest git method to add a module in your Hugo-powered project.
Follow the steps on the right (or below if viewing in mobile).
To update
In the Semantic Web for Hugo folder (cd themes/hugo-semantic-web
) run this command: git pull
.
Download method
- Add this in your
config
file:
theme = ["hugo-semantic-web", "your-theme"]
theme:
- hugo-semantic-web
- your-theme
{
"theme": [
"hugo-semantic-web",
"your-theme"
]
}
- Download the latest release here.
- Extract the file in your project’s
/themes/
folder, it should be:themes/hugo-semantic-web/
- Add this in
/layouts/_default/baseof.html
(or whichever is appropriate):
{{ $semwebcss := resources.Get "css/semweb-style.css" }}
{{ $semwebstyle := $semwebcss | resources.Minify }}
<link rel="stylesheet" href="{{ $semwebstyle.RelPermalink }}" media="all" type="text/css" />
- Proceed to the next step.
We do not recommend this method. If you prefer to lock to a specific version or include Semantic Web for Hugo in your theme distribution, the Hugo Module method can do both better.
However, if this method best suits your workflow, you can follow the steps on the right (or below if viewing in mobile).
To update
- Check regularly the project’s repository for updates.
- Download the latest release here.
- If you did not modify any of the Semantic Web for Hugo files, delete the
/hugo-semantic-web/
folder located in your project’s/themes/
folder. - Extract the latest release in
/themes/hugo-semantic-web/
.
Types
Organization
id = ""
foundingdate = ""
knowslanguages = ["", ""]
legalname = ""
slogan = ""
taxid = ""
vatid = ""
alternatenames = ["", ""]
description = ""
name = ""
sameas = ["", ""]
url = ""
[[brands]]
id = ""
logo = ""
name = ""
url = ""
iswebsite = false
[[brands]]
id = ""
logo = ""
name = ""
url = ""
iswebsite = false
[[founders]]
id = ""
name = ""
sameas = [""]
url = ""
[[founders]]
id = ""
name = ""
sameas = [""]
url = ""
[[images]]
caption = ""
url = ""
islogo = false
[[images]]
caption = ""
url = ""
islogo = false
id: ''
foundingdate: ''
knowslanguages:
- ''
- ''
legalname: ''
slogan: ''
taxid: ''
vatid: ''
alternatenames:
- ''
- ''
description: ''
name: ''
sameas:
- ''
- ''
url: ''
brands:
- id: ''
logo: ''
name: ''
url: ''
iswebsite: false
- id: ''
logo: ''
name: ''
url: ''
iswebsite: false
founders:
- id: ''
name: ''
sameas:
- ''
url: ''
- id: ''
name: ''
sameas:
- ''
url: ''
images:
- caption: ''
url: ''
islogo: false
- caption: ''
url: ''
islogo: false
{
"id": "",
"foundingdate": "",
"knowslanguages": [
"",
""
],
"legalname": "",
"slogan": "",
"taxid": "",
"vatid": "",
"alternatenames": [
"",
""
],
"description": "",
"name": "",
"sameas": [
"",
""
],
"url": "",
"brands": [
{
"id": "",
"logo": "",
"name": "",
"url": "",
"iswebsite": false
},
{
"id": "",
"logo": "",
"name": "",
"url": "",
"iswebsite": false
}
],
"founders": [
{
"id": "",
"name": "",
"sameas": [
""
],
"url": ""
},
{
"id": "",
"name": "",
"sameas": [
""
],
"url": ""
}
],
"images": [
{
"caption": "",
"url": "",
"islogo": false
},
{
"caption": "",
"url": "",
"islogo": false
}
]
}
Configurable parameters
id
: required; format:URL/
foundingdate
: optional; format:YYYY-MM-DD
knowslanguages
: optional; format: IETF BCP 47 standard, examples:en
,en-PH
,tl-Tglg
,ko
,ja
legalname
: requiredslogan
: optionaltaxid
: optionalvatid
:optionalalternatenames
: optionaldescription
requiredname
requiredsameas
: optional; URL to other profile/accountsurl
required; format:URL/
brands
optional; repeat as neededid
required; format:URL/
logo
: optional; URL to logo filename
: requiredurl
: required ifiswebsite
istrue
iswebsite
: optional, default:false
; set totrue
if Type:Brand is also a website,Type:WebSite
will be added
founders
is optional; repeat as neededid
required; format:URL/#fragment-identifier
, URL should be Type:Person’s about/bio Pagename
: requiredsameas
: optional; URL to other profile/accountsurl
: optional; format:URL/
images
is required; repeat as neededcaption
is recommendedurl
required; format:URL/
islogo
: optional; default:false
; set totrue
if image is Type:Organization’s logo
Person
Create a Person file in
/data/persons/
id = ""
additionalnames = [""]
jobtitle = [""]
knowslanguages = [""]
taxid = ""
vatid = ""
description = ""
mainentityofpage = ""
name = ""
sameas = [""]
url = ""
[[affiliations]]
id = ""
name = ""
url = ""
[[affiliations]]
id = ""
name = ""
url = ""
[[brands]]
id = ""
logo = ""
name = ""
url = ""
iswebsite = false
[[brands]]
id = ""
logo = ""
name = ""
url = ""
iswebsite = false
[spouse]
id = ""
name = ""
url = ""
[[worksfor]]
id = ""
name = ""
url = ""
[[worksfor]]
id = ""
name = ""
url = ""
[[images]]
caption = ""
url = ""
isphoto = false
[[images]]
caption = ""
url = ""
isphoto = false
id: ''
additionalnames:
- ''
jobtitle:
- ''
knowslanguages:
- ''
taxid: ''
vatid: ''
description: ''
mainentityofpage: ''
name: ''
sameas:
- ''
url: ''
affiliations:
- id: ''
name: ''
url: ''
- id: ''
name: ''
url: ''
brands:
- id: ''
logo: ''
name: ''
url: ''
iswebsite: false
- id: ''
logo: ''
name: ''
url: ''
iswebsite: false
spouse:
id: ''
name: ''
url: ''
worksfor:
- id: ''
name: ''
url: ''
- id: ''
name: ''
url: ''
images:
- caption: ''
url: ''
isphoto: false
- caption: ''
url: ''
isphoto: false
{
"id": "",
"additionalnames": [
""
],
"jobtitle": [
""
],
"knowslanguages": [
""
],
"taxid": "",
"vatid": "",
"description": "",
"mainentityofpage": "",
"name": "",
"sameas": [
""
],
"url": "",
"affiliations": [
{
"id": "",
"name": "",
"url": ""
},
{
"id": "",
"name": "",
"url": ""
}
],
"brands": [
{
"id": "",
"logo": "",
"name": "",
"url": "",
"iswebsite": false
},
{
"id": "",
"logo": "",
"name": "",
"url": "",
"iswebsite": false
}
],
"spouse": {
"id": "",
"name": "",
"url": ""
},
"worksfor": [
{
"id": "",
"name": "",
"url": ""
},
{
"id": "",
"name": "",
"url": ""
}
],
"images": [
{
"caption": "",
"url": "",
"isphoto": false
},
{
"caption": "",
"url": "",
"isphoto": false
}
]
}
Configurable parameters
id
: required; format:URL/#fragment-identifier
additionalnames
: optionaljobtitle
: optionalknowslanguages
: optional; format: IETF BCP 47 standard, examples:en
,en-PH
,tl-Tglg
,ko
,ja
taxid
: optionalvatid
: optionaldescription
: optionalmainentityofpage
: optional; format:URL/
; should be Type:Person’s about/bio pagename
: requiredsameas
: optional; URL to other profile/accountsurl
: optional; format:URL/
affiliations
: optional; repeat as neededid
: required; format:URL/
; should be the primary websitename
: requiredurl
: optional; format:URL/
brands
: optional; repeat as neededid
: required; format:URL/
; can be a non-existent URL as long as it follows the formatlogo
: optional; URL to brand or website logoname
: requiredurl
: required ifiswebsite
istrue
iswebsite
: optional, default:false
; set totrue
if Type:Brand is also a website,Type:WebSite
will be added
spouse
: optionalid
: required; format:URL/#fragment-identifier
; can be a non-existent URL as long as it follows the formatname
: requiredurl
: optional; format:URL/
worksfor
: optional; repeat as neededid
: required; format:URL/
; should be the primary websitename
: requiredurl
: optional; format:URL/
images
: requiredcaption
: recommendedurl
: requiredisphoto
: optional; default:false
; set totrue
if image is Type:Person’s photo
WebContent
There are no configurable parameters for WebContent. It relies on what is available in WebSite, WebPage, and Article.
WebSite
Add this in your
[hugo|params|config]
file:
[params]
keywords = ["", ""]
description = ""
images = ["", ""]
[params.semweb]
org = ""
isblog = false
issn = ""
acquirelicensepage = ""
copyrightholder = ""
copyrightnotice = ""
creator = ""
credittext = ""
datefirstpublished = ""
license = ""
publisher = ""
sameas = [""]
[[params.semweb.persons]]
person = ""
id = ""
name = ""
url = ""
description = ""
[[params.semweb.persons]]
person = ""
id = ""
name = ""
url = ""
description = ""
params:
keywords:
- ''
- ''
description: ''
images:
- ''
- ''
semweb:
org: ''
isblog: false
issn: ''
acquirelicensepage: ''
copyrightholder: ''
copyrightnotice: ''
creator: ''
credittext: ''
datefirstpublished: ''
license: ''
publisher: ''
sameas:
- ''
persons:
- person: ''
id: ''
name: ''
url: ''
description: ''
- person: ''
id: ''
name: ''
url: ''
description: ''
{
"params": {
"keywords": [
"",
""
],
"description": "",
"images": [
"",
""
],
"semweb": {
"org": "",
"isblog": false,
"issn": "",
"acquirelicensepage": "",
"copyrightholder": "",
"copyrightnotice": "",
"creator": "",
"credittext": "",
"datefirstpublished": "",
"license": "",
"publisher": "",
"sameas": [
""
],
"persons": [
{
"person": "",
"id": "",
"name": "",
"url": "",
"description": ""
},
{
"person": "",
"id": "",
"name": "",
"url": "",
"description": ""
}
]
}
}
}
Configurable frontmatter parameters
org
: optional; filename of Type:Organization in/data/orgs/
isblog
: optional, default:false
; set to true if website is also a webblog, TypeBlogPosting
is addedkeywords
: optional; site keywordsdescription
: recommended; site descriptionimages
: optionalissn
: optional; The International Standard Serial Number of the publication, see wikipedia:ISSNacquirelicensepage
: optional; URL to Page with information on how to acquire a license to re-use your materialscopyrightholder
: optional; format:URL/#fragment-identifier
of Type:Organization or Type:Person; fallback to Hugo defaultauthor
paramcopyrightnotice
: optional; example:Copyleft 🄯 CC-BY-SA 4.0 International by Yelosan Publishing, LLC.
creator
: optional; format:URL/#fragment-identifier
; fallback to Hugo defaultauthor
paramcredittext
: optional; example:YourOnly.One (https://youronly.one)
datefirstpublished
: optional; format:YYYY-MM-DD
; fallback to Hugo.Date
license
: optional; URL to License Pagepublisher
: optional; format:URL/
sameas
: optional; URL to other profile/accountspersons
: optional; repeat as needed;person
: optional; filename of Type:Person in/data/persons/
id
: optional ifperson
exists in/data/persons/
; format:URL/
name
: optional ifperson
exists in/data/persons/
url
: optional ifperson
exists in/data/persons/
; format:URL/
description
: optional ifperson
exists in/data/persons/
WebPage
There are no configurable parameters for Type:WebPage. The properties and related data automatically adjusts depending on the Page Kind.
Article
frontmatter parameters
title = ""
description = ""
date = ""
lastmod = ""
expirydate = ""
categories = ["", ""]
tags = ["", ""]
keywords = ["", ""]
images = ["", ""]
videos = ["", ""]
license = ""
acquirelicensepage = ""
[[author]]
person = ""
id = ""
name = ""
sameas = ""
url = ""
[[author]]
person = ""
id = ""
name = ""
sameas = ""
url = ""
title: ''
description: ''
date: ''
lastmod: ''
expirydate: ''
categories:
- ''
- ''
tags:
- ''
- ''
keywords:
- ''
- ''
images:
- ''
- ''
videos:
- ''
- ''
license: ''
acquirelicensepage: ''
author:
- person: ''
id: ''
name: ''
sameas: ''
url: ''
- person: ''
id: ''
name: ''
sameas: ''
url: ''
{
"title": "",
"description": "",
"date": "",
"lastmod": "",
"expirydate": "",
"categories": [
"",
""
],
"tags": [
"",
""
],
"keywords": [
"",
""
],
"images": [
"",
""
],
"videos": [
"",
""
],
"license": "",
"acquirelicensepage": "",
"author": [
{
"person": "",
"id": "",
"name": "",
"sameas": "",
"url": ""
},
{
"person": "",
"id": "",
"name": "",
"sameas": "",
"url": ""
}
]
}
Configurable frontmatter parameters
Listed are only the parameters which are useful for building Semantic Web and Linked Data. There are other default Hugo frontmatter parameters which are required, recommended, or optional.
title
: required; default Hugo frontmatter paramdescription
: recommended; default Hugo frontmatter paramdate
: required; default Hugo frontmatter param; ISO8601 format, examples:2021-01-01
,2021-01-01T00:00:00
,2021-01-01T00:00:00+08:00
lastmod
: recommended if the article was significantly changed; ISO8601 format, examples:2021-01-01
,2021-01-01T00:00:00
,2021-01-01T00:00:00+08:00
expirydate
: recommended if the article information is no longer valid in the present time; ISO8601 format, examples:2021-01-01
,2021-01-01T00:00:00
,2021-01-01T00:00:00+08:00
categories
,tags
,keywords
: optional; default Hugo frontmatter param; comment (#) or delete when not in useimages
,videos
: recommended if theimage
and/orvideo
shortcodes were used, see: link images to article and link-videos-to-article for more information and exampleslicense
: optional; fallback:config
param; URL to License legal codoacquirelicensepage
: optional; fallback:config
param; URL where information on how to re-use your materials can be foundauthor
: optional, if not set in frontmatter it will fallback to the author/person set in yourconfig
file; repeat as neededperson
: filename of Type:Person in/data/persons/
id
: optional ifperson
exists/data/persons/
; format:URL/#fragment-identifier
name
optional ifperson
exists in/data/persons/
sameas
: optional; URL to other profile/accountsurl
: optional; format:URL/
; URL to author’s homepage
BlogPosting
This Type relies on the isblog
parameter in your config
file. See Type: WebSite above for information.
ImageObject
This Type takes advantage of Hugo’s shortcode feature. We created a new shortcode called image
.
The image
shortcode uses the style from Embed Responsively. This means that the images will use 100% of box it is contained in and when the view is smaller, it will adjust.
Aside:
- There are two ways to add Type:ImageObject support—frontmatter and shortcode—the latter is simpler for everyone in the long-run.
- In addition, the initial approach for shortcode was to upgrade Hugo’s built-in
figure
shortcode, however, this may cause compatibility issues with existing projects and themes.
{{< image >}}
shortcode
{{< image
height=""
width=""
class=""
style=""
type=""
isrepresentativeofpage=false
src=""
link=""
linkrel="noopener"
thumbnailurl=""
title=""
caption=""
alt=""
embeddedtextcaption=""
inlanguage=""
datecreated=""
datepublished=""
objheight=""
objwidth=""
infoalign=""
licensecode=""
licenseurl=""
licensename=""
acquirelicensepage=""
copyrightnotice=""
credittext=""
attribto=""
attriburl=""
attribrel="noopener"
cc0country=""
cc0countrycode=""
cc0countryurl=""
contentloc=""
contentlocurl=""
contentlocrel="noopener external"
contentreferencetime=""
>}}
Configurable parameters
height
andwidth
: optional; used to control the height and width of the object when displayed/renderedclass
: optional, default:obj_center
; ifheight
and/orwidth
is set, setclass
to position the object. Other values are:obj_left
,obj_right
,obj_floatleft
,obj_floatright
, or your_custom_class; useclass="floatclear"
to clear float if neededstyle
: optional; an alternative to creating a newclass
; example: in this documentation themestyle="display: table-cell"
is better than a newclass
since it will only be used for a few demo objectstype
: optional, default:image
; change toimagecoverattrib
if needed (see: image Bonus)isrepresentativeofpage
: optional, default:false
; set to true if the image represents the articlesrc
: required; URL of the image file; not needed intype="imagecoverattrib"
link
: optional; where the image links to when clickedlinkrel
: optional;rel
attribute of thelink
; change if needed, for example:me noopener external
thumbnailurl
: optional; URL to the thumbnail imagetitle
: required; formal title of the imagecaption
: recommended; caption or description of the imagealt
: optional;alt
attribute of the image; fallback:caption
thentitle
embeddedtextcaption
: optional; text shown in the image, useful for memesinlanguage
: optional; format: IETF BCP 47 standard, examples:en
,en-PH
,tl-Tglg
,ko
,ja
; when there is text in the image, usually in memesdatecreated
: recommended, optional if same asdatepublished
; format:YYYY-MM-DD
;datepublished
: recommended; format:YYYY-MM-DD
objheight
: optional; actual height of the objectobjwidth
: optional; actual width of the objectinfoalign
: optional, default:txt_center
; text alignment for the information section. Other values are:txt_justify
,txt_left
,txt_right
licensecode
: recommended; a flag to determine which Copyright notice to use. Available built-in values are:allrightsreserved
: defaultpublicdomain
: for works already in the public domaincc0
: for your own works you want to release in the public domain; requirescc0country
,cc0countrycode
,cc0countryurl
- if any value is entered,
licenseurl
andlicensename
are required. Examples:ccby4
,gfdl
,anything
licenseurl
: required if any value inlicensecode
; URL to the License’s Legal page. Examples:https://creativecommons.org/licenses/by/4.0/
,https://www.gnu.org/licenses/fdl-1.3.en.html
licensename
: required if any value inlicensecode
, default:All Rights Reserved
; name of the License. Examples:Creative Commons Attribution 4.0 International
,GNU Free Documentation License 1.3
acquirelicensepage
: recommended; URL to where information on how to get a license to use the imagecopyrightnotice
: optional; example: Copyleft 🄯 CC-BY-SA 4.0 International by YourOnly.Onecredittext
: optional; example: YourOnly.One (https://youronly.one)attribto
: required; to whom to attributeattriburl
: optional; URL toattribto
attribrel
: optional;rel
attribute forattriburl
cc0country
: required iflicensecode="cc0"
; example:Philippines
,South Korea
,Japan
cc0countrycode
: required iflicensecode="cc0"
; should be ISO3166 code, example:PH
,KR
,JP
cc0countryurl
: required iflicensecode="cc0"
; tip: official government or tourism website, or Wikipedia articlecontentloc
: recommended for photos; location of the content shown in the photocontentlocurl
: recommended for photos; URL of the location shown in the photo; tip: official website or Wikipedia articlecontentlocrel
: optional;rel
attribute forcontentlocurl
contentreferencetime
: optional; ISO8601 format, examples:2021-01-01
,2021-01-01T00:00:00
,2021-01-01T00:00:00+08:00
; if the photo is about a specific moment in time
Link images to Article
To establish a relationship between Type:ImageObject and Type:Article, add the source URL of the image(s) in the article’s frontmatter, use Hugo’s default: images = ["", ""]
.
For example: images = ["https://rsc.youronly.one/img/y/Yuki_flag-300h.webp", "https://img.youronly.one/works/Yellow_Bell-02-CC_By-SA_4.0-s.webp"]
.
It is best to keep the old URLs and redirect it to the new host, or run a mass edit against the existing articles. How to do either of the aforementioned options is outside the scope of this project and documentation.
Sample #1: Basic images
Switching existing posts from Hugo built-in figure
to Semantic Web for Hugo image
shortcode—without adding new parameters—will look like this:
{{< image
class="semwebdemostyle"
src="https://rsc.youronly.one/img/y/Yuki_flag-300h.webp"
link="https://im.youronly.one/yuki/"
alt="ALT"
title="TITLE"
caption="CAPTION"
attr="ATTRIBUTION"
attrlink="https://youronly.one"
>}}
Wondering why there is a class="semwebdemostyle"
in the above sample image? We are mimicking the built-in figure
shortcode, as explained above, and we need to add display: table-cell
to render the image properly in this documentation theme.
Sample #2: Rich images
This is a sample of an image
shortcode with additional parameters useful for building Semantic Web and Linked Data.
{{< image
style="display: table-cell;"
isrepresentativeofpage=false
src="https://img.youronly.one/works/Yellow_Bell-02-CC_By-SA_4.0-s.webp"
link="https://im.youronly.one/yuki/photography/the-yellow-bells-of-piddig-2021225/"
linkrel="noopener external"
title="Allamanda cathartica or Yellow Bell"
datecreated="2018-05-19"
datepublished="2020-08-13"
licensecode="ccbysa4"
licenseurl="https://creativecommons.org/licenses/by-sa/4.0/"
licensename="Creative Commons Attribution-ShareAlike 4.0 International"
acquirelicensepage="https://im.youronly.one/p/legal-notice/"
attribto="I'M YourOnly.One"
attriburl="https://im.youronly.one/"
attribrel="noopener external"
contentloc="Piddig, Ilocos Norte, Philippines"
contentlocurl="https://en.wikipedia.org/wiki/Piddig"
contentlocrel="noopener external"
contentreferencetime="2018-05-19"
>}}
Bonus: cover image
{{< image
style="display: table-cell;"
type="imagecoverattrib"
link="https://img.youronly.one/works/Sunflower_in_the_City-03-Nokia3_macro-20180409_150647-s.webp"
linkrel="noopener external"
title="Sunflower in the City"
licensecode="ccbysa4"
licenseurl="https://creativecommons.org/licenses/by-sa/4.0/"
licensename="Creative Commons-Attribution-ShareAlike 4.0 International"
acquirelicensepage="https://im.youronly.one/p/legal-notice/"
attribto="I'M YourOnly.One"
attriburl="https://im.youronly.one/"
attribrel="noopener external"
>}}
The image
shortcode includes an option to give attribution for the article’s cover image separately, simply add the image
shortcode at the end of an article’s file with the type
set to imagecoverattrib
.
It will look like this:
VideoObject
This Type takes advantage of Hugo’s shortcode feature. The {{< video >}}
shortcode is included in Semantic Web for Hugo with support for YouTube and Vimeo, and Hugo’s Privacy Config.
{{< video >}}
shortcode
{{< video
height=""
width=""
class=""
style=""
platform=""
id=""
linkrel="noopener external"
isplaylist=false
isloop=false
starttime=""
endtime=""
title=""
caption=""
inlanguage=""
datecreated=""
datepublished=""
director=""
musicby=""
objframesize=""
objquality=""
objheight=""
objwidth=""
infoalign=""
licensecode=""
licenseurl=""
licensename=""
acquirelicensepage=""
copyrightnotice=""
credittext=""
attribto=""
attriburl=""
attribrel="noopener external"
cc0country=""
cc0countrycode=""
cc0countryurl=""
contentloc=""
contentlocurl=""
contentlocrel="noopener external"
contentreferencetime=""
>}}
Configurable parameters
height
andwidth
: optional; used to control the height and width of the object when displayed/renderedclass
: optional, default:obj_center
; ifheight
and/orwidth
is set, setclass
to position the object. Other values are:obj_left
,obj_right
,obj_floatleft
,obj_floatright
, or your_custom_class; useclass="floatclear"
to clear float if neededstyle
: optional; an alternative to creating a newclass
; example: in this documentation themestyle="display: table-cell"
is better than a newclass
since it will only be used for a few demo objectsplatform
: optional, default:youtube
; change tovimeo
if neededid
: required; ID of the videolinkrel
: optional;rel
attribute for the video link (automatically generated); change if needed, for example:me noopener external
isplaylist
: optional, default:false
; set totrue
ifid
is a playlist; only applicable for YouTubeisloop
: optional, default:false
; set totrue
if video should loopstarttime
: optional; format: in seconds; only applicable for YouTubeendtime
: optional; format: in seconds; only applicable for YouTubetitle
: required; formal title of the videocaption
: recommended; caption or description of the videoinlanguage
: optional; format: IETF BCP 47 standard, examples:en
,en-PH
,tl-Tglg
,ko
,ja
; voice languagedatecreated
: recommended, optional if same asdatepublished
; format:YYYY-MM-DD
;datepublished
: recommended; format:YYYY-MM-DD
director
: optional; name of directormusicby
: optional; name of music composerobjframesize
: optional; actual framesize of the objectobjquality
: optional; actual quality of the objectobjheight
: optional; actual height of the objectobjwidth
: optional; actual width of the objectinfoalign
: optional, default:txt_center
; text alignment for the information section. Other values are:txt_justify
,txt_left
,txt_right
licensecode
: recommended; a flag to determine which Copyright notice to use. Available built-in values are:allrightsreserved
: defaultpublicdomain
: for works already in the public domaincc0
: for your own works you want to release in the public domain; requirescc0country
,cc0countrycode
,cc0countryurl
- if any value is entered,
licenseurl
andlicensename
are required. Examples:ccby4
,gfdl
,anything
licenseurl
: required if any value inlicensecode
; URL to the License’s Legal page. Examples:https://creativecommons.org/licenses/by/4.0/
,https://www.gnu.org/licenses/fdl-1.3.en.html
licensename
: required if any value inlicensecode
, default:All Rights Reserved
; name of the License. Examples:Creative Commons Attribution 4.0 International
,GNU Free Documentation License 1.3
attribto
: required; to whom to attributeattriburl
: optional; URL toattribto
attribrel
: optional;rel
attribute forattriburl
cc0country
: required iflicensecode="cc0"
; example:Philippines
,South Korea
,Japan
cc0countrycode
: required iflicensecode="cc0"
; should be ISO3166 code, example:PH
,KR
,JP
cc0countryurl
: required iflicensecode="cc0"
; tip: official government or tourism website, or Wikipedia articleacquirelicensepage
: recommended; URL to where information on how to get a license to use the imagecopyrightnotice
: optional; example: Copyleft 🄯 CC-BY-SA 4.0 International by YourOnly.Onecredittext
: optional; example: YourOnly.One (https://youronly.one)contentloc
: recommended; location of the content shown in the videocontentlocurl
: recommended; URL of the location shown in the video; tip: official website or Wikipedia articlecontentlocrel
: optional;rel
attribute forcontentlocurl
contentreferencetime
: optional; ISO8601 format, examples:2021-01-01
,2021-01-01T00:00:00
,2021-01-01T00:00:00+08:00
; if the video is about a specific moment in time
Link videos to Article
To create a relationship between Type:VideoObject and Type:Article, add the URL of the video(s) in the article’s frontmatter, use Hugo’s videos = ["", ""]
. If any, remove all other parameters in the URL, it should only contain the video host’s domain name and the video’s ID.
For example:
- YouTube:
https://www.youtube.com/watch?v=OM6XIICm_qo
- Vimeo:
https://vimeo.com/601088734
Sample #1: YouTube
A sample YouTube embed with Hugo’s Privacy Config enabled.
{{< video
style="display: table-cell;"
id="OM6XIICm_qo"
linkrel="noopener external"
title="Tim Berners-Lee: The next Web of open, linked data"
caption="20 years ago, Tim Berners-Lee invented the World Wide Web. For his next project, he's building a web for open, linked data that could do for numbers what the Web did for words, pictures, video: unlock our data and reframe the way we use it together."
inlanguage="en"
datepublished="2009-03-13"
licensecode="allrightsreserved"
attribto="TED"
attriburl="https://www.youtube.com/channel/UCAuUUnT6oDeKwE6v1NGQxug"
attribrel="noopener external"
>}}
Sample #2: Vimeo
A Vimeo embed with Hugo’s Privacy Config enabled.
{{< video
style="display: table-cell;"
platform="vimeo"
id="601088734"
linkrel="noopener external"
title="The Wild: Capturing Our Planet in Dolby Vision"
caption="The Wild is a short film inspired by the idea that we need to co-exist and protect nature. It's Noah Beschen's journey through our beautiful world captured and shared with the crisp clarity and vibrancy of Dolby Vision. Because every moment should look like this."
inlanguage="en"
datepublished="2021-09-09"
licensecode="allrightsreserved"
attribto="Aaron Lieber"
attriburl="https://vimeo.com/lieberfilms"
attribrel="noopener external"
>}}
Contribute
You can contribute to the project via our Codeberg repo: https://codeberg.org/yelosan/hugo-semantic-web.
You can also help with our documentation via our Codeberg repo: https://codeberg.org/yelosan/hugo-semantic-web-docs.
Contact Us
Bugs and Suggestions
Please file a bug report and suggest new features in our project’s Codeberg tracker: https://codeberg.org/yelosan/hugo-semantic-web/issues.
Documentation
For documentation improvements, file it in our documentation Codeberg issues tracker: https://codeberg.org/yelosan/hugo-semantic-web-docs/issues