vitepress
vitepress copied to clipboard
vuejs
feat(seo): head content is configurable per pages
Background
This changes has been created to improve quality of meta tags in head for social links and SEO.
A number of tags are required in <head>.
- Meta for OG
- Meta for Twitter
- Canonical URL ...
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 head configuration
HeadConfig[] | (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:description- create a
canonicalfor each page - generate or link to meta images appropriatly
- add tags in frontmatters of the page and transform them into the right head tags
- dynamically change anything in the meta tags based on the page and page frontmatters
Not supported
Page routing doesn't update head tags.
Example of use -> https://github.com/vuejs/vitepress/pull/588/files#diff-3def678deb1b1d5a53948eb8491817dde4dc881e032e785fc61cc93d334eefcd
Hi @kiaking Let me know if you like that. I think this feature is better than adding individual tags support in frontmatters. We use it in production already. At your service
@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!
@kiaking Great. Happy to revamp another implementation if you come across a better idea 👍
@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?
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 getHead has sufficient context. But adding arguments to it later would be easy and backward compatible. Anything I can do to help move either this PR forward or a another approach? Meta/Head issues are stopping my team from using vitepress in production, and it seems like something almost everyone would need once hosting in production. Thank you!
The only thing I can think of that would make it more expressive for end-users is ensuring getHead has sufficient context.
It still has sufficient context, you can access nearly everything from pageData itself.
Is the team still deciding if this PR is relevant?
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?
@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?
Sorry for the late reply, missed the notification. Yes, the head tags are good at "arrival" and Google will see them. But when a user route to another page the head tags are not updated with the values of the new page. Doesn't affect Google but could be considered as "not good enough" for Vitepress.
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.
How do you feel about this PR? Should I rebase it or you are not sure about it?
@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 transformHead behaves similar to what we have in this PR?
How do you feel about this PR? Should I rebase it or you are not sure about it?
@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
transformHeadbehaves similar to what we have in this PR?
Good question, I'm discovering transformHead :) Let me check and I will update here.
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.