Section 8 (Lesson 7/10): In this lesson, we’re going to look at the SEO tools available in the Bubble editor and best practices for preparing our app from an SEO perspective.

We’ll be learning about:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

In this lesson, we're going to discuss technical SEO and the tools that Bubble gives us to enable us to configure our SEO settings so that search engines like Google can effectively crawl and index our public-facing pages. And technical SEO can be broken down into four categories, namely Performance, Accessibility, Best practices and SEO. And it's these four categories that Google uses to assess and rank our public-facing pages, such as our index page, search page, and job page.

I'm going to walk you through Bubble's SEO tools in the Editor and also give you a head start on the major factors that will be affecting your SEO score. So let's dive in!

So if we start in the Performance category, what affects your performance the most will be images. And these are public-facing pages, and most of the time in public-facing pages I'm trying to make sure that I don't have dynamic data coming from the database because this does affect page load speed. But it's the images and the image size and the image format that Google really cares about.

Now, this isn't the best example because we're using an image in a Group. So in the HTML that Bubble is creating for us, there'll be no image tags here, so Google will completely ignore this image.

But let's scroll down to this section over here because these are image elements. Now, we uploaded these images ourselves, and we can find them in the Data tab --> Option sets. And when I talked about try not to use dynamic data for SEO, Option sets are a little bit different in that they're loaded in the client browser. In your own browser, we don't pull them from the database. When we scroll into view, they are already there on page load.

And these logos, if I Modify attributes for "Wise" and we have a look at this image here, this is an SVG format and an SVG format is actually fantastic. So if you're using logos or illustrations, try to use SVGs because they are tiny in size and they are preferred by search engines. Heading back, now if we go to, say, the search page, we have all of these logos down here. These are colorful logos. And if we see this logo, this is also an SVG.

Okay, now on the index page, let's say that we were using an actual image and if I had to look at this image and if I look in the URL, I can see that I have the extension .webp. Not .png and not .jpeg. WebP was created by Google for better image compression and higher quality output. For images that you have control over, you want to be using the WebP format. Anything you upload you need to convert that into WebP. This will greatly impact your performance and greatly impact how Google ranks your site. This is the single biggest impact you can have on SEO is on image, using correct image format and making sure that images are as small as possible but not to compromise the image quality.

Okay, what else with images? So if we come down to this example where we're using an image element, we need to make sure that we have alt tags and Google uses these alt tags to be able to determine what this image is about! So in this instance, these are company logos. So we need a way to dynamically feed in the name of the company and then append "logo" to that so that Google knows that this is the Spotify logo, the Bubble logo, whichever logo that we're displaying in this Repeating Group.

So what we'll do is we're going to click and we're going to say "Current cell's Company's Logo's Display," because in the Option set we'll have the name. Okay, so that would for instance be Spotify. Then I'm going to type "logo" to finish off that alt tag.

And I'll also do the same on the search page where we display logos down here. I'd make sure that we're feeding through the Parent group's Job's Company's Name. Okay, so that's Orbit and then space "logo". Now you need alt tags. Again, you will be marked down if you don't have these alt tags. When I'm talking about marked down, we get into a more intermediate topic here where we look at what's called, a tool called Lighthouse that Google uses to basically rank your page based on these four categories. We've got another image over here and for that one we do have an alt tag. Okay, so image size, image format, and alt tags for images.

Next we have Text. Let's just use this page. Now, Bubble provides this dropdown for us to set the hierarchy for these heading tags to help Google distinguish what is the most important text on the page. What is the second most important, what is the order that we are using these H tags in? Now, we provided the tools, it's up to you to implement the tools.

Every page needs a H1, pages usually have H2s as well. So I've set this as a H2, the second most important piece of text, and then I would have set "Product Developer" to H3, but in fact this is a link element. So Google does not treat this as a text element. It is a link element, but to give you a clue, for instance, on a blog post, blog posts would usually have blog title Heading 1 or H1, blog subtitle that could be a Heading 2, but I might choose to use multiple Heading 2s, which you can have. You can only have one H1, but you can have multiple Heading 2s for each paragraph or each section. So you have your section headings as well. I'll let you do your own research on setting up the sequential order of these heading tags, but, we have the tool to set this. Make sure that all of your text elements have one of these tags, Heading 1 to 6 or the normal. And "normal" is basically body text and that's used for mostly paragraph-type text.

Now, while we're on the topic of text, we also have what's called Accessibility. And accessibility, the most important part of accessibility is the contrast. And I've used a very nice dark color of #171717 for our text. Then our subtitle text, we have the same color, but I could have also used my charcoal here and that actually looks pretty good using the charcoal so I'm going to change that there.

Now, contrast is important because it allows people that can't see very well, to be able to see your text. You need to think about what color the background is and what color the foreground is. Foreground being the text, background being the canvas. So the page could be white, it could be grey, maybe the page is black, and then you need a white or grey text.

