3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-12 15:52:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): default canonical urls (#4109)

Browse source
This commit is contained in:
Sébastien Lorber 2021-01-28 10:16:42 +01:00 • committed by GitHub
parent 6917eb950c
commit beddecb27b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

41
packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
View file

@ -16,6 +16,7 @@ import {
useTitleFormatter, useTitleFormatter,
useAlternatePageUtils, useAlternatePageUtils,
} from '@docusaurus/theme-common'; } from '@docusaurus/theme-common';
import {useLocation} from '@docusaurus/router';
// Useful for SEO // Useful for SEO
// See https://developers.google.com/search/docs/advanced/crawling/localized-versions // See https://developers.google.com/search/docs/advanced/crawling/localized-versions
@ -42,6 +43,32 @@ function AlternateLangHeaders(): JSX.Element {
); );
} }
// Default canonical url inferred from current page location pathname
function useDefaultCanonicalUrl() {
const {
siteConfig: {url: siteUrl},
} = useDocusaurusContext();
const {pathname} = useLocation();
return siteUrl + useBaseUrl(pathname);
}
function CanonicalUrlHeaders({permalink}: {permalink?: string}) {
const {
siteConfig: {url: siteUrl},
} = useDocusaurusContext();
const defaultCanonicalUrl = useDefaultCanonicalUrl();
const canonicalUrl = permalink
? `${siteUrl}${permalink}`
: defaultCanonicalUrl;
return (
<Head>
<meta property="og:url" content={canonicalUrl} />
<link rel="canonical" href={canonicalUrl} />
</Head>
);
}
export default function LayoutHead(props: Props): JSX.Element { export default function LayoutHead(props: Props): JSX.Element {
const { const {
siteConfig, siteConfig,
@ -50,16 +77,8 @@ export default function LayoutHead(props: Props): JSX.Element {
const { const {
favicon, favicon,
themeConfig: {image: defaultImage, metadatas}, themeConfig: {image: defaultImage, metadatas},
url: siteUrl,
} = siteConfig; } = siteConfig;
const { const {title, description, image, keywords, searchMetadatas} = props;
title,
description,
image,
keywords,
permalink,
searchMetadatas,
} = props;
const metaTitle = useTitleFormatter(title); const metaTitle = useTitleFormatter(title);
const metaImage = image || defaultImage; const metaImage = image || defaultImage;
const metaImageUrl = useBaseUrl(metaImage, {absolute: true}); const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
@ -91,11 +110,11 @@ export default function LayoutHead(props: Props): JSX.Element {
{metaImage && ( {metaImage && (
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} /> <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
)} )}
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
</Head> </Head>
<CanonicalUrlHeaders />
<AlternateLangHeaders /> <AlternateLangHeaders />
<SearchMetadatas <SearchMetadatas

5
website/src/pages/feedback/index.js
View file

@ -25,10 +25,7 @@ function Feedback() {
}, []); }, []);
return ( return (
<Layout <Layout title="Feedback" description="Docusaurus 2 Feedback page">
permalink="/feedback"
title="Feedback"
description="Docusaurus 2 Feedback page">
<main <main
className={clsx( className={clsx(
'container', 'container',

5
website/src/pages/index.js
View file

@ -82,10 +82,7 @@ function Home() {
const context = useDocusaurusContext(); const context = useDocusaurusContext();
const {siteConfig: {customFields = {}, tagline} = {}} = context; const {siteConfig: {customFields = {}, tagline} = {}} = context;
return ( return (
<Layout <Layout title={tagline} description={customFields.description}>
permalink="/"
title={tagline}
description={customFields.description}>
<main> <main>
<div className={styles.hero}> <div className={styles.hero}>
<div className={styles.heroInner}> <div className={styles.heroInner}>

1
website/src/pages/versions.js
View file

@ -26,7 +26,6 @@ function Version() {
return ( return (
<Layout <Layout
title="Versions" title="Versions"
permalink="/versions"
description="Docusaurus 2 Versions page listing all documented site versions"> description="Docusaurus 2 Versions page listing all documented site versions">
<main className="container margin-vert--lg"> <main className="container margin-vert--lg">
<h1>Docusaurus documentation versions</h1> <h1>Docusaurus documentation versions</h1>