Fix custom head content for meta tags / social media previews #12169
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Currently, the head parameter in gr.Blocks() adds content via client-side JavaScript, which doesn't work for social media crawlers that don't execute JavaScript. This commit renders the head content server-side using Jinja2 templating, ensuring meta tags are present in the initial HTML response. The head content is already available in the config dict (added in blocks.py:get_config_file()), so this simply inserts it into the template before the default Open Graph tags. This fix enables custom social media preview cards for Gradio apps.
Collaborator
freddyaboulton
left a comment
freddyaboulton
left a comment
There was a problem hiding this comment.
I don't think this would work for server-side-rendered gradio apps since 1) they use a different html template (js/app/src/app.html) and 2) it is created before the config is fetched in the server
Collaborator
|
Closing this for now. Thanks @ziemann-engineering |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Currently, the head parameter in gr.Blocks() adds content via client-side JavaScript, which doesn't work for social media crawlers that don't execute JavaScript. This commit renders the head content server-side using Jinja2 templating, ensuring meta tags are present in the initial HTML response.
The head content is already available in the config dict (added in blocks.py:get_config_file()), so this simply inserts it into the template before the default Open Graph tags.
I tested this locally by modifying gradio/templates/frontend/index.html, I am not 100% sure this targets the correct file.
Note: there are now several redundant meta tag sections in the rendered page. I left the client-side insertion in the code, this can likely be removed or modified. In addition, there are still the hardcoded tags, which have duplicates.
Closes: #11233
AI Disclosure
We encourage the use of AI tooling in creating PRs, but the any non-trivial use of AI needs be disclosed. E.g. if you used Claude to write a first draft, you should mention that. Trivial tab-completion doesn't need to be disclosed. You should self-review all PRs, especially if they were generated with AI.