Skip to content

fix: optimize credential page for social sharing#73

Open
LobeTia wants to merge 5 commits intomainfrom
fix/social-sharing-metadata
Open

fix: optimize credential page for social sharing#73
LobeTia wants to merge 5 commits intomainfrom
fix/social-sharing-metadata

Conversation

@LobeTia
Copy link
Member

@LobeTia LobeTia commented Jan 27, 2026

Summary

  • Optimized the credential view page for social media sharing with proper Open Graph and Twitter Card meta tags
  • Enhanced the Netlify OG image function to generate beautiful PNG previews with credential details
  • Implemented SSR data fetching for dynamic meta tags that work with social media crawlers

Changes

Credential Page (src/frontend/pages/credentials/[id]/index.vue)

  • Refactored data fetching to use useAsyncData with SSR support
  • Implemented useSeoMeta with getter functions per Nuxt 3 documentation
  • Added client-side retry when SSR fetch fails (for local development)
  • Set proper OG and Twitter Card meta tags with dynamic credential values (title, description, issuer, recipient)

Netlify OG Image Function (netlify/functions/og-credential/)

  • Redesigned OG image with modern two-column layout
  • Added PNG output using @resvg/resvg-js for better social media compatibility
  • Displays credential name, issuer, recipient, verification status, and issuance date
  • Added Certo branding with gradient accent colors

Test plan

  • Share a credential URL on Twitter/X and verify the preview shows credential name and custom image
  • Share a credential URL on LinkedIn and verify the preview displays correctly
  • Share a credential URL on Facebook and verify OG tags are read properly
  • Test locally with curl -A "facebookexternalhit" URL to verify SSR meta tags
  • Verify the page still works correctly in the browser after sharing

- Replace simple list layout with responsive grid of styled cards
- Add gradient backgrounds and decorative blur effects
- Include context-specific icons for each check type (revocation, expiration, signature)
- Add status badges with color coding (passed/warning/failed)
- Display friendly labels and descriptive messages for each verification check
- Show actual error messages when checks fail instead of generic text
- Add hover animations for interactive feedback
- Refactor data fetching to use useAsyncData with SSR support
- Use getter functions for useSeoMeta per Nuxt 3 documentation
- Add client-side retry when SSR fetch fails (local dev)
- Include detailed logging for debugging SSR vs client fetches
- Set proper OG and Twitter Card meta tags with dynamic values
@netlify
Copy link

netlify bot commented Jan 27, 2026

Deploy Preview for certo ready!

Name Link
🔨 Latest commit 23873bf
🔍 Latest deploy log https://app.netlify.com/projects/certo/deploys/69793aff7c9577000857dd58
😎 Deploy Preview https://deploy-preview-73--certo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants