feat(seo): head content is configurable per pages #588
Conversation
|
fixes #551 |
|
Hi @kiaking |
|
@georges-gomes Thanks for the PR and this is indeed cool feature. But let me think bit more deeper on this. It's super flexible and good, but maybe most of these meta should be injected automatically. From that perspective, maybe there might be simpler way to customize for users...? I don't know, but I'll think about this a bit more! |
|
I'll add #551 to 1.0.0 milestone so we don't forget. |
|
@kiaking Great. Happy to revamp another implementation if you come across a better idea 👍 |
|
|
||
| // Open Graph | ||
| ['meta', { property: 'og:type', content: 'website' }], | ||
| ['meta', { property: 'og:locale', content: lang }], |
There was a problem hiding this comment.
og:locale uses underscore instead of the BCP 47 hyphen in HTML lang to separate the subtags, so language tags like en-US should be converted to en_US.
|
@georges-gomes thank you for this PR, hoping it's merged in some form soon. Could you explain what you mean by "Page routing doesn't update head tags." Does this mean crawlers would see the right tags but developers would not? |
@treystout The tags will be there in the generated HTML (yeah, crawlers would see the right tags) but it won't be updated (client-side, in browser) when a user moves from one page to another (on reload they'll see the right tags). |
|
@brc-dd thank you for clarifying. Is the team still deciding if this PR is relevant? The only thing I can think of that would make it more expressive for end-users is ensuring @georges-gomes |
It still has sufficient context, you can access nearly everything from
The PR is obviously relevant and much demanded TBH (needs rebase though). We're thinking of implementing some more compact API though, but even in its current form the PR is cool. We'll try to get this feature landed as soon as possible. |
|
@brc-dd How do you feel about this PR? Should I rebase it or you are not sure about it? |
Sorry for the late reply, missed the notification. We are using this as a patch in production with dynamic meta tags on https://backlight.dev/docs/ and https://backlight.dev/mastery/ if you want to see it in action. |
@georges-gomes It will need rebase, but not right now. Let's merge #1339 first. Likely there will be conflicts after that. But resolving them on this PR will be easier. Also, I wanted to ask, isn't |
Good question, I'm discovering |
|
Closing due to inactivity. I think this is useful feature, though maybe we might wanna discuss in issues first to figure out the best API for it 👍 |
|
People coming to this later, please try transformHead hook. IMO it does the same thing as this PR. Let me know if I'm wrong. |
Background
This changes has been created to improve quality of meta tags in
headfor social links and SEO.A number of tags are required in
<head>....
Some of this content is page specific like title and description but also potentially images.
Currently, some of this information is filled by VitePress, some can be added to head via frontmatters
https://vitepress.vuejs.org/guide/frontmatter.html#head
But the first one has precedence to the other one and the notation is quickly very verbose.
Solution here
The solution here is to support a function in the
headconfigurationHeadConfig[] | (page: DataPage) => HeadConfig[]So every page is rendered with this function.
It let you have:
og:titleortwitter:titlewith the title of the page without the extra Title decorationog:descriptionortwitter:descriptioncanonicalfor each pageNot supported
Page routing doesn't update head tags.