Skip to content

Commit ae7dd51

Browse files
emielphntmPauloMFJ
emielphntm
and
PauloMFJ
authored
add disableCanonical prop (#23)
* add disableCanonical so that canonical linking happens when path is empty * respond to feedback and update readme * update to readme formatting * rename prop readme * bump version, adjust readme * update readme again.. * updated again * Update README.md Co-authored-by: Paulo <[email protected]> * add pathUrl to og:url * update to pageurl * fix formatting * Update README.md * run fix again Co-authored-by: Paulo <[email protected]>
1 parent 8e941c0 commit ae7dd51

File tree

4 files changed

+35
-32
lines changed

4 files changed

+35
-32
lines changed

‎README.md‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -61,23 +61,23 @@ export default PageLayout;
6161
6262
### &lt;MetaHeadEmbed />
6363
64-
| Property | Type | Required | Notes |
65-
| ----------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
66-
| **render** | React.ReactNode | **Yes** | Unfortunately `react-helmet` and `next/head` are strict with how they accept meta tags. `react-helmet` doesn't support nesting. Whereas Next.JS only supports some children and not all, therefore a render function is required. |
67-
| **pageTitle** | string | **No** | Unique page title that describes the page, such as `Home`, `About` etc. etc. |
68-
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. If `pageTitle` and `siteTitle` are the same, only this shows. |
69-
| **titleTemplate** | string | **No** | Title template used to display `pageTitle` and `siteTitle` in a template, displays the values using corresponding `[pageTitle]` and `[siteTitle]`. Example template: "[pageTitle] &#124; [siteTitle]". |
70-
| **description** | string | **Yes** | A one to two sentence description of your webpage. Keep it within 160 characters, and write it to catch the user's attention. |
71-
| **baseSiteUrl** | string | **Yes** | Base site URL, excluding trailing slash. |
72-
| **pagePath** | string | **No** | The path of the current page, excluding leading slash. |
73-
| **canonicalUrl** | string | **No** | The canonical URL, if your page is a duplicate. |
74-
| **keywords** | string&#124;string[] | **No** | List of SEO keywords describing what your webpage does. Example, `"your, tags"` or `["your", "tags"]`. |
75-
| **imageUrl** | string | **Yes** | Image url of asset to share. Recommended aspect ratio for landscape is 1.9:1 (1200x630) or for squares 1:1 (1200x1200). For more info, visit [here](https://iamturns.com/open-graph-image-size/). If a relative URL is provided, `baseSiteUrl` is prefixed. If specifying a relative URL do not add the leading slash. |
76-
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
77-
| **imageWidth** | number | **No** | Width of share image, defaults to `1200`. |
78-
| **imageHeight** | number | **No** | Height of share image, defaults to `630`. |
79-
| **locale** | string | **No** | The locale these tags are marked up in, such as; `en_GB`, `fr_FR` and `es_ES`. Defaults to `en_US`. |
80-
| **twitter** | TwitterEmbedProps | **No** | Optional twitter embed properties to include. |
64+
| Property | Type | Required | Notes |
65+
| -------------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
66+
| **render** | React.ReactNode | **Yes** | Unfortunately `react-helmet` and `next/head` are strict with how they accept meta tags. `react-helmet` doesn't support nesting. Whereas Next.JS only supports some children and not all, therefore a render function is required. |
67+
| **pageTitle** | string | **No** | Unique page title that describes the page, such as `Home`, `About` etc. etc. |
68+
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. If `pageTitle` and `siteTitle` are the same, only this shows. |
69+
| **titleTemplate** | string | **No** | Title template used to display `pageTitle` and `siteTitle` in a template, displays the values using corresponding `[pageTitle]` and `[siteTitle]`. Example template: "[pageTitle] &#124; [siteTitle]". |
70+
| **description** | string | **Yes** | A one to two sentence description of your webpage. Keep it within 160 characters, and write it to catch the user's attention. |
71+
| **baseSiteUrl** | string | **Yes** | Base site URL, excluding trailing slash. |
72+
| **pagePath** | string | **No** | The path of the current page, excluding leading slash. |
73+
| **disableCanonical** | boolean | **No** | Disable canonical if not desired, defaults to `false`. |
74+
| **keywords** | string&#124;string[] | **No** | List of SEO keywords describing what your webpage does. Example, `"your, tags"` or `["your", "tags"]`. |
75+
| **imageUrl** | string | **Yes** | Image url of asset to share. Recommended aspect ratio for landscape is 1.9:1 (1200x630) or for squares 1:1 (1200x1200). For more info, visit [here](https://iamturns.com/open-graph-image-size/). If a relative URL is provided, `baseSiteUrl` is prefixed. If specifying a relative URL do not add the leading slash. |
76+
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
77+
| **imageWidth** | number | **No** | Width of share image, defaults to `1200`. |
78+
| **imageHeight** | number | **No** | Height of share image, defaults to `630`. |
79+
| **locale** | string | **No** | The locale these tags are marked up in, such as; `en_GB`, `fr_FR` and `es_ES`. Defaults to `en_US`. |
80+
| **twitter** | TwitterEmbedProps | **No** | Optional twitter embed properties to include. |
8181
8282
To use simply add `MetaHeadEmbed` to a shared layout to get the best out of page specific properties such as `pagePath`.
8383

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@phntms/react-share",
33
"description": "An all-in-one React library to implement custom Sharing Meta and Social Media Sharing Buttons.",
4-
"version": "0.0.6",
4+
"version": "0.0.7",
55
"main": "lib/index.js",
66
"types": "lib/index.d.ts",
77
"homepage": "https://github.com/phantomstudios/react-share#readme",
@@ -71,4 +71,4 @@
7171
"dependencies": {
7272
"is-absolute-url": "^3.0.3"
7373
}
74-
}
74+
}

‎src/components/MetaHeadEmbed.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@ export interface MetaEmbedProps {
6666
/** Webpage description. Should be less than 160 characters. */
6767
description: string;
6868

69-
/** Canonical URL of your webpage that will be used as its default app URL. */
70-
canonicalUrl?: string;
69+
/**
70+
* Disable canonical if not desired, defaults to `false`.
71+
*/
72+
disableCanonical?: boolean;
7173

7274
/** Base site URL, excluding trailing slash. */
7375
baseSiteUrl: string;
@@ -118,7 +120,7 @@ const MetaHeadEmbed = ({
118120
siteTitle,
119121
titleTemplate,
120122
description,
121-
canonicalUrl,
123+
disableCanonical = false,
122124
baseSiteUrl,
123125
pagePath,
124126
keywords,
@@ -136,13 +138,11 @@ const MetaHeadEmbed = ({
136138
.replace("[siteTitle]", siteTitle);
137139
}
138140

139-
const canonical =
140-
canonicalUrl &&
141-
(isAbsoluteUrl(canonicalUrl)
142-
? canonicalUrl
143-
: `${baseSiteUrl}/${canonicalUrl}`);
144-
145-
const pageUrl = pagePath ? `${baseSiteUrl}/${pagePath}` : baseSiteUrl;
141+
const pageUrl = pagePath
142+
? isAbsoluteUrl(pagePath)
143+
? pagePath
144+
: `${baseSiteUrl}/${pagePath}`
145+
: baseSiteUrl;
146146

147147
const image =
148148
imageUrl &&
@@ -158,7 +158,10 @@ const MetaHeadEmbed = ({
158158
content={commaSeparate(keywords)}
159159
/>
160160
),
161-
canonicalUrl && <link key="canonical" rel="canonical" href={canonical} />,
161+
162+
!disableCanonical && (
163+
<link key="canonical" rel="canonical" href={pageUrl} />
164+
),
162165

163166
<meta key="og:type" property="og:type" content="website" />,
164167
<meta key="og:url" property="og:url" content={pageUrl} />,

0 commit comments

Comments
 (0)