Update meta tag information

.gitignore

@@ -6,4 +6,5 @@ dist
 cache
 .pytest_cache
 __pycache__
-venv
+venv
+.venv

dash_labs/plugins/pages.py

@@ -42,6 +42,7 @@ def register_page(
     title=None,
     description=None,
     image=None,
+    image_url=None,
     redirect_from=None,
     layout=None,
     **kwargs,
@@ -100,6 +101,11 @@ def register_page(
         - A logo at `assets/logo.<extension>`
         When inferring the image file, it will look for the following extensions: APNG, AVIF, GIF, JPEG, PNG, SVG, WebP.
 
+    - `image_url`:
+       This will use the exact image url provided when sharing on social media. 
+       This is appealing when the image you want to share is hosted on a CDN.
+       Using this attribute overrides the image attribute.
+
     - `redirect_from`:
        A list of paths that should redirect to this page.
        For example: `redirect_from=['/v2', '/v3']`
@@ -177,6 +183,7 @@ def register_page(
     page.update(
         image=(image if image is not None else _infer_image(module)),
         supplied_image=image,
+        image_url=image_url
     )
     page.update(redirect_from=redirect_from)
 
@@ -401,10 +408,14 @@ def interpolate_index(**kwargs):
             start_page, path_variables = _path_to_page(
                 app, flask.request.path.strip("/")
             )
+
             image = start_page.get("image", "")
             if image:
                 image = app.get_asset_url(image)
 
+            # get the specified url or create it based on the passed in image
+            image_url = start_page.get("image_url", "".join([flask.request.url_root, image.lstrip("/")]))
+
             title = start_page.get("title", app.title)
             if callable(title):
                 title = title(**path_variables) if path_variables else title()
@@ -424,8 +435,8 @@ def interpolate_index(**kwargs):
                         <title>{title}</title>
                         <meta name="description" content="{description}" />
                         <!-- Twitter Card data -->
-                        <meta property="twitter:card" content="{description}">
-                        <meta property="twitter:url" content="https://metatags.io/">
+                        <meta property="twitter:card" content="summary_large_image">
+                        <meta property="twitter:url" content="{url}">
                         <meta property="twitter:title" content="{title}">
                         <meta property="twitter:description" content="{description}">
                         <meta property="twitter:image" content="{image}">
@@ -451,8 +462,9 @@ def interpolate_index(**kwargs):
             ).format(
                 metas=kwargs["metas"],
                 description=description,
+                url=flask.request.url,
                 title=title,
-                image=image,
+                image=image_url,
                 favicon=kwargs["favicon"],
                 css=kwargs["css"],
                 app_entry=kwargs["app_entry"],

docs/10-MultiPageDashApp-MetaTags.md

@@ -31,6 +31,12 @@ See the code in `/demos/multi_page_meta_tags`
     - A logo at `assets/logo.<extension>`
    When inferring the image file, it will look for the following extensions: APNG, AVIF, GIF, JPEG, PNG, SVG, WebP.
    These are the [most commonly used image file types](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types) used on the web.
+- `image_url`:
+   The image url is used to point to a hosted image online through its full path.
+   If the image_url is not provided, we will automatically create the full url based on the `image` attribute.
+
+Example of the difference between `image` and `image_url`:
+`image=birdhouse.jpeg` and `image_url=http://www.yourdomain.com/assets/birdhouse.jpeg`
 
 In the `assets` folder we have 4 jpeg images with the following file names:  
 - app.jpeg
@@ -40,6 +46,8 @@ In the `assets` folder we have 4 jpeg images with the following file names:
 
 The `title` and `description` will be derrived from the module name if none is supplied.
 
+The `url` will be the full url when deployed. Twitter needs the full url to properly supply a card.
+
 In the `pages` folder we have 3 simple pages to demonstrate this feature. 
 
 #### `a_page.py`
@@ -86,6 +94,7 @@ dash.register_page(
     __name__,
     path="/",
     image="birdhouse.jpeg",
+    image_url="http://yourdomain.com/assets/birdhouse.jpeg",
     title="(home) The title, headline or name of the page",
     description="(home) A short description or summary 2-3 sentences",
 )