How search works on your static site – Simply Static Webinar Series, Episode 3

Nathan Wrigley:

This episode of the WP Bill's podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL, and 247 support. bundle that with the hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place. invoice clients, and get 30 percent of new purchases. Find out more at go.meforward/ WP builds.

Nathan Wrigley:

Hey. Hey. Hey. Hey. Hey. Hey. Hey. How are you doing, Patrick? Hey. I'm doing fine. Duke. Yeah. Good. Thanks. Patrick and I have been talking about the weather and all sorts of things prior to this. Yeah. Absolutely. Yeah. Yeah. I always think it's hysterical that the, was presented like, okay. We've just started, and we've never met before in all of this, but, yeah, we've been having a bit of a natter about the weather. Yeah. but there's, look, there's Patrick Posner. Patrick is, the developer over at Simply Static. Simply Static is a WordPress plugin, which enables you to create a static WordPress website. We've been over what that means. We have 3 well, this is the 3rd of 4 on the previous episodes, we had a conversation about what simply static does and how it can generate a static website. What does that mean? How does it work? Where do you host it and all of that. And then on the previous episode, we well, Patrick, say we, Patrick tackled the thaw me subject of how do you get forms working on your website. And so that was all explained. Another important component of the website is, of course, search, you know, you go to a website. You wanna be able to search around and figure out what's on this website, and that's the endeavor today. Patrick's gonna explain how search works. I guess we're all familiar with search, but, yep, Patrick. Are you ready to go? Yeah. Sure. Let's do it. Okay. Let's share the screen and, oh, sorry. I should just say very quickly just before we get get Patrick on the on the screen, if you like, let's just share a couple of things very quickly. Well, I've lost it. Where's it gone? Can't remember. essentially, if you would like to share this URL, if you want people to join us, go to wpbuilds.comforward/live. I can't find the little caption, but never mind, wpbuilds com forward slash live. Stick that in Twitter or wherever you feel comfortable. And, yeah, join in the conversation. If you want to make a comment, please feel free to do that. If there are any comments, then, then we'll raise them, for Patrick as a question at the end. Okay. Over to you. So

Patrick Posner:

today we're gonna be talking about such. usually something not all websites need, but you will notice if it's not there. especially if you have, like, a bigger website and if you have, like, a multilingual website, it's even more important to have, like, a decent search solution. We already got kind of used to the not so great default search solution we have in WordPress. It's may it's mainly the reason because we are not using search as often on a website as we could. So, you're all familiar with how the web research works. And does it, as it doesn't allow things like type of tolerancy or, fuzzy searching and things like that. You basically add your term, click enter or clicks a little search icon, and you get, like, only exec exact matches, back from your search. so traditional search on WordPress does require PHP to work. So you have you need a, a traditional server to run, to perform search requests and get an, search result back. So That's why we're gonna be talking about how we can kind of mimic that solution on a static website where you don't have a traditional server. we will be covering 2 different services. And, Nathan and I just talked about a third option. So they only want to briefly mention, which is called

Nathan Wrigley:

Google custom search. Yeah. Yeah.

Patrick Posner:

there's a free tool that it can use. it's localizing here. But -- Oh, it's okay. We'll -- Just bear with me here. So, It's a service provided by Google that you can use to implement, basically, the Google search, into your own website. it's pretty easy to set up. It just takes like 2 minutes. it's free. but there's a little catch, and that's primarily the reason why I don't recommend it. you also get the paid search results.

Nathan Wrigley:

So --

Nathan Wrigley:

Oh, interesting.

Patrick Posner:

Okay. So you have. -- with that here. Right? And it's maybe it's your competitor ranking for your name, for your product, for your service, whatever you provide to your your visitors, customers, they will show up within that result. So you can work around set if you choose to pay plan from Google custom set. I mean, there is for sure a pay plan. It's like a Google service. We all know how it works. Yeah. Yeah. If you don't want these apps, you need to pay plan. As a paid plan is based on usage, and it's kind of expensive. So you get like, I'm not sure about this exact number, but, like, 1000 search requests for 2 bucks a month or so. So if you have a pretty frequent website that can add up pretty quickly, right? each is, like, one request to the Google search, API. And 1000 search requests per month are pretty much like Nothing. Right? But if you're still not scared and maybe your website, ranks for something so specific that there's no one, placing ads. There's a free plugin Called WP Google Search, that you can use in combination with simply static, and it will works right away. No fancy modifications or anything needed, you can basically can take a look at the settings here. It couldn't be easier, right? So you enable the plugin. You add your Google search engine key. That's the only key thing you get if you log into Google custom search engine. So there's no way to copy anything else besides that one API key. You add it here. you can use custom CSS, and you get a little shortcode that you can add, onto our website. Okay. And yeah. So basically display a little search box. Where's the example here? Here's the search box. Yeah. Yeah. because they haven't made the screenshot from the result, but you get the idea right here. Right? You have the search box and here are the search results. And as you can see, they are already, like, paid ads right here within the free, free custom search engine integration. So that's, for me, that's kind of a no go for using it. especially as we will cover a few dotjs in a moment, which is a better solution with out ads and without any external API integrations and without any cost per search per month attached on so on. So, yeah, that's it to Google custom search engine. Quickly moving that away. Let's talk a bit about use JS. Use JS is the first service we're taking a look at. It's kind of a search solution for nerds because it doesn't have, like, a 1 click integration, and it doesn't have, like, an easy to explore demo. It's really a JavaScript package that you can use within your app. It's kind of popular if you're more into, like, react development and also fancy jamstack stuff. but it does shape with some pretty neat features. 1 is fuzzy searching. So if you only add parts of a word or use, like, January operators, or is it advanced stuff, you get pretty decent results, out of the box without any configuration needed. say I also support type for tolerance, which means if you have a typo in your word, on your search term, few stairs will still be able to provide the correct search result.

