The properties of a note are a very powerful mechanism to add metadata to a note while allowing linking to other notes.
Currently, we lose the visualisation and the linking features in the published pages.
The proposed solution is to have a way to visualise the properties on Obsidian published pages, while also enabling the linking features in the graph view.
+1!!!
I asked about this in the Discord since I expected the properties to show up as metadata for my reader. I was linked this post and would like to add a +1 to be able to show our options in Publish.
+1 this feature. Using properties like tags in search would also be awesome!
+1 the 5 character limit is annoying
I completely agree!
For your reference, here is my workaround.
publish.js
let id;
function insertMetaDates() {
const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
if (!frontmatter) {
return;
}
const created = frontmatter["created"]?.replaceAll("-", "/");
const updated = frontmatter["updated"]?.replaceAll("-", "/");
if (!created && !updated) {
return;
}
const frontmatterEl = document.querySelector(".frontmatter");
if (!frontmatterEl) {
return;
}
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div style="display: flex; justify-content: end; gap: 3px;">
<a href="#${created}" class="tag" target="_blank" rel="noopener">
Created:${created}
</a>
<a href="#${updated}" class="tag" target="_blank" rel="noopener">
Updated:${updated}
</a>
</div>
`
);
clearInterval(id);
}
const onChangeDOM = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (
mutation.type === "childList" &&
mutation.addedNodes[0]?.className === "page-header"
) {
clearInterval(id);
id = setInterval(insertMetaDates, 50);
}
}
};
const targetNode = document.querySelector(
".markdown-preview-sizer.markdown-preview-section"
);
const observer = new MutationObserver(onChangeDOM);
observer.observe(targetNode, { childList: true, subtree: true });
id = setInterval(insertMetaDates, 50);
↑
Yes this is really needed, especially for tags!
I really like that with “inline” tags, you can click on them to get a list of pages with this tag. This is lost if we move the tags to the frontmatter. It would be awesome to have a “tags” box on the side panel, e.g. below the graph view.
That’s really nice!
Could you please make something similar for tags? That looks at the list of tags from the properties and formats them in some way that allows clicking to get the list of pages with that tag (which is the way tags are formatted when they are in the body of the note). That would be awesome!
+1, I was surprised this doesn’t work with publish.
+1 Obsidian Publish has so much potential, it just needs to be more inline with desktop Obsidian.
OK. I want to give it a try 
It worked in my published site👍
let id;
function insertMetaDates() {
const frontmatter = app.site.cache.cache[app.currentFilepath].frontmatter;
if (!frontmatter) {
return;
}
const tags = frontmatter["tags"];
if (!tags) {
return;
}
const frontmatterEl = document.querySelector(".frontmatter");
if (!frontmatterEl) {
return;
}
const tagElms = tags
.map(
(tag) => `
<a href="#${tag}" class="tag" target="_blank" rel="noopener">#${tag}</a>
`
)
.join("");
frontmatterEl.insertAdjacentHTML(
"afterend",
`
<div style="display: flex; gap: 3px;">
${tagElms}
</div>
`
);
clearInterval(id);
}
const onChangeDOM = (mutationsList, observer) => {
for (let mutation of mutationsList) {
if (
mutation.type === "childList" &&
mutation.addedNodes[0]?.className === "page-header"
) {
clearInterval(id);
id = setInterval(insertMetaDates, 50);
}
}
};
const targetNode = document.querySelector(
".markdown-preview-sizer.markdown-preview-section"
);
const observer = new MutationObserver(onChangeDOM);
observer.observe(targetNode, { childList: true, subtree: true });
id = setInterval(insertMetaDates, 50);
Publish URL
Thanks! Looks good on your site! Wanted to try it but apparently JavaScript can only be used if you have a custom domain, which I don’t have yet (on my todolist 
) so I can’t test it yet.
OK just finished setting up a custom domain, and this works, thanks alot!
BTW, how did you get this nice oval frame?
Here.
a.tag {
border-left: 1px solid var(--text-muted);
border-right: 1px solid var(--text-muted);
border-top: 1px solid var(--text-muted);
border-bottom: 1px solid var(--text-muted);
}
+1 for this feature please.
Thanks!!!
+1 for this. Wild that it was released with no integration with Publish
Looks like frontmatter is already published on pages. They’re just not displayed, and are only rendered as a YAML code block, e.g.:
You can expose it for your site by adding this to your publish.css
.frontmatter {
display: block !important;
}
or you can make it page-specific by tucking it behind a cssclass like:
.my-css-class-to-display-frontmatter .frontmatter {
display: block !important;
}
Probably doesn’t match anyone’s intended UX, but I figure not a bad utility trade-off for one line of CSS.
This is a pretty good “solution” because you can customize the CSS to improve the UX. The only problem is that you can’t link to other pages, nor can you see those links in the graph