search

ashhitch / gatsby-plugin-wpgraphql-seo

Gatsby Plugin to Bring Yoast Seo Data into Gatsby via WpGraphQL.
MIT License
13 stars 8 forks source link

Inc images #3

Closed CloudBop closed 3 years ago

CloudBop commented 3 years ago

Added meta for the selected images & alt text to the Seo/Helmet component. Includes fallback for the default open-graph image. Added altText to defaultImage interface.

CloudBop commented 3 years ago

It's my first contribution, so apologies if I've done something wrong. FWIW I think there's an interesting problem regarding which images the plugin should be referring to, the WordPress source or the build source. My assumption is the WordPress source for the image URLs as the Gatsby site images names will probably change every new build.

I'm not 100% sure but we may need the Gatsby build site URL as a meta-tag to satisfy Facebook, as opposed to WP source URL. { property: og:url, content: "https://example.com/my-post" } I don't think it's easy to get the Gatsby siteUrl from the gatsby-source-wordpress schema. Perhaps include a new Interface to the IGlobal context?

ashhitch commented 3 years ago

@CloudBop thanks for this. A great first PR and addition to the plugin. I will do some tests and look to merge this in.

One concern is the sizing of the images ... if we use Gatsby Image we could handle this there. The file name should only change if the cache is cleared or a new source image used?

CloudBop commented 3 years ago

Hey Ash, thanks for the positive words. I have an abstracted out a version of the context and component at www.colinr.tech. If you're interesting in seeing a "live" version.

I'm not a FB user but had someone lend me a login to test a few URLs with slightly different setups in the FB debugger. Currently I am implementing the <meta property:"og:url"/> using the gatsbySiteUrl, which I haven't included in the PR. Facebook debug does indeed flag a warning if it's not included, it does still work though.

RE: Images. I'm fairly new to the world of SEO. However, as I'm sure you're already aware, it seems Facebook and Twitter cache their own versions of the images once they're shared. I think for up to twelve days, they are updated if they are re-shared with fresh content. I think...

Gatsby-Image for sizing would certainly be a very cool feature to include. I've noticed that Twitter unforgivingly crops all my images. My implementation is terrible as I default my featured images on posts to squares to satisfy my Frontend layout. I'll need to read up a little on the default sizing of Facebook cards. Twitter cards can be set to two different sizes which needs accounting for. With Gatsby3 release imminent and a new image plugin perhaps worth waiting for them to drop?