Nathan Wrigley:

Okay. So, like, if typed mouse instead of house or something like that, it would figure out. Okay. Right.

Patrick Posner:

Yeah. So that's pretty neat. All without any external dependencies Simplestatic includes a whole thing, the whole package for you. So you don't have to include anything yourself or have to worry about any third party API requests. Everything is running on your server. So before going further into few stress, maybe we're switching back into simply static and take a look at the settings So if you're in your admin area and you go to simply static settings and search By default, you will see something like that. So all you have to do is, like, obviously, activates a little toggle and you get all the advanced settings here. you can choose from 2 different search integrations. 1 is fuse JS. which we are talking which we are talking about right now. And, once that's done, we're talking about a total, search API provider. Okay. Setting up search in simply static is kind of simple. If you are a little bit familiar about, how websites work. So will already see we're talking about CSS selectors. So if I just opens a static website here to give you, like, basic crash course about HTML and. So, we talk about CSS Select We already add the most common ones. So title. Yeah. I mean, every HTML file or WordPress when if you open a WordPress website, what you see right here isn't like WordPress, it's HTML. right, because, see, if you request a WordPress website, it will, get all the dynamic information and display display just HTML. if we use something like simple static, we skip the entire part and get just the rendered HTML. And each HTML document has a title attribute. So that's like a a pretty common, solution to get, like, the title of a page. Let's say, it's a contact page, for example. And if you just search for title. That's a meta one. Here's the title. You will see In our case, it's yoast SEO already optimizing the title attribute criteria. So each document has a title attribute. And you can pick whatever you want So if you are quite familiar with HTML and its structure, you can choose like meta tags or anything you can find within your DOM. if you're not familiar with it, just stick with the title in like 99% of the cases that will be absolutely fine as your search result title. And if you want to further optimize it, you can still use tools like yours or rank mark or any other kind of SEO plugin and modify the titles there. and gets a modified result into your search results. Right. So the next step is the content. There's this body tag, each HTML file, you will see you can open and close this head and body, and body is pretty much everything that you can see on your web page. it contains the header, the footer, all the content. Everything is included in side of the body tech, if you want to further customize it, let's say you only really want, like, the content, you could use something like WP Block Group, maybe isn't the best fit here, but maybe WP site blocks, for example, to narrow down or hear entry content, for example, and content is just the content without the header, without the put down. Yeah. this one could be also used just quickly showing you how it's done. So we have this body tag. And if we want to use entry content, entry content, quickly moving back here. It's a class. You can see it because of the class attribute right here. so it can also use CSS classes. You can also use things like IDs, whatever you want. We're keeping it simple for now. there's also a thing for excerpts. Experts are like this little summary that is automatically generated by WordPress, for each post, especially for posts or any kind of custom post type, there's a little excerpt, which is like a short description of your page posts. This is optional, so you don't have to use it you can also disable it, within the search results, but it's kind of handy. So to give you a little bit more context, how that might look like. I can just start a search right here. that's a title, and that's the excerpt. So you can't disable the extra, but if you do that, the only thing people get is the title, of the search result, which Might be enough if you're really optimized your titles, but at least in my opinion, it's always good to give a little bit more context. to your users to make it easier to find the things they are searching for. So that's why we unable to accept by default, but as I said, you can also disable it. So quickly getting back to indexing. there's another setting here. Exclude URLs. As a description already says, you can exclude complete URLs or just patterns. So if you type something like offer right here, all automatically generated offer URLs from a web first website, will be excluded from the search index. That can be kind of handy if you have something like author pages, a pretty decent example, but also things like archives. So if you have, like, a pretty, even before, like, a smaller block, you have, and automatically generated archive and you have paginated paginated pages or archive pages. so all posts from last year, September, all posts from this year, January. And you want to include the specific post, but not the archive So by adding the word archive here, you can simply exclude everything that matches with archive. you can really narrow down the search results here, by adding specific tags, especially things that, are automatically generated by WordPress, category pages, tech pages, whatever you want.

Nathan Wrigley:

to really -- Sorry. Can I just ask quickly ask a question? So where you've written author and archive, the heading above that says, exclude URLs. Now author isn't a URL, but is that just a string of tech you're using to identify anything which WordPress would output as something to do with an offer and something to do with an archive. Exactly.

Patrick Posner:

