Skip to content

Add docs for social share previews #552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 14, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions content/menu.md
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,8 @@ site_menu:
url: /streamlit-cloud/get-started/share-your-app
- category: Streamlit Cloud / Get started / Share your app / App indexability
url: /streamlit-cloud/get-started/share-your-app/indexability
- category: Streamlit Cloud / Get started / Share your app / Share previews
url: /streamlit-cloud/get-started/share-your-app/share-previews
# - category: Streamlit Cloud / Get started / Share your app / Configuring Single Sign-on (SSO)
# url: /streamlit-cloud/get-started/share-your-app/configuring-single-on-sso
# visible: false
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -109,4 +109,4 @@ It's that simple! You can then access your app by visiting your custom subdomain

If a custom subdomain is not available (e.g. because it's already taken), you'll see an error message like this:

![Custom subdomain error](/images/streamlit-cloud/custom-subdomain-error.png)
<Image src="/images/streamlit-cloud/custom-subdomain-error.png" clean />
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: Share previews
slug: /streamlit-cloud/get-started/share-your-app/share-previews
---

# Share previews

Social media sites generate a card with a title, preview image, and description when you share a link. This feature is called a "share preview." In the same way, when you share a link to a public Streamlit app on social media, a share preview is also generated. Here's an example of a share preview for a public Streamlit app posted on Twitter:

<div style={{ marginLeft: '3em' }}>
<Flex>
<Image caption="Share preview for a public Streamlit app" src="/images/streamlit-cloud/share-preview-twitter-annotated.png" />
</Flex>
</div>

<Note>

Share previews are generated only for public apps deployed on Community Cloud.

</Note>

## Titles

The title is the text that appears at the top of the share preview. The text also appears in the browser tab when you visit the app. You should set the title to something that will make sense to your app's audience and describe what the app does. It is best practice to keep the title concise, ideally under 60 characters.

There are two ways to set the title of a share preview:

1. Set the `page_title` parameter in [`st.set_page_config()`](/library/api-reference/utilities/st.set_page_config) to your desired title. E.g.:

```python
import streamlit as st

st.set_page_config(page_title="My App")

# ... rest of your app
```

2. If you don't set the `page_title` parameter, the title of the share preview will be the name of your app's GitHub repository. E.g., if you don't set the `page_title` parameter in `st.set_page_config()`, the title of the share preview for an app hosted on GitHub at https://github.com/jrieke/traingenerator will be "traingenerator".

## Descriptions

The description is the text that appears below the title in the share preview. The description should summarize what the app does and ideally should be under 100 characters.

Streamlit pulls the description from the README in the app's GitHub repository. If there is no README, the description will default to:

_This app was built in Streamlit! Check it out and visit https://streamlit.io for more awesome community apps. 🎈_

<div style={{ marginLeft: '6em' }}>
<Flex>
<Image caption="Default share preview when a description is missing" src="/images/streamlit-cloud/share-preview-private-app.png" />
</Flex>
</div>

<!-- ![Default share preview when a description is missing](/images/streamlit-cloud/share-preview-private-app.png) -->

If you want your share previews to look great and want users to share your app and click on your links, you should write a good description in the README of your app’s GitHub repository.

## Preview images

Community Cloud takes a screenshot of your app once a day and uses it as the preview image, unlike titles and descriptions, which are pulled directly from your app's code or GitHub repository. This screenshot may take up to 24 hours to update.

## Switching your app from public to private

If you initially made your app public and later decided to make it private, we will stop generating share previews for the app. However, it may take up to 24 hours for the share previews to stop appearing.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.