Share Image Size Meta (#22)

* Share Image Size Meta

* Update README.md

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

* Update README.md

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

* Update src/components/MetaHeadEmbed.tsx

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

* Linting

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

Author: John Richard Chipps-Harding

README.md

@@ -74,6 +74,8 @@ export default PageLayout;
 | **keywords**      | string|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.                                                                                                                                                                                                                                                                          |
 

src/components/MetaHeadEmbed.tsx

@@ -85,7 +85,17 @@ export interface MetaEmbedProps {
    * Image url of asset to share. Recommended aspect ratio for landscape is
    * 1.9:1 (1200x630) or for squares 1:1 (1200x1200).
    */
-  imageUrl: string;
+  imageUrl?: string;
+
+  /**
+   * Width of share image.
+   */
+  imageWidth?: number;
+
+  /**
+   * height of share image.
+   */
+  imageHeight?: number;
 
   /** Image alt for users who are visually impaired. */
   imageAlt: string;
@@ -114,6 +124,8 @@ const MetaHeadEmbed = ({
   keywords,
   imageUrl,
   imageAlt,
+  imageWidth = 1200,
+  imageHeight = 630,
   locale = "en_US",
   twitter,
 }: MetaEmbedProps) => {
@@ -157,6 +169,16 @@ const MetaHeadEmbed = ({
       content={description}
     />,
     <meta key="og:image" property="og:image" content={image} />,
+    <meta
+      key="og:image:width"
+      property="og:image:width"
+      content={imageWidth.toString()}
+    />,
+    <meta
+      key="og:image:height"
+      property="og:image:height"
+      content={imageHeight.toString()}
+    />,
     <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} />,