Yeah. Exactly. That's why I'll edit this little additional description below the field. You can use full URLs parts of an URL or just plain words. a common term is stop words. So it's a little bit tacky, but stop words basically mean everything like filler words, and things you Think of it like a, exclude list. So any term, you are all everything that matches will be excluded from the search index later. So, yeah, that's basically it to the basic configuration of the search.

Nathan Wrigley:

Do do you have a an option there to in your exclude URLs again? Do you have an option to, I don't know, add a star, for example, star symbol to -- Yeah. You can also. -- or after.

Patrick Posner:

Yeah. Things like white cards. So I -- Yeah. Wild cards. Sorry. I should have said that. Yeah. Everything matches my name, for example, can be used, but all also things like I'm just copying the URL right now because it's kind of cryptic. So something like Yeah. something like that would also work. Right? So everything matches this specific pattern with an infinite number of characters before that

Nathan Wrigley:

stuff or after. Yeah. Yeah. Yeah. Oh, that's really powerful then, isn't it? If you've got the wildcard character, there are and you understand the way that WordPress outputs URLs you can really get very fine. Well, also in a in a one simple, entry there, you can exclude whole swades of WordPress that you don't want discovering. Right. Got it. Now

Patrick Posner:

that that's usually pretty hard to do within, like, the WordPress default search. Right? Yeah. You need all kinds of filters and you have to add custom code snippets and all of that. that was mainly the reason. why I integrated these options to make it really simple to have, like, a decent search with decent results. especially because you have to kind of give up on your existing work research when you go static, but I think with the, settings and the solution in place implemented in simple static, we have, like, a pretty good alternative on board, without giving up too much on your existing WordPress search integration. Right. Right. So, yeah, that's pretty much everything you have to know about indexing. indexing is basically the process of we cross the entire website. And we are looking for these rules right here. And based on the configuration here, we create a search index. Search index can be just a plain file. So we Can take a look into that. Oh, yeah. Nice. WP content upload. Simply set configs, fuse index. So it's really just -- Okay. It's long. -- plain JSON file. And you can also remove things like spaces. So if you have, like, spaces in your type or you have line breaks and everything like that, we automatically convert them, to make a fire far as tiny as possible. So if we have, like, handy a little pre went to. Yeah. Amazing. So it looks, a little bit easier. Yeah. Yeah. Way more readable. So each result contains an object ID. So object ID is basically the post ID, within WordPress. So if you have, like, the ID 18, is is the same ID as a post ID in WordPress, for the home page, for example. And all you have is like, it's a title, it's a content, so excerpt, which we're not using right now, and it's a path. So the path is escaped. So, which means it's like a secured input to avoid anything unwanted, any, unwanted script executions, or Right. Nice. Yeah. CSS or what whatsoever. Right? So, yeah, that's basically it. A structured file with all the results, that that are being found during the crawling process.

Nathan Wrigley:

can I just can I just interrupt at this point and ask So, essentially, given the parameters that you entered into the plugin, so we went through that, it creates this file. This file, I presume we're gonna go on to that, but this file is then consumed by Fusejs and you would need to this file would need to be updated if you create new content and so on and so forth. And and it's it's a representation of your entire website in one JSON object, which can then be crawled by the fuse service.

Patrick Posner:

Right. Right. Okay. So okay. We talked about the indexing part. We talked about how to exclude, how to get the, content you want for the specific, search fields. So for the title, for the content, for the excerpt, we took a quick look into how this index file actually looks and how it works. now there's only one last setting, especially this setting here, difference between Fuze JS and our gateway address. So our gateway address needs a couple more settings, but first -- Sorry. It's just a quick reminder, Patrick, we can't see your drop down. So if you are interacting,

Nathan Wrigley:

ah, okay. Yeah. Yeah. It but that's okay. Yeah. It's okay. We'll stock on Fusion. Yeah. So it doesn't matter yet.

Patrick Posner:

So all you have to do is adding the CSS selector for your form input field. We also have a short code that you can use instead called SSP dash search. the reason why I'm no longer recommending it to here within the settings is because if you have a search on your on your WordPress website, chances are pretty high that you already have some kind of form or search input field on your website. Imagine having, like, you set up a website with elementor and you use their header builder. There's a search integration. you add this little I'm not sure it's like a widget or an module or so. Yeah. But it gets a point. It's like a block or module. depends on the page where you are using and says already a search and it's styled pretty nicely and it works. And we want to make transition from WordPress to static as seamless as possible without, like, finding a way to inject that short code into your header by editing PHP files or anything like that. So there is a way to use the saw the short code, but I would highly recommend using the CSS selector approach is is way more convenient because all you have to do is again inspecting your search, because a little search box. And if you scroll up a bit, you will notice there's a form text. So each search field is basically a form and all you need to do is finding the right tech. it can be pretty much anything. At least it does need to be somewhat unique. So in our case, we have, like, WP block search, for example, as class, some forms even have, like, a unique ID that you can use instead, at least use something unique so you don't have, like, we have a form. It's a pretty decent example right here. Right? if we would just use input, the search would also trigger -- Oh. Oh. -- IP in your contact form. Right? So that's the reason why you have to use or why you should use something unique. so in our case, it's WP block search, and they already added that one as a CSS selector right here. And, yeah, that's pretty much it. You save the settings.

