Update meta tag information

[bradley-erickson]

This is not fully tested, I do not have access to a domain I can test on to ensure that this works. This will need to be deployed to a domain in order to test properly. We can use https://metatags.io/ to ensure things are showing up properly after deploying.

I'm am not 100% sure how we should handle the image url and url information.

The changes can be described as the following:

• twitter:card will be set to "summary_large_image", this could perhaps be the default and we allow the user to choose the proper card type; however, I think this is the most often used Twitter card for sharing websites.
• image_url is a new parameter to pass into each page. I figure that some people might enjoy accessing the image locally (through the assets folder using image), but we need to point to a proper image location for sharing.
• url is used to specify the full path of the deployed instance instead of the relative path.

[AnnMarieW]

Hey @bradley-erickson Thanks for the PR!

The og card for sharing on linked-in and the forum works - for both the URL and the image, so we need to make sure the changes are only for the twitter card.

I think it would be great if we could handle this without requiring people to enter more data in dash.register_page()

For the url, I think this will work - it should capture the full url including any pathname prefix:

<meta property="twitter:url" content="{flask.request.url}">

For the image, if it requires a full url, we can get the base path with request.url_root,

<meta property="twitter:image" content="{image_url}">

 image_url = "".join([flask.request.url_root, image.lstrip("/")])

If you would like to make the update, I could deploy a tarball based on this PR, and see if it works.

[bradley-erickson]

Knowing that sharing works for the og card makes me suspect that it might work for the Twitter cards, and the issue was only in the twitter:card attribute. I'd have tested this more if I had the easy capability to.

[AnnMarieW]

OK, I'll try it with just changing the twitter card and seeing if it works for the image.

update:
This site has the changes: https://dashlabs.pythonanywhere.com/

[AnnMarieW]

Just need to add the new image_url to the page_registry at line 185:

page.update(
        image=(image if image is not None else _infer_image(module)),
        supplied_image=image,
        image_url=image_url,        
    )

[AnnMarieW]

Hey @bradley-erickson This looks fantastic and the umage_url is a great new feature. Thanks for your contribution!

@T4rk1n This is ready for a final review:
Closes issue #98

• fixes a bug in the twitter card meta tags.
• adds image_url property to dash.page_registry This gives the option of using a link for the image in the meta tags rather than an image file in the app's assets folder.

The changes are deployed in the dash-labs online docs, and we have verified that the Twitter card is fixed. The formatting, image and URL are all now correct. After it's merged I can do another release ad make an announcement on the forum.

[T4rk1n]

💃 Looks good, verified the bird image appears in the twitter card validator