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.

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

Add required meta tags for social media #34

Merged
merged 2 commits into from Feb 7, 2023

Conversation

renintw
Copy link
Contributor

@renintw renintw commented Jan 19, 2023

Fixes #18

The preview of some posts couldn't be correctly displayed on some social media, so in this PR, required meta tags are added.

Note: A must-have twitter tag twitter:card is not added because it has already been added by the plugin social image generator.

Screenshot (Tested on sandbox)

Added by this PR ⬇️

Screen Shot 2023-01-20 at 1 58 30 AM

Added by social image generator ⬇️

Screen Shot 2023-01-20 at 1 58 47 AM

How to test

  1. Locally or on the sandbox, choose a post.
  2. Check the dev console if newly added tags are there.
  3. Front page doesn't have a description tag at the moment.

TODO

  1. Does the front page need a description? What should it be? (ref)
  2. After the deployment, check if the issue is totally fixed as it was found out earlier that Slack still couldn't display the preview of a post correctly (Discord has no such problem though) while in the meantime the preview of the post mentioned in the issue was shown without any problem on my side. (Any thoughts? Perhaps it's img size restriction, I'll look further into it in this direction)

image

Add required og meta tags for most social media,
and specific tags for twitter based on its docs:
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

A must-have twitter tag 'twitter:card" is not added because it has already
been added by the plugin 'social image generator'.
@renintw renintw requested a review from ryelle January 19, 2023 18:37
@renintw renintw self-assigned this Jan 19, 2023
@renintw renintw added [Component] Templates Related to the theme (FSE) templates [Component] Backend Anything wp-admin or PHP-related labels Jan 19, 2023
@renintw renintw requested review from adamwoodnz and StevenDufresne and removed request for adamwoodnz January 19, 2023 18:38
'twitter:site' => '@WordPress',
];

$desc = '';

Choose a reason for hiding this comment

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

Disregard if I'm misunderstanding, but can we not just use the excerpt?

Copy link
Contributor Author

@renintw renintw Feb 1, 2023

Choose a reason for hiding this comment

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

Thanks for pointing this out!

Originally this part was referred to a snippet in wporg-developer. The reason it parsed desc and trimmed it down to <150 chars with regex from scratch is that developer.w.org doesn’t store data within the post_content in a way that get_the_excerpt would handle well.

get_the_excerpt() would work well for the is_singular() if branch, but other parts it wouldn’t, so in the snippet the original author might just figure it was better to process all of the excerpts for SEO headers the same way.

I've changed to use get_the_exceprt() here as at the moment only is_singular is used and I'd like to get this PR merged first to see if the original issue is fixed.
Whether it needs some specific descriptions on different pages (front page, archive page, etc.), I'll have another discussion afterward to figure out the requirements.

Thanks to @dd32 for the clarification!

@renintw renintw force-pushed the add/meta-tags-for-social-media branch from 9dbc5f0 to c75d515 Compare February 1, 2023 07:02
@renintw renintw merged commit 72b72ed into trunk Feb 7, 2023
@renintw renintw deleted the add/meta-tags-for-social-media branch February 7, 2023 06:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Component] Backend Anything wp-admin or PHP-related [Component] Templates Related to the theme (FSE) templates
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Social Image and other Meta tags need review
2 participants