Nathan Wrigley:

just to explain, the the the CSS selector that you've just picked is is you're able to integrate that with search, that you've implemented from, for example, say, a page builder or something like that, if you, if you drop it into your Paige Bella, this is where I want my search to go. You can then find the the highest level, if you like, CSS selector, and you can hijack what's going on in there by picking the right selector and then dropping it into the settings. Yeah. Okay. Got it.

Patrick Posner:

So that's all, regarding the configuration for fuse JS. So So next pretty obvious question is, where's the generate index button? Or How do I get this index? Where is it? Where's the index? Yeah. So, during the time of developing that particular part of simply static. We gone through countless of iterations, a specific button, a simple preview showing you, generated index file. But at the end of the day, All of that absolutely doesn't matter. When do you want to update your index file? Yeah. When you run a static export, right? Right. So if you're not updating your static website, why wouldn't you update your, your index file? So we combined it now with the, with the static export in simply static. you already noticed that I done in static export today. And there is a line called index 155 of 155 pages. that's indicating that there's a search index that is filled up during this static export. So once you have configured the search integration, you can run your static exports as you are already familiar with and you don't have to spend any time looking for an index file or, making sure it's transferred to your static website simply static assembling all of that for you in the background. So the hardest part really is like the configuration of the search based on the CSS selectors. But once that's done, it's automatically updating on each static export. Okay. So if you are using

Nathan Wrigley:

the free version of the plugin, when you create a, a, a static site, be it a zip file or whatever, it will it will create the search at the same time. And if you're on the pro version where you can it's more granular. You could update, a particular post, for example, it will then run the same thing. So in other words, the the process of indexing is bound to the process of search. You that they're inseparable. Right? You so you don't need to think about it.

Patrick Posner:

Right. Right. Right. So that's a whole idea of a simple static pro to simplify and make it more convenient. so the search integration also updates, for example, on signal exports, I build exports. So if you change your post and, maybe you have even changed the title or the the permalink or whatever or everything. And, you click this little update static button from your page It will also update the,

Nathan Wrigley:

the search result accordingly. So -- Can I just ask, does it rebuild the int so let's say you're on the pro version, which we know, will update a a particular post only. So you don't have to go through the process of reindexing the whole site. Does it just update the the search index for that particular post as well. Yeah. Yeah. Nice.

Patrick Posner:

So if you have it depends a bit on the, search integration you use in case of fuse JS. It's like a rebuild of the entire file. Oh, okay. Because it's like, it's faster to rebuild the entire JSON files, and it is to Open pass, find the,

Nathan Wrigley:

find the -- Oh, okay. Yeah. Yeah. Yeah. ID,

Patrick Posner:

replace it, and save the file again. In case of Igolia, we're really updating that specific, search item in your index without

Nathan Wrigley:

updating their entire index each time. Okay. Well, I guess we'll come on to that later, but that's interesting to know. Thank you. Yeah.

Patrick Posner:

So We've done our export. We will absolutely do another export in a moment, when we switch to our goal here, but just assume we've done our export now and all the files are now on your static website. There's one handy feature we added with a 3.0 of simply static, which is the ability to test the integration without checking it on your static website. So what usually that was also a case for the search integration, you have to test it on your static website, because of the calls requests problematic we talked in our last session. Right? So so search integration doesn't have that problem because we're either, reading from a file from the same system or from an external API. So what you can do if we just open the WordPress website. It's not a static one. Right? He has a little, black admin top bar. So you can be sure we are on the WordPress website. And if you start searching here, You will notice that the search box, and that particular search is already the static search integration. It's not from WordPress. webcast doesn't have. If you are not adding, like, an additional AJ search fancy plugin, you will not get any recommendations if you're, searching on a WordPress website. Right? Mhmm. So if we click enter right here, it will be redirected to the homepage because on a static website, there isn't, a search result page. Right? So we kind of mimics the behavior, but what happens right here If you, do that on your static website, there's simply nothing happens. If you click enter, But what happens here on your WordPress website is that's a, the PHP server, gets a request doesn't know what to do with it and simply redirect it back to your home page. Yeah. Yeah. On the static website, we see that in a second. It's like, if you select something, you can also use, like, arrow keys and switch between, oh, that was too much. too many spaces, but you can also select them with your keyboard. and If you click on it, you'll get to the according search result. In our case, it's funny, funny enough that I picked the only German search result. we still haven't talked about, WPML and how all of that work. but now we're here. Let me quickly, tell you a little bit about how search works on a multilingual website. you can define different indexes per language with simply static and WPML. So if you're on the German website, for example, you get only German results. If you're on the English website, you only get English search results.

Nathan Wrigley:

which is -- Oh, that's interesting. Kind of nice. Yeah. Yeah. Yeah.

Patrick Posner:

And that obviously works with few j s and a. So you can completely separate the settings, and the search results per language.

Nathan Wrigley:

Oh, nice. Yeah.

Patrick Posner:

