Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix and improve Open Graph HTML meta tags #9429

Closed
3 tasks done
glmvc opened this issue Aug 1, 2023 · 0 comments · Fixed by #9795
Closed
3 tasks done

fix and improve Open Graph HTML meta tags #9429

glmvc opened this issue Aug 1, 2023 · 0 comments · Fixed by #9795
Assignees
@caugner
Labels
effort: small This task is a small effort. enhancement Improves an existing feature. has PR Issues that already have a PR p3 We don't have visibility when this will be addressed.

Comments

@glmvc
Copy link
Contributor

glmvc commented Aug 1, 2023

Summary

I was working with og meta tags some time ago and noticed an incorrect value, which I described in more detail in this issue.
As I was investigating this further today, I came across more things that should be adjusted and are not quite correct atm:

  1. incorrect og:locale values, described in the mentioned issue
    • format language_TERRITORY (see Open Graph protocol)
    • example: on MDN sites the set lang code is fr for French, but it has to be fr_FR, respecting the protocol
  2. the og:locale value is not updated when the language is changed (language switcher menu), and therefore does not match the language of the document (<html lang="[LANGCODE]">) at the given time
    • after reloading the page, og:locale gets the language value of the document (which is not the correct value as stated in 1.)
  3. as the Open Graph protocol suggests, if og:image is present, og:image:alt should also be specified - this is currently not the case
    • it seems that the Facebook Sharing Debugger finds some weird image alt text (see screenshot below)
    • I couldn't figure out on the fly if it's cache or the like, but I think it should be checked anyway?

Screenshot 2023-08-01 at 21 14 23

URL

all pages (also translated pages); for example:

Reproduction steps

check the mentioned og meta tags in the loaded source (dom)

Expected behavior

  • correct language codes for og:locale
  • use of correct og:image:alt text

Actual behavior

incorrect values for the mentioned og meta tags (regarding the protocol)

Device

Laptop

Browser

Chrome

Browser version

Stable

Operating system

Mac OS

Screenshot

No response

Anything else?

No response

Validations
@github-actions github-actions bot added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Aug 1, 2023
@caugner caugner added enhancement Improves an existing feature. p3 We don't have visibility when this will be addressed. effort: small This task is a small effort. and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Oct 2, 2023
@caugner caugner self-assigned this Oct 11, 2023
@caugner caugner mentioned this issue Oct 11, 2023
Merged
@caugner caugner added the has PR Issues that already have a PR label Oct 25, 2023
@glmvc glmvc mentioned this issue Nov 7, 2023
Closed
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@caugner caugner

Labels
effort: small This task is a small effort. enhancement Improves an existing feature. has PR Issues that already have a PR p3 We don't have visibility when this will be addressed.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

enhance(opengraph): fix og:image and add og:{image:*,site_name,type} mdn/yari
2 participants
@caugner @glmvc