feat($core): add canonical link to frontmatter #2658

d-pollard · 2020-10-12T22:27:47Z

Summary

What kind of change does this PR introduce? (check at least one)

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

Yes
No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

If adding a new feature, the PR's description includes:

A convincing reason for adding this feature
Related documents have been updated
Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

This feature introduces the ability to specify canonical in the frontmatter section on a page:

---
canonical: https://google.com
---

Which will then render the proper head HTML tag, and also keep it updated when the page changes

d-pollard · 2020-10-12T22:39:11Z

Partial resolution to #2153

adamdehaven · 2020-10-13T01:08:09Z

@d-pollard I can confirm (with your latest addition) that the frontmatter.canonical property works, and is also exposed to the extendPageData Options API, meaning it can be dynamically injected into the frontmatter 🎉

This should definitely roll out ASAP - you're awesome!

adamdehaven · 2020-10-13T01:20:13Z

@d-pollard don't forget: the docs would need to be updated for this PR as well.

Now you've got me thinking about injecting structured data in a similar way. It also would need to be updated on each route change. I wonder if I'm the only person that would like a hook in the Options API that would allow for injecting (via extendPageData) custom content/tags. In my use-case, I'd want to inject a <script> tag with JSON into the <head>, something like this:

const structuredData = {
    '@context': 'https://schema.org/',
    '@type': 'WebSite',
    name: this.meta_data.title + (this.$page.frontmatter.subtitle ? ' | ' + this.$page.frontmatter.subtitle : '') || null,
    description: this.meta_data.description || null,
    url: frontmatter.canonical,
    image: {
        '@type': 'ImageObject',
        url: this.$site.themeConfig.domain + this.$site.themeConfig.defaultImage,
    },
    '@id': frontmatter.canonical,
}

<script type="application/ld+json">{{ JSON.stringify(structuredData, null, 4) }}</script>

I'm currently doing this with a custom component; however, it is technically rendered after the DOM, meaning it isn't available when the page is scraped (before JavaScript is enabled).

d-pollard · 2020-10-13T01:29:29Z

Yeah we could definitely look into a custom hook

Typically I write the feature in it's entirety then open another PR with docs code so that if the version changes, the feature code is still introduced and I can update the docs to reflect the proper version

d-pollard · 2020-10-13T01:31:02Z

Like in this case, I have reservations about using just the keyword canonical so will probably change it to be more idiomatic (thinking canonicalLink to reflect current codebase practices)

adamdehaven · 2020-10-13T01:35:35Z

@d-pollard I almost suggested a change regarding the canonical keyword. I post content on dev.to and they actually use the YAML keyword canonical_url instead, which, I think would be good; however, since other keywords are camelCase, maybe canonicalUrl instead?

I lean towards url rather than link because link seems to reference more of the HTML <link> element itself, whereas url references the value, which is what the user would be providing in the frontmatter.

Edit: ... and definitely let me know if that custom hook for injecting other content comes about 💯

d-pollard · 2020-10-13T01:37:53Z

Yeah that makes sense, I'll make the changes probably tomorrow, and then document the feature once it's all merged in.

Doing this makes me wonder if I could also use the same pattern to introduce vue-meta in a way that's backwards compatible

d-pollard · 2020-10-13T02:01:37Z

I fibbed; I've updated the PR with the new terms; used canonicalLink for the SSR injection to reflect the HTML element it's injecting, and I've used canonicalUrl for the frontmatter value to reflect the actual use case

adamdehaven · 2020-10-13T02:04:36Z

That all looks good to me.

bencodezen

This looks epic @d-pollard! Could we just add a small note inside of the docs to surface that this is now available?

bencodezen

Thanks for the collab effort @d-pollard and @adamdehaven!

feat($core): add canonical link to frontmatter

1caa07e

d-pollard mentioned this pull request Oct 12, 2020

Set Metadata on component level #2153

Open

feat($core): add canonical link to frontmatter

9844cb4

feat($core): add canonical link to frontmatter

b6d530b

feat($core): add canonical link to frontmatter

7d6b759

feat($core): make canonical link/url more idiomatic in context

82352ed

d-pollard requested a review from bencodezen October 13, 2020 14:02

bencodezen requested changes Oct 13, 2020

View reviewed changes

feat($core): document canonical url in frontmatter

de11d8a

d-pollard requested a review from bencodezen October 13, 2020 14:18

feat($core): document canonical url in frontmatter

ca6ed2b

bencodezen approved these changes Oct 13, 2020

View reviewed changes

bencodezen merged commit ff6c51a into vuejs:master Oct 13, 2020

d-pollard deleted the feature/2020-10-12_canonical-url_dp branch October 13, 2020 16:20

adamdehaven mentioned this pull request Oct 15, 2020

New canonicalUrl frontmatter property is incorrectly mapped in ClientComputedMixin.js #2665

Closed

1 task

adarshmadrecha mentioned this pull request Oct 15, 2020

[Feature Request] Rel canonical tags lorisleiva/vuepress-plugin-seo#2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat($core): add canonical link to frontmatter #2658

feat($core): add canonical link to frontmatter #2658

d-pollard commented Oct 12, 2020 •

edited

d-pollard commented Oct 12, 2020

adamdehaven commented Oct 13, 2020

adamdehaven commented Oct 13, 2020

d-pollard commented Oct 13, 2020

d-pollard commented Oct 13, 2020 •

edited

adamdehaven commented Oct 13, 2020 •

edited

d-pollard commented Oct 13, 2020

d-pollard commented Oct 13, 2020

adamdehaven commented Oct 13, 2020

bencodezen left a comment

bencodezen left a comment

feat($core): add canonical link to frontmatter #2658

feat($core): add canonical link to frontmatter #2658

Conversation

d-pollard commented Oct 12, 2020 • edited

d-pollard commented Oct 12, 2020

adamdehaven commented Oct 13, 2020

adamdehaven commented Oct 13, 2020

d-pollard commented Oct 13, 2020

d-pollard commented Oct 13, 2020 • edited

adamdehaven commented Oct 13, 2020 • edited

d-pollard commented Oct 13, 2020

d-pollard commented Oct 13, 2020

adamdehaven commented Oct 13, 2020

bencodezen left a comment

Choose a reason for hiding this comment

bencodezen left a comment

Choose a reason for hiding this comment

d-pollard commented Oct 12, 2020 •

edited

d-pollard commented Oct 13, 2020 •

edited

adamdehaven commented Oct 13, 2020 •

edited