So getting back to the settings, we talked about future as how it works, It's absolutely a service for all those, GDPR fans out there because we don't have any external APIs involved. And we have everything running on your local machine. This even works offline. Right? So if you have, like, your website is only available from an intranet, which is closed within your company, for example, few stress will also work because there is no external dependency involved here. -- Interesting. Okay. Right. So There's a lot you can do with use JS, besides from fuzzy searching, modifying the index files and so on. I don't expect anyone getting more familiar with few shares as we or getting more into future as as the thing we have integrated and simply static. At least I never got, like, customer requests asking for -- Can we have more? Hey. Can we have more integration with Fugest? Usually, what happens if someone has more, a more advanced need for a pretty decent SaaS solution things like an index search, a facet search, things like that, people tend to use Egolia. So that's the reason why we're switching to Egolia right now.

Nathan Wrigley:

So --

Nathan Wrigley:

So just to be clear, fuse JS is a an option. It's you can use fuse JS It's one way of integrating search into a static website. But now we're moving on to a different solution, which is called a goal here. And it is you know, you can't combine the 2. You've got Fuze Jess, and there's a goal here, and they're different things. So we're about to embark upon something new. Okay.

Patrick Posner:

Okay. So you can't see the select menu, but if I change it -- We got it now. We got it. Yeah. Okay. So you will notice indexing settings are exactly the same. you can modify them as you like or just leave them as we configured them. So the interesting part is a little settings box below called Igolet API. And there are a couple of things that you need to set up. there's a thing called application ID, admin API key, search only API key name for your index, and that's that one is familiar, a CSS selector. So let's talk a little bit about the difference between Fuzej S and Nagolia. And once we've done that, I will explain what all this AD API key things mean. Okay. So the main difference just getting to the whole page here. Hopefully, we don't get redirected to the no. We don't. So Igulier is an external API for handling search. the main can we get that in an English sheet, please? Yeah. the main difference here is that a goal here provides a lot more features and few stairs. So if all you need is a basic, but pretty neat search integration use JS as a way to go. But if you really want something more powerful, I go is a whole never level of search integration. We're talking about things like AI powered search results. We're talking about location based search integration. We're talking about multilingual setups. So you can search one language and a can also connect it to another language so that you have, like, a multilingual search. Even if you're only using English, you can provide multilingual results. there's a lot you can do with Aegolia. and they integrate with pretty much anything you can even think of. So let's imagine you have a web press website, but you also have, like, a Salesforce CRM integration. you can also combine Zoos and make a search find everything related to your WordPress website, but also everything from your CRMs that might be useful for your visitor, case studies, of things like where's the next where we where we're now happening are, where's I don't know. You get that. There's a lot of things going on with. And there are tons of integrations. They have an entire marketplace of integrations. that you can use. so you have different they even have things like voice search. So if that's something you would like to provide to your customers, or to your visitors. You can also use voice search. you can have your own image search, a different mobile app search experience, and so on and so on. So there are tons of ways to, work with Agolia and tons of integrations, documentation integrations, and so on and so on. So it's really something different to fuse stress where you just get the basics, but in a good way, So fuzzy search and things like that, but Agoya is like bringing all of your searchable, knowledge together in one little input box. the pricing is also pretty decent. At least I hope they haven't changed. No. you get 10,000 requests per month for free for all the features. solves it all includes scale based search results, multilingual results, and so on, which is like 10 x amount of requests you get from Google custom search engine. Wow. If you don't want to use ads. Right? So for additional requests, they only charge

Nathan Wrigley:

50¢

Patrick Posner:

per 1000 requests. So even if you have, like, twin do you have a hilariously good month? It's Black Friday. everyone visiting your website, everyone searching for the next deal, you can pretty much get away with, like, a five buck invoice or so at the end of the month. so I think it's pretty fair in terms of pricing. especially consider the amount of features you can use within Nagolia. So, yeah, so that's basically the difference between Fuze JS and Tagolian. It's also faster, but, yeah, I mean, sure it's faster. So it's running on a dedicated cluster environment. And they make sure all search results are delivered in, like, milliseconds compared to a few j s, which is kind of dependent on your static website. So your static website is fast, but if you have, like, a 2 gigabyte, JSON file because we have, like, a

Nathan Wrigley:

100,000

Patrick Posner:

pages website. It might take some time for your visitors to get the results they want because we have to pass this, JSON file. Right? Got it. Got it. If you have a bigger website, you might want to, don't hustle with, with few stairs and go straight to a goal here right away. And Yeah. So now we're talking about setting up Igolia. I already we already knew external API can be kind of tricky. everyone that has watched the first episode of our little life from you will know what I'm talking about. So what I've done just in case is I created an index, and also filled it up with some such results right here. But what we are doing right now is starting basically from 0. So if you log in to a goal here. That's pretty much what you see. It's a little bit confusing, and There are like tons of options, but the important thing is the API keys. Right? So we need basically an application ID, an admin API key, and a search only API key. Yep. So how do I get that? quickly closing that one. One thing you will notice, this third menu point, once you log in to your account is API keys. It's like, it's the number one first thing you want to, you want to use or you want to have if you're starting start working with Aegolia. So in our case, I already created a project, but if you create a new one, it's basically the same thing. So just name it. Yeah. It's not very creative, but you could say. No. It's it's okay. wp's demo 2. you can choose your subscription. Don't get confused. They are like they made it really, What's the best tone to explain it? Confusing? Yeah. Kind of scary because there's like Mac 10 k search request only I say only up to 1,000,000 records, which is, like, Yeah. So absolutely fine for, like, 99% of the websites, but -- Yeah. -- they kind of want you to upgrade And, yeah, but you don't need it. You can just use a built plan, which is free. so grow plan is has the same free tier included, but it's already, aim for higher request amounts. That's why we already get like this, the paid plans for the records as a starting price. We start with Build 3. selecting a data center, you can get pretty much any location you want. If there's a isn't a location close to you, you can already, yes, a little contact us, indicate a year, but if you need something really specific because you're living in Alaska or so, you can absolutely read out to a goal and asking for a dataset close to you. In our case, we're just going with, European Union West We view our application details. So that's a little summary. We have some free plan. We have 10 k requests. We have to accept the terms of servers. absolutely

