Sanity SEO done right: Open Graph, JSON-LD, fallbacks

Hey bird, how you doing? So, first of all, I wanted to put this on YouTube so everybody else can actually see the answer to this question because I get asked this so many times on a daily basis, but I thought it might be helpful for you. Uh, so in short, and this is a very, very common thing that we get: has anybody done SEO work on Sanity before? Doesn't really go too much into what's actually built into the model, but I hear this time and time again. Um, and the reason why you have this happen so much is because Sanity is very, very unopinionated. And the reason why it's very, very unopinionated is because it can create models that can do anything, genuinely anything, when it comes to just writing a blog, or it can be more complex, as in running an entire e-commerce system, or it can be as simple as creating like a terminal that tells you the latest train times at a train station. It's really, really scalable. Anyway, so what I'll talk about is a little bit of this. So this is an old Learn article that we wrote with Sanity, which is really helpful. It tells you about how you should opinionate your actual SEO, and it's all good and fine if you want to take the time out to go look through this. That's great. You've got a lot more time than I have, so that's fantastic. Now, I'm going to show you something totally different. This is actually the TurboArt, and this is the way that we do it. It's the same thing that's in the Sanity Learn documentation. Um, but I know how low people's attention spans are today, so very, very quickly, I'll show you how this works. This is how we opinionate SEO and we do the exact same on every single one of our projects. So when we build a page for a page builder or for a blog or any other document type, it has a title, okay? And you can do validation. You can do things like, oh, it has to be x number of characters. You can do that. That's really cool if you think it would help the client. But for the simplicity of this, we don't have like that little number underneath, um, because we're trying to be unopinionated. Um, and description, which is going to be effectively used as your meta description on the page. This can also double up. So if, for example, it's a blog, um, the title of the blog could also be the title that sits inside of here, and the description could be the little blurb that you get just before you click into the blog on a card. That's one thing to know. So this becomes our baseline. The same with images. So you may see an image in here as well. Um, which I believe is an SEO. So ours is a SEO image override. Um, however, sometimes we actually include the image in here as well. It could be that it should be in here. Nope, okay. Um, that might get tweaked on the TurboArt Sanity, but essentially I like to have an image inside of here as well as part of the pages as a fallback image. However, we have this secondary tab which is SEO. This is your SEO, your meta title. So your title tags at the top, um, and the meta description, which would be in the meta description section. Um, and these will override the title and the description. And you might ask, hold up, if we've got the title and description, then what's going to happen if we override them? Then there surely there's no reason to have these in the first place. Well, the reason we have these is because they're always a fallback. So it means that you have a consistent way of editing your pages, whether that's a page with page builder blocks or a blog which has like the blog title, blog description. So it may not appear on all pages. Now we've got our SEO. So our metas are sorted. What about our open graph? Well, makes perfect sense. Let's do open graph title, open graph description. And you can go a step further and also do, I think there's a separate open graph image. Uh, you can separate it out down to as granular a level as here's what we want to have on Twitter, here's what we want to have on Facebook, and I think LinkedIn does it as well, just off the top of my head. Um, this is kind of like our de facto baseline. So I would highly, highly recommend doing it this way. Um, however, you can go a lot more granular. You can put JSON-LD in there. You can do all sorts of things. However, a note on JSON-LD, and I've said this to a lot of different people: I much, much prefer set and forget JSON-LD. So if you're already putting all this data like titles and descriptions and things like that in there, and authors. If you're on a blog page, let me show you a quick example of this. Um, I'm wondering if we have authors on here. I hope we do. If we don't, I'm going to tell you how to do it. Uh, we do. Great. So if we've got all of these authors that are inside of here, why don't we just pull those authors into JSON-LD by default, which is set and forget? So you don't have to think about it. You just enter the data inside of Sanity and a like-for-like pair comes up with JSON-LD. And it's not so complicated these days with AI, so you can even do this relatively quickly. Um, but yeah, this is what I'm talking about when I talk about a de facto default SEO experience. What you should use as a baseline for every single Sanity website that is going to be a website. This obviously differs if it's going to be a different function. But if you're looking to start this straight away, or in your case, I would just literally go to the Sanity Exchange, go find TurboArt Sanity. You can also find this on GitHub. Um, go view the repo and tell the developer to just go look inside of here. Um, and pay special attention to two files. One of them is Query. So Query shows you how we handle our Groq queries. And Groq is the query language from Sanity. And then the second thing you want to pay attention to inside of here (um, let me see if I can find it for you. Let me just press up top, any second now) is the SEO. I think it's SEO fields which you can see you can reuse this. This is what we use on ours where it's the SEO title, SEO description. Makes perfect sense. SEO image, SEO no index, and SEO hide from lists. And the reason we have these two left is because obviously you want to have a no index. Sometimes maybe it's a pay-per-click content page that you very specifically want to tunnel down a specific person that's coming to your website. And the second one is SEO hide from lists because, for example, you have a blog post. It may be that you don't want that blog post to show up on certain lists. It may be that you have a no index and you also don't want it to show up on certain lists, or vice versa. That's the reason why we do this because if you have SEO hide from lists inside of your Groq, you can say give me all the blogs except for the ones that are getting hidden from lists, and it's really nice and easy to work with. Uh, there's some very basic validation here. If the SEO problem continues, just give us a shout. We're more than happy to try and help and give you pointers in the right direction. Thanks a lot. Have a great day. Take care. Bye-bye.