Skip to content

Commit a75c962

Browse files
John Richard Chipps-HardingPauloMFJ
John Richard Chipps-Harding
and
PauloMFJ
authored
Auto prefix imageUrl (#9)
* Auto prefix imageUrl * Update README.md Co-authored-by: Paulo <[email protected]> * Linting * Version bump Co-authored-by: Paulo <[email protected]>
1 parent a979dbd commit a75c962

File tree

4 files changed

+24
-20
lines changed

4 files changed

+24
-20
lines changed

‎README.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -59,21 +59,21 @@ export default PageLayout;
5959
6060
### &lt;MetaHeadEmbed />
6161
62-
| Property | Type | Required | Notes |
63-
| ----------------- | -------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
64-
| **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. |
65-
| **pageTitle** | string | **Yes** | Every page should have a unique title that describes the page, such as 'Home', 'About' etc. |
66-
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. |
67-
| **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]". |
68-
| **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. |
69-
| **baseSiteUrl** | string | **Yes** | Base site URL, excluding trailing slash. |
70-
| **pagePath** | string | **No** | The path of the current page, excluding leading slash. |
71-
| **canonicalUrl** | string | **No** | The canonical URL, if your page is a duplicate. |
72-
| **keywords** | string&#124;string[] | **No** | List of SEO keywords describing what your webpage does. Example, `"your, tags"` or `["your", "tags"]`. |
73-
| **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/). |
74-
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
75-
| **locale** | string | **No** | The locale these tags are marked up in, such as; `en_GB`, `fr_FR` and `es_ES`. Defaults to `en_US`. |
76-
| **twitter** | TwitterEmbedProps | **No** | Optional twitter embed properties to include. |
62+
| Property | Type | Required | Notes |
63+
| ----------------- | -------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
64+
| **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. |
65+
| **pageTitle** | string | **Yes** | Every page should have a unique title that describes the page, such as 'Home', 'About' etc. |
66+
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. |
67+
| **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]". |
68+
| **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. |
69+
| **baseSiteUrl** | string | **Yes** | Base site URL, excluding trailing slash. |
70+
| **pagePath** | string | **No** | The path of the current page, excluding leading slash. |
71+
| **canonicalUrl** | string | **No** | The canonical URL, if your page is a duplicate. |
72+
| **keywords** | string&#124;string[] | **No** | List of SEO keywords describing what your webpage does. Example, `"your, tags"` or `["your", "tags"]`. |
73+
| **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. |
74+
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
75+
| **locale** | string | **No** | The locale these tags are marked up in, such as; `en_GB`, `fr_FR` and `es_ES`. Defaults to `en_US`. |
76+
| **twitter** | TwitterEmbedProps | **No** | Optional twitter embed properties to include. |
7777
7878
To use simply add `MetaHeadEmbed` to a shared layout to get the best out of page specific properties such as `pagePath`.
7979

‎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.2",
4+
"version": "0.0.3",
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: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,10 @@ const MetaHeadEmbed = ({
133133

134134
const pageUrl = pagePath ? `${baseSiteUrl}/${pagePath}` : baseSiteUrl;
135135

136+
const image =
137+
imageUrl &&
138+
(isAbsoluteUrl(imageUrl) ? imageUrl : `${baseSiteUrl}/${imageUrl}`);
139+
136140
const metaEmbed = [
137141
<title key="title">{title}</title>,
138142
<meta key="meta:title" name="title" content={title} />,
@@ -154,7 +158,7 @@ const MetaHeadEmbed = ({
154158
property="og:description"
155159
content={description}
156160
/>,
157-
<meta key="og:image" property="og:image" content={imageUrl} />,
161+
<meta key="og:image" property="og:image" content={image} />,
158162
<meta key="og:image:alt" property="og:image:alt" content={imageAlt} />,
159163
<meta key="og:site_name" property="og:site_name" content={siteTitle} />,
160164
<meta key="og:locale" property="og:locale" content={locale} />,

0 commit comments

Comments
 (0)