Nathan Wrigley:

and creates application. Oh, no. Yes. Oh, it was bound to happen. Oh, the riches. That's good. pictures of people on motorbikes. Yeah. Good luck.

Patrick Posner:

That's rich.

Nathan Wrigley:

Well, that wasn't so bad. If you got off that lightly, that's pretty good.

Patrick Posner:

Oh. Yay. Yeah. I'm kind of a good good recapture pro. Alrighty. So okay. We set up our application. there's only one thing left to do. we need an index. Index is basically the online version of our little fuse JSON file that we've seen earlier. so The name can be pretty much anything, but please don't use spaces. Anything lowercase, short term, maybe should be absolutely fine. In our case, it's WP built

Nathan Wrigley:

demo 2.

Patrick Posner:

Oh, you create on, you click on create index. and Next is created. One thing I absolutely not understand and at least from a user pay I mean, I'm not the CEO of Agolia, and I'm also not, part of the user experience team. But what I would expect is if I create an index, this is a something that should happen. Hey. What's up? Do you need your API keys maybe?

Nathan Wrigley:

So Yeah. because it feels like you don't. Right? It's all over. It's finished. Yeah. But -- Yeah. Okay.

Patrick Posner:

So what were you doing? We are already in WPS demo 2. If you click on the result again, we're getting back to our little overview page. Yeah. And we have created our index. If we now get back to API keys, WP demo 2 is selected. There we go. Here are the things we're looking for. So there's this application ID So there's a search only API key, and there's the admin API key. The application ID is basically the name of your project in an encrypted way. the search only API key is for the actual search implementation in the front end of your website. So Z1, is completely safe to be visible within Yep. The, code of your static website. And there's an admin API key, which obviously shouldn't be available on your static website. which is stored inside of WordPress. That's pretty much the exact same values we already added right here. And all that later available within our little JSON configuration file is the search only API key. so Now it seems we do have to update our static website quickly checking that we still have github configured. Yeah. Looks good. WP demo. Okay. Clicking on the button right here. waiting a moment for, static export to run. Hopefully, GitHub will not go into our way and, See episode 1 for how to -- Yeah. I mean, I've done the next port, like, 2 hours ago. Right? So it should work, but you never know. -- looking good. It's looking good.

Nathan Wrigley:

So yeah. It gets crossed.

Patrick Posner:

We maybe takes time to talk a little bit further about how a goalia can help you with your search integration. if you go this little dashboard page, there's a little house right here. So if you click on it, you get always get back to your familiar dashboard. What's interesting for us right now is the search part. So we created that project I used the old keys now for WPL WP Builds demos. So that's the right index here. And Another thing, pretty confusing. We selected this application. Right? And we already clicked on search, but we are still getting redirected to the dashboard. So it happens pretty much all the time. I have absolutely no idea why, but I think from a UI perspective, the idea was that you always select your application first before navigating anywhere else. Yeah. be clever, choose your application, before you're getting back to search. But if you've done that, you get the index. That's pretty much the, the online storage we already created. you get size, you get events, you get average record size, which is kind of important because, you have a little limitation in the record size. So let's say you can see the search result integration in simply static is extendable with a filter. So things like adding an image, for example, are absolutely possible. The problem is. Right. Yeah. And that's also the reason, why I haven't added settings to do things like adding images, for example. you have a limitation with especially within the free plan. There's no limitations in the pro plan. Sure thing. But in the free plan, you only have, like, I'm not even sure. It's like 100 kilobytes or so. So to include an image, it really needs to be tiny. It needs to be optimized, and there's so much -- -- record. you've got -- Correct. Yeah. The total size of your index is pretty convenient. I think it's like up to one gigabyte or so in total? A lot. Yeah. Yep. Yep. but the record size itself is a little bit tricky because 100 kilobytes aren't that much if you include things like We're not even talking about videos. Right? Just images. you can do that. It isn't that hard. There's documentation on simply static.com. how to do that. If you really want to go crazy with your search results, absolutely up to you in do all of that. but keep in keep in mind that there is a limitation of the actual record. size in the free plan. So there's kind of a lot of stuff that you can configure right here. in 99% of the cases, even for bigger search websites, you absolutely won't configure anything here because it's the default search. It's so good that you don't have to configure anything. But If you want to, you can really go deep into the search results. You can at things like, a ranking system. So let's say post always rank hires and categories, for example, or pages rank hires and posts because pages, maybe are your landing pages and more, more likely convert a user into a customer, for example, So you can really go deep into how the index performs, which, such results are per prioritize hires and others, which one you want to exclude. you can even go really, really nutty and activate AB testing. So, for example, AB test the priority of your different content formats. So

