feat(seo): head content is configurable per pages

georges-gomes commented 2 years ago

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:title or twitter:title with the title of the page without the extra Title decoration
og:description or twitter:description
create a canonical for 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.

georges-gomes commented 2 years ago

Example of use -> https://github.com/vuejs/vitepress/pull/588/files#diff-3def678deb1b1d5a53948eb8491817dde4dc881e032e785fc61cc93d334eefcd

georges-gomes commented 2 years ago

fixes #551

georges-gomes commented 1 year ago

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

kiaking commented 1 year ago

@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 commented 1 year ago

I'll add #551 to 1.0.0 milestone so we don't forget.

georges-gomes commented 1 year ago

@kiaking Great. Happy to revamp another implementation if you come across a better idea 👍

treystout commented 1 year ago

@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?

brc-dd commented 1 year ago

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).

treystout commented 1 year ago

@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!

brc-dd commented 1 year ago

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.

georges-gomes commented 1 year ago

@brc-dd How do you feel about this PR? Should I rebase it or you are not sure about it?

georges-gomes commented 1 year ago

@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.

brc-dd commented 1 year ago

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?

georges-gomes commented 1 year ago

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?

Good question, I'm discovering transformHead :) Let me check and I will update here.

kiaking commented 1 year ago

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 👍

brc-dd commented 1 year ago

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.

vuejs / vitepress