plotly / dash-labs

Work-in-progress technical previews of potential future Dash features.
MIT License
139 stars 39 forks source link

Update meta tag information #99

Closed bradley-erickson closed 2 years ago

bradley-erickson commented 2 years ago

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:

AnnMarieW commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

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.