Now there is a tool that I tend to use for color contrast to check the color contrast. And this is something that Google actually does. It actually checks the color contrast to make sure that it's meeting a particular standard. And if I open up coolors.co/contrast-checker, this is what I tend to use, our text color in our example (our heading text) was #171717 and then the background color was white, so #FFF. And you can see that I've got a super score, full stars. I've got 17.93 out of 20.

I think the charcoal color, if we just check the charcoal color, that is #616161. So I'd come back here and make sure that this works on a white background. And you can see that for large text, anything above 16 pixels, it passes, but for small text, you know, it does pass, it does pass in terms of how Google will rank your page, but the contrast could be better. So I wouldn't use this charcoal color for text smaller than 12 pixels. We might start to run into some problems beneath that. So that is something to consider.

Next we're getting into best practices and I'll combine that with SEO. If I go back to the index page, notice that we're using Link elements and not Buttons. This is very, very important and a mistake I see most Bubble developers or other developers make mistakes. Internal linking is extremely powerful because you actually are passing on rank to your own pages when you link to your own pages! So your internal linking strategy needs to be pretty strong, I have all of my links in my footer, I also have links in the header and I make sure that ideally all pages link to all pages. Public-facing pages only - Google cannot log into your application.

So, in the navbar we have "Log in" and "Sign up" and that navbar is a reusable element so all of the public facing pages will have that linking. But then on this page I also have "Browse jobs," "Get started" and I can see that we do actually need to fix the destination links here. So for "Get started" we're going to go to page sign-up and for "Browse jobs" we're going to go to page search.

The other nice thing about link elements is that they operate a little bit faster, so you can navigate to another page a bit quicker than if it was a workflow, which needs to run a workflow step. So buttons are mostly for, if you need to run workflows and there's logic involved, use a button. Otherwise use a link element where you can style it like a button if you need to.

So those are the four major parts. So to reiterate, we've got: image size, format, and alt tags, we have H tags for text, we have accessibility and we have an internal linking strategy. Now beyond that, SEO is quite a big topic. You know, keyword research, using external tools for the type of content, content marketing, we're not going to discuss that, but it was just to show you around some of the tools in the Property Editor. Now, there are other things we need to consider as well, so I'm going to go to the job page and talk about page data.

Okay, so we have page data. Now, Google obviously wants links to all of your pages and when we have page data, that basically means that we're feeding through data from the database onto the page and that we have a slug field. So if I go to Jobs, Jobs has been fed through to page data and we have a slug field down here and that is used to help build our URL structures!

So what happens is if you think of either this job page or a blog page might be easier to understand, a blog page, you build it once, it's a dynamic page with page data and you feed through rows in the database for each blog post. What Bubble does in the background is we build a sitemap for you and that sitemap will include every single row in the database, a link to that particular Job in this instance, or a blog post, maybe you want to build some blog functionality. So if you have created 200 blog posts but you have a page that is just named "blog," we will dynamically create those URLs and enable them to be crawled whenever Google crawls your site.

Now what else can we do? So pages can be shared to social media sites, to other people's blog posts, and often little snippets of your site and the post would be created dynamically. If I choose page job, bring up the Property Editor and I scroll down, I have set the title dynamically for this link sharing to dynamically be the Current page Job's Title. Please go ahead and do the same. Then the description would be the Current page Job's Description. And if this was a blog post, I'll then also each blog post would have a main image and maybe the expression would be the Current page Job's Image. You can also upload an image to the File manager and then paste the link in here.

And we'll need to do the same obviously for the index page, very important. If I bring up the Property Editor and I scroll down, I've gone ahead and typed in "Workplace" as the title because it's a landing page or a marketing page and then I've also typed in my subtitle into the description. I could also upload this background image here if I wanted to.

Okay, and lastly on the Settings tab under SEO, I'll let you go ahead and you can fill out your Title, Site name, and Description, and this is what is shown in Google search when someone searches when you rank for a certain keyword. We've also got an image preview here and you'll be very familiar with what that looks like in Google search. For Workplace, I'd possibly either use the logo here or I would create a little image to represent what Workplace is about.

And there are a few more things down here that are slightly more intermediate level, and one of them is to expose a sitemap file, and if I check that Bubble then says, okay, which pages would you like to include and which pages would you like to exclude? So I'll definitely exclude page scratchpad. Well, I would delete scratchpad, and that's what we need to do before deployment. We're going to discuss that in a later lesson. But there might be instances where you do want to exclude certain pages, but given that certain pages are behind a login, we don't need to do that.

Okay, and we do have 301 redirections, and if you're migrating to Bubble and you have some blog posts that have been ranking really well on Google and you want to retain those URLs, well, you can simply forward them on to the new URL structure for this application that you've built.

Okay, so those are the SEO tools and as I've previously mentioned, when it comes to security, look, we provide the tools, all of the tools you need to be able to rank really well. It's up to you to be able to implement them correctly so that's something you need to look into, especially when it comes to the sequential order of heading tags. I hope you enjoyed that and I'll see you in the next lesson!