Skip to content

Commit

Permalink
Auto prefix imageUrl (#9)
Browse files Browse the repository at this point in the history 
* Auto prefix imageUrl

* Update README.md

Co-authored-by: Paulo <[email protected]>

* Linting

* Version bump

Co-authored-by: Paulo <[email protected]>
  • Loading branch information
@PauloMFJ
John Richard Chipps-Harding and PauloMFJ authored Jul 14, 2021
1 parent a979dbd commit a75c962
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 20 deletions.
30 changes: 15 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,21 +59,21 @@ 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 | **Yes** | Every page should have a unique title that describes the page, such as 'Home', 'About' etc. |
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. |
| **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/). |
| **imageAlt** | string | **Yes** | Image alt for users who are visually impaired. |
| **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 | **Yes** | Every page should have a unique title that describes the page, such as 'Home', 'About' etc. |
| **siteTitle** | string | **Yes** | Title of the site, usually the organization / brand name. |
| **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. |
| **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.2",
"version": "0.0.3",
"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"
}
}
}
6 changes: 5 additions & 1 deletion src/components/MetaHeadEmbed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,10 @@ const MetaHeadEmbed = ({

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

const image =
imageUrl &&
(isAbsoluteUrl(imageUrl) ? imageUrl : `${baseSiteUrl}/${imageUrl}`);

const metaEmbed = [
<title key="title">{title}</title>,
<meta key="meta:title" name="title" content={title} />,
Expand All @@ -154,7 +158,7 @@ const MetaHeadEmbed = ({
property="og:description"
content={description}
/>,
<meta key="og:image" property="og:image" content={imageUrl} />,
<meta key="og:image" property="og:image" content={image} />,
<meta key="og:image:alt" property="og:image:alt" content={imageAlt} />,
<meta key="og:site_name" property="og:site_name" content={siteTitle} />,
<meta key="og:locale" property="og:locale" content={locale} />,
Expand Down

0 comments on commit a75c962

Please sign in to comment.