Nathan Wrigley:

our pages on yep. I'm just gonna intro intro interrupt you. Sorry for two seconds. There's somebody you you won't hear it. because my mic is largely on mute. There's somebody banging on my door. I suspect it's one of my family members who've forgotten the key. So I am I'm just gonna go. I'll like, one minute, and I'll be right back. I do apologize.

Patrick Posner:

Absolutely not a problem. So Nathan's gone. We can do whatever we want here right now. Now, quickly talking about AB tests. So you can run AB tests, and change the priority of your search results based on the, the ranking factors you have configured pretty much like how Google works and permanently iterating on your search results and implementing new factors and lowering the priority of other factors to make a really almost perfect search result to increase conversion, to increase the search experience in general on your website. So you get the idea. You can get really deep into details right here. you can also add AI based synonyms. So That's a pretty decent example right here. If you if your visitor types excellent, it would also match for things like great outstanding and so on. So you can train that model based on the actual searches performed on your website. but you can also manually add certain terms and let's say I figure out matching synonyms and even, like, excluding specific terms or including specific terms that should match based on the search intent. So quickly getting back to the exports. The export is finished. Awesome. Nice. And welcome back. Thank you. I was just talking about as this little AI integration that, is also part of the Agolia search integration API. where you can add you can manually add, keywords, but you can also leave it completely to the AI. So they will match for synonyms and provides the correct searches that even if the exact term isn't part of your search and Oh, nice. Yeah. That is really nice. Yeah. That's a pretty pretty neat feature. Yeah. I'll say. Implement it. I think just a month ago, it's pretty new. I haven't tested it myself. but the idea is quite great. Right? So that we have, like, matching terms for pretty much any synonym you can think of. Yeah. And it's also trained based on the search, requests that are done on your web So if -- So it learns what they know. Okay. -- is, typed in more often than the actual keyword you have added to your post, for example, I go, yeah, we'll let you know and we'll suggest maybe changing and using the synonyms that so, yeah, there's pretty much a lot going on with the Agolia integration. So yeah. I just got back to the export and it's finished already. So we can again, test set on our WordPress website. the funny thing is that you really don't see a lot as sales and the huge visual difference between using Fuse JS and Agolia JS. But you will notice it was a pretty decent example I figured out earlier today. you will, see a difference in the quality of such results. I'd I'm not sure if you remember but we also searched for money, within few shares, and we only got, I think, it was 2 results or so. And if we now search for my, they're more, more search result provided by a goal here compared to use jazz.

Nathan Wrigley:

Right.

Patrick Posner:

that's because of their, of their synonym and, better index replication implemented in their tool compared to just fused JS as, with a plain JSON file index. Yeah. So there are also things like 5 essential items, which is like the cert or the 4th block article we have on our website here. so you will notice the difference. The more you configure within Nagolia, the more powerful it gets. If you combine a the AI integration gets even more powerful so you can really go crazy with that. One thing I wanted to mention, which is a little bit more targeted towards developers, more precise, maybe, front end developers. We're using the official SDK integration from Echolian, which is this little live search where you're just seeing right here, But if you really want to provide an outstanding experience for your customer, for example, a goal here has some really extensive tutorials and, even videos how to, modify the existing search integration. A simple example

Nathan Wrigley:

Oh, facets of search. Very nice. Yeah.

Patrick Posner:

So when not talking only about Searchbox, right, on this, an example section right here. Where is it? Instance search.

Nathan Wrigley:

So faceted search then, it is where you can search against multiple things. at the same time. So you can fill you can sort of drill down into content, can't you? So you could, for example, I don't know. Maybe if you've got a car list website, you could say show me only fords

Patrick Posner:

or show me fords that are blue or show me fords that are blue with a 2 liter engine, that kind of thing. Yeah. Yeah. We kind of get, like, a pretty basic example right here, but that's something I wanted to mention because we are only in, including the auto complete because it was, like, the the most common thing on a static website was like, okay. We need to search. We need some kind of auto complete. Yeah. And it would be nice to get decent results back. Right? you can use the, the index parts that is provided by simply static as is. So you don't have to modify anything regarding PHP, and just swap out the front end integration for the search with things like instant search. So InstaCash also provides things like sorting, different filters, live updates for different results.

Nathan Wrigley:

Yeah. That's what I was thinking. That's that's amazing.

Patrick Posner:

Wow. Nice. And that's highly performant even with, like, let's say you have, WooCommerce store, which runs in catalog mode. So you don't have, like, say, the actual e commerce part implemented into our WooCommerce store. And we have a we have a couple of customers running, a WooCommerce catalog will simply static and use, IGOLIA JS to have, like, an outstanding performance search integration on their static WooCommerce catalog, for example. and you can go really deep. There's also an example for the GEO later. So That's all the thing. Right? Agolia will automatically ask the user for the for the current location to allow request and geo based searching. And, you can do things like a stall locator for example. Or I don't know. Everything related to geographical position and such. possible we'll set a goal of integration.

