Skip to content

Commit

Permalink
add disableCanonical prop (#23)
Browse files Browse the repository at this point in the history 
* 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]>
  • Loading branch information
@emielphntm @PauloMFJ
emielphntm and PauloMFJ authored Nov 19, 2021
1 parent 8e941c0 commit ae7dd51
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 32 deletions.
34 changes: 17 additions & 17 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,23 +61,23 @@ export default PageLayout;
### &lt;MetaHeadEmbed />
| Property | Type | Required | Notes |
| ----------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **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. |
| **pageTitle** | string | **No** | Unique page title that describes the page, such as `Home`, `About` etc. etc. |
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. If `pageTitle` and `siteTitle` are the same, only this shows. |
| **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]". |
| **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. |
| **baseSiteUrl** | string | **Yes** | Base site URL, excluding trailing slash. |
| **pagePath** | string | **No** | The path of the current page, excluding leading slash. |
| **canonicalUrl** | string | **No** | The canonical URL, if your page is a duplicate. |
| **keywords** | string&#124;string[] | **No** | List of SEO keywords describing what your webpage does. Example, `"your, tags"` or `["your", "tags"]`. |
| **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. |
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
| **imageWidth** | number | **No** | Width of share image, defaults to `1200`. |
| **imageHeight** | number | **No** | Height of share image, defaults to `630`. |
| **locale** | string | **No** | The locale these tags are marked up in, such as; `en_GB`, `fr_FR` and `es_ES`. Defaults to `en_US`. |
| **twitter** | TwitterEmbedProps | **No** | Optional twitter embed properties to include. |
| Property | Type | Required | Notes |
| -------------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **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. |
| **pageTitle** | string | **No** | Unique page title that describes the page, such as `Home`, `About` etc. etc. |
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. If `pageTitle` and `siteTitle` are the same, only this shows. |
| **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]". |
| **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. |
| **baseSiteUrl** | string | **Yes** | Base site URL, excluding trailing slash. |
| **pagePath** | string | **No** | The path of the current page, excluding leading slash. |
| **disableCanonical** | boolean | **No** | Disable canonical if not desired, defaults to `false`. |
| **keywords** | string&#124;string[] | **No** | List of SEO keywords describing what your webpage does. Example, `"your, tags"` or `["your", "tags"]`. |
| **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. |
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
| **imageWidth** | number | **No** | Width of share image, defaults to `1200`. |
| **imageHeight** | number | **No** | Height of share image, defaults to `630`. |
| **locale** | string | **No** | The locale these tags are marked up in, such as; `en_GB`, `fr_FR` and `es_ES`. Defaults to `en_US`. |
| **twitter** | TwitterEmbedProps | **No** | Optional twitter embed properties to include. |
To use simply add `MetaHeadEmbed` to a shared layout to get the best out of page specific properties such as `pagePath`.
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@phntms/react-share",
"description": "An all-in-one React library to implement custom Sharing Meta and Social Media Sharing Buttons.",
"version": "0.0.6",
"version": "0.0.7",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"homepage": "https://github.com/phantomstudios/react-share#readme",
Expand Down Expand Up @@ -71,4 +71,4 @@
"dependencies": {
"is-absolute-url": "^3.0.3"
}
}
}
25 changes: 14 additions & 11 deletions src/components/MetaHeadEmbed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +66,10 @@ export interface MetaEmbedProps {
/** Webpage description. Should be less than 160 characters. */
description: string;

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

/** Base site URL, excluding trailing slash. */
baseSiteUrl: string;
Expand Down Expand Up @@ -118,7 +120,7 @@ const MetaHeadEmbed = ({
siteTitle,
titleTemplate,
description,
canonicalUrl,
disableCanonical = false,
baseSiteUrl,
pagePath,
keywords,
Expand All @@ -136,13 +138,11 @@ const MetaHeadEmbed = ({
.replace("[siteTitle]", siteTitle);
}

const canonical =
canonicalUrl &&
(isAbsoluteUrl(canonicalUrl)
? canonicalUrl
: `${baseSiteUrl}/${canonicalUrl}`);

const pageUrl = pagePath ? `${baseSiteUrl}/${pagePath}` : baseSiteUrl;
const pageUrl = pagePath
? isAbsoluteUrl(pagePath)
? pagePath
: `${baseSiteUrl}/${pagePath}`
: baseSiteUrl;

const image =
imageUrl &&
Expand All @@ -158,7 +158,10 @@ const MetaHeadEmbed = ({
content={commaSeparate(keywords)}
/>
),
canonicalUrl && <link key="canonical" rel="canonical" href={canonical} />,

!disableCanonical && (
<link key="canonical" rel="canonical" href={pageUrl} />
),

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

0 comments on commit ae7dd51

Please sign in to comment.