Add dynamic OG/Twitter Card meta tags for challenge sharing using ngMeta#5051
Open
jaideepj2004 wants to merge 1 commit into
Open
Add dynamic OG/Twitter Card meta tags for challenge sharing using ngMeta#5051jaideepj2004 wants to merge 1 commit into
jaideepj2004 wants to merge 1 commit into
Conversation
Fixes Cloud-CV#3297 - Add ngMeta (vinaygopinath/ngMeta) as a bower dependency - Register ngMeta in app.scripts.json vendor bundle - Add 'ngMeta' to AngularJS module dependencies in app.js - Configure ngMeta defaults (title, description, image, url) in app config - Inject ngMeta into ChallengeCtrl and set challenge-specific meta tags (title, short_description, image, current URL) after challenge data loads - Update base.html to bind OG and Twitter Card meta tags via ngMeta ng-attr-content directives for dynamic per-challenge metadata When a challenge page is visited, Open Graph and Twitter Card tags are dynamically updated with the challenge title, short description, and logo image, improving link preview appearance when challenge URLs are shared on social media.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Fixes #3297
When a challenge link is shared on social media platforms (Twitter, LinkedIn, Facebook, etc.), the link preview currently shows generic EvalAI metadata instead of challenge-specific content. This PR integrates the
ngMetaAngularJS library (as recommended by @RishabhJain2018) to dynamically update Open Graph and Twitter Card meta tags per challenge page.Changes
1.
bower.jsonngMeta(vinaygopinath/ngMeta) as a bower dependency.2.
frontend/app.scripts.jsonngMetato the vendor scripts chunk with its minified path (bower_components/ngMeta/dest/ngMeta.min.js).3.
frontend/src/js/app.js'ngMeta'to the AngularJS module dependencies.ngMetaProviderconfig block to set default meta values (title, description, image, url) used for non-challenge pages.4.
frontend/src/js/controllers/challengeCtrl.jsngMetaservice intoChallengeCtrl.ngMeta.setTitle(details.title)— sets the page title to the challenge name.ngMeta.setTag('description', details.short_description)— sets description to the challenge's short description.ngMeta.setTag('image', vm.page.image)— sets image to the challenge logo.ngMeta.setTag('url', window.location.href)— sets the canonical URL.5.
frontend/base.html<title>to useng-bind="ngMeta.title + ngMeta.titleSuffix".og:title,og:description,og:image,og:urlmeta tags to useng-attr-contentbindings.twitter:title,twitter:description,twitter:imagemeta tags withng-attr-contentbindings.How to Test
bower installto install thengMetadependency.gulp devor equivalent)./web/challenges/challenge-page/{id}/overview).<head>tags in browser DevTools — theog:title,og:description, andog:imagevalues should reflect the challenge's title, short description, and logo.Notes
short_descriptionis used as the OG description; falls back todescriptionif not set.contentfallback attributes on each meta tag ensure static parsers/crawlers still see meaningful values.