Nathan Wrigley:

We might -- Could you be able would you be able to, on a static site, be able to bind, let's say you've got plugging like ACF there. So you've got a bunch of fields, and one of those fields is -- Yep. -- I don't know, the location. you could you could bind that into the custom post type, you or the post, and then you could tell a goal here. Okay. Look for location in this

Patrick Posner:

type of data. Right. Nate. Now that's why there's a filter included in, simply static that you can use to enhance the, search result with custom data. For example, from ACF, you add the location, you add maybe a city or Yeah. Anything you can imagine. A car type, whatever. Right? Right. And you can build pretty much anything, and you still don't need a traditional WordPress website or a PHP server running to do these kind of projects.

Nathan Wrigley:

Thank you. And you say it's very performing. Listing website. Right? a lot of that stuff in WordPress. It's a bit of a heavy hit, isn't it? You know, you are you are asking quite a lot of your server to go and do the work there. Whereas if a goal here, if you can offload it to a goal here and it does it and you say it's perform and I'm trusting you there, it's that's a that's a way of, speeding that whole process up for the end user. Right? Right? Yeah. Absolutely. And you get 1,000,000

Patrick Posner:

listings for free. Right? So there's a decent chance you're getting away with a free version. And if you grow paying, like, 10 bucks a month for Aegolia instead of 100 bucks a month for a really beefy WordPress server to perform all these AJX related search requests for you. Right. isn't kind of, kind of an easy decision to make. So and you also don't have to hustle with things like backups example, if you're off load all these such results to a goal here, your WordPress database will stay pretty small and it's easy to backup with all the one of the most common backup plugins out there. Most of them are even free. So no costs related to that one if you have, like, a pretty small database. Right? So offloading heavy search related task to a goal is definitely a good decision. And also in combination with a static site app, set up an almost infinitely scalable approach to things like listing websites, geobased services, Yeah.

Nathan Wrigley:

Yeah. It's amazing. That's amazing. yeah, it even begs the question even if you don't have a static website, you know, there's a there's a lot of value in here. Yeah. That's amazing. Yeah. Yeah. Okay. How how are we doing? Have you reached the end of what you wanna say there?

Patrick Posner:

Yeah. We pretty much covered everything important from indexing to few stress, the difference between few stress and a goal here, why a goal here is a pretty cool service and what you can do with it. So from my end,

Nathan Wrigley:

we can go to questions if there are any. No. We've got no questions. I think that's fine. We'll, what we'll probably do is we will, we'll just wrap it up. I will post this on the WP Builds website The way you're gonna find this is if you go to wpbles.com, find the archives link in the main menu, and then this is what we're classing as demo. So if you go to the demos archive, you will be able to find it there. Patrick, as always, is there anything that you wanna share in terms of where people can reach out to you if somebody watches this, you know, in 3 years' time, it'll be out there still. It's 3 years from now. Yeah. But they they wanna, you know, they're curious. They wanna know where can they find you? Where's the best places to get in top with you.

Patrick Posner:

Yeah. So I'm always reachable from simply static.com. There's a little support link right at the top. You can click on it. You fill out the form and to go straight into my inbox and I'm replying as fast as I can. If you just want to connect and talk about all things nerdy static websites. You can always reach out at Twitter, or is it called x dotcom now. Oh, yep. No idea what it's called. Let's say Twitter for now. It's, Patrick Posner_, and Yeah. You you will already know that it's the right guy if you're is a if the first thing you see in my bio is like, developer of simply static. So -- Yeah. Yeah. You can't go wrong there. So Twitter is good. Email is good. simplistatic.com is always a good way if you have a more detailed questions or maybe technical questions. And if you're seeing that 3 years from now, we probably have already integrated geo search and a facet research for your static website.

Nathan Wrigley:

There you go. So, you can find simply static online, maybe go and maybe go and search for it for goodness sake. you've got a pro version. If you're into that, there is a nice offer if you use the coupon WP builds, all in, I'm showing it as all uppercase. I don't know if that matters, but there's no spaces or anything like that. You'll get 25% off. That's very kind. Patrick to offer that. We will be back. We've been doing these each week, but we're gonna come to our final one, but we're not going next week because of the fact that I'm hoping to go on a, well, probably very rainy holiday. It turns out, but never mind. We'll carry on regardless, but we will be back in a couple of weeks' time and gonna tackle. If memory serves, we're gonna tackle what you talked about earlier, which was multi lingual. Right? Yeah.

Patrick Posner:

Absolutely. Multilingual

Nathan Wrigley:

Well, it would be fun. Yeah. So we're gonna try and so by the end of it, you'll have be able to set up a static website, host it somewhere. You'll be able to put forms onto it, you'll be able to add search to it, and you'll be able to make it international, all in 4 simple steps. That's great. So, Patrick, I'm gonna end it there. I appreciate it so much. Thank you for joining us today. We will -- Thanks for having me. Yeah. You're very welcome. We'll be back in a couple of weeks. So we'll we'll see you soon.