Skip to content

Comments

fix(social): add image dimensions and alt text to Open Graph tags#2496

Merged
mroderick merged 1 commit intocodebar:masterfrom
mroderick:improve-og-tags
Feb 21, 2026
Merged

fix(social): add image dimensions and alt text to Open Graph tags#2496
mroderick merged 1 commit intocodebar:masterfrom
mroderick:improve-og-tags

Conversation

@mroderick
Copy link
Collaborator

@mroderick mroderick commented Feb 20, 2026

Summary

  • Add og:image:width (1200) and og:image:height (630) for proper social preview rendering
  • Add og:image:alt for accessibility compliance
  • Fix potential nil error when workshop has no host sponsor

Analysis

Reviewed Open Graph implementation against ogp.me specification:

Issues Found

  1. Missing image dimensions - Per OGP spec, og:image:width and og:image:height help social platforms optimize image display
  2. Missing image alt - Recommended for accessibility when using og:image
  3. Potential nil error - workshops/_meta_tags.html.haml:5 called workshop.host.name which would raise an error if host is nil for non-virtual workshops

Changes Made

  • Added dimensions (1200x630) matching the actual codebar-social.jpg image
  • Added alt text: "codebar - making tech more diverse and welcoming"
  • Changed to safe navigation: workshop.host&.name || 'codebar'

- Add og:image:width (1200) and og:image:height (630) for proper preview
- Add og:image:alt for accessibility
- Fix nil error when workshop has no host
Copy link
Contributor

@KimberleyCook KimberleyCook left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@mroderick mroderick merged commit 48b3ccb into codebar:master Feb 21, 2026
8 checks passed
@mroderick mroderick deleted the improve-og-tags branch February 21, 2026 07:48
%meta{ property: 'og:image', content: image_url('codebar-social.jpg') }
%meta{ property: 'og:image:width', content: '1200' }
%meta{ property: 'og:image:height', content: '630' }
%meta{ property: 'og:image:alt', content: 'codebar - making tech more diverse and welcoming' }
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know that this has already been merged, but I thought it worth pointing out that alt text is intended for people and systems (eg assistive technology) that cannot see the contents of the image, to be able to understand what is in the image. The text as is ("codebar - making tech more diverse and welcoming"), is a piece of branding text and doesn't not help someone to understand what is in the image. I think that as an absolute minimum this should say "codebar logo".

Photo showing a crowd of people in the lower half, raising their hands in celebration. The top half of the photo shows the word 'codebar' in large writing alongside the codebar logo.

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.

3 participants