In our last technical SEO lesson, we talked more about the on-page elements. These are things that the web crawlers sent from search engines like Google see in the code and find relevant. They are things like our title tags, h1, and content on the page. Now for the 2nd part of technical, we’ll go more into understanding the server codes. It is important to you or your business because we want to ensure we’re not leaving customers or even web crawlers a lousy experience where people can’t get to your pages.
What you’ll learn by the end of this lesson:
- What are server codes?
- How to make your page search friendly for web development
- What is schema markup and how to produce the code
- How to set up mobile tags and implement language tags
What are server codes or status codes?
These are messages your server, or what your website is hosted on, that communicate to you what’s happening. It helps us figure out if we need to take any actions to fix these issues.
The different types of status codes
200 – page loads okay! The status code you ultimately would always want.
301 – permanent redirect. Whenever you want to permanently redirect your customer to another page when they land on an individual page, you’ll want to use this 301 redirect rule. Most SEO experts agree that using this 301 redirect will pass 90-99% of authority over.
302 – temporary redirect. Used in cases like when someone fails at logging in, or you’re hitting the language button on a website to switch over. There aren’t many SEO’s who will use this, but it’s important to know it’s available to you and how it’ll apply to different use cases.
404 – page not found. One of the most common error pages or status pages you’ll see on the internet. It means that we weren’t able to get to that page and were not able to find it. Some SEO’s see this as an opportunity to enhance a user’s experience by getting creative with their 404 pages like Airbnb.
410 – page is gone. This means that the page is gone and will be available again. Most SEO’s won’t need to use this, but once again it’s good to know and be aware of it.
500 – server error. It means there is a problem with your server, and you will need to take a look and debug it or talk to your webmaster.
How to be search engine friendly for web development
One problem that exists and most people aren’t aware is when their web content is not crawlable. How do we see what a search engine sees? Here’s a simple trick:
Step 1: Go to your respective Google search engine (Ex: If in Canada go to Google.ca or U.S Google.com).
Step 2: Then type in “cache:” (no quotation marks in the actual search)
Step 3: Type in the desired URL afterward.
It should look something like this:
and once you hit enter you’ll see something like this:
Now that will give you an excellent idea of what Google sees. Of course, if you get a blank page or just a few pieces of text then you know Google does not see your page. This little trick will help you understand what parts are getting crawled and not crawled by Google.
Some things to remember:
- Google can not crawl images. They don’t know that they’re looking at Office Supplies photo like we can. Solution: If you are savvy enough you can go into the code for your HTML and add in something called alt tag. Thi will allow you to give it a name so Google can then understand what the image is. For our Staples examples we would code the picture like this:
<img src=”https://www.staples.ca/sbdca/en_CA/img/mktg/170524/dollardeals_1008_408.jpg” alt=”Office supplies collection”> - Any Adobe Flash will not be crawled by Google search engine bots or crawlers. As SEO’s we will tell our web developers to avoid using flash and use HTML instead. Or where possible to supply a video transcript, so it helps Google understand the content better.
- A quick way to also check if crawlers can see your text is checking the source code of the web page and then searching for a snippet of text. Here’s an example of text on a page that looks crawlable but isn’t when you find it in the source code:
What is Schema Markup?
Schema markup is a way to show more information about your site on the search results page like reviews, price, stock as one of the few examples. It makes your search result stand out even more and helps you benefit in most situations. If you’re not ranking at the top of the first page, but are ranking in the middle or bottom, then your marked-up result catches your customers’ eye first (if the rest of the search results don’t mark it up at least).
What is cool about this is not a ton of people are doing this in e-commerce, and the 2nd great thing about this is it’s easy to implement!
When we talk about schema markup, it accurately is putting in a few lines in your code that search engines can read in a particular language (in this case schema). It’s a language that companies like Google, Microsoft, Yahoo, and Yandex collaborated. So we know this language is sticking around for quite some time.
Let’s jump into what schema is more visually, so we get a better understanding of what this is.
What is an example of a marked-up search result?
Here’s the product of a website that has marked up its content to display accurate information in the search results:
In this example, BestBuy has updated its schema markup to show star ratings, how many votes, and the price of the product. It helps the user know right away if this is what they’re looking for and some more information without leaving the search result page to see if they should buy it.
Now consider the following: what could be a negative impact of implementing schema markup? Take 5 minutes to think about this.
Answer: One of the negative aspects of it is if the customer or user finds your ratings, price, or any piece of information that could hurt your brand then you’ll lose that click. For example say if you didn’t have schema implemented, the user would have to click through to find all that out. Now if you ask me I’d opt to implement schema because at the end of the day you want your customers to win and make their life as easy as possible for them. It goes back to the philosophy of optimizing for the user experience.
What does schema markup look like on the backend and how would we code it?
Well before we jump into it, we’ll be using this particular site to help us generate it and then go into what each portion means.
Let’s select the product and then fill out the rest of the information.
We’ll go with the “Bose® SoundLink Colour Bluetooth Speaker II, Coral Red” as our test product for today.
After we fill it out, we’ll get something like this:
Then you would go to this product page’s header and paste this code between <head> and the closing </head> tags. Once you’ve updated it, you can test it out using this Google structured data testing tool.
Both tools are excellent to see A) how each piece of information appears in the script. B) What your data looks like to Google to ensure it correct.
Are there any other markup languages we should know?
The other one I would update is open graph tags. Like Schema which was created by Google and the rest, we have Opengraph which is created by our friends over at Facebook. It is particularly for sharing on Facebook and will not improve or help your SEO. It’s just worth calling out because we know social does play a part in the customer journey. We won’t be going into this one like we did for schema but you can find more information here on how the code looks.
How to set up mobile tags and implement language tags
Implementing your hreflang and mobile tags is critical. It tells Google “hey I have this page for mobile devices!” Language tags or hreflang tags similarly tell Google that this content is in different languages. It honestly makes a huge difference for e-commerce sites operating under the same umbrella but in different countries. The biggest benefit is Google can show you in the right search engines.
Now that we know these tags are important how do we implement them? Well, luckily it isn’t too difficult.
How to implement Mobile tags:
Let’s say you have your desktop URL and mobile URL.
Desktop: https://zain.email
Mobile: https://m.zain.email
You will need to implement the code twice. Once on the desktop page and again on the mobile page. The code goes something like this:
For Desktop: add a rel=”alternate” tag pointing to the mobile version of that exact page.
For Mobile: add a link rel=canonical tag pointing to the desktop page.
For Responsive design:
If your site is in responsive design (go you!) then all you have to do is the following.
Add this meta tag to the head of the document
How to implement language tags or hreflang
Language tags or hreflang tags are pretty easy to implement. Here’s how you do it.
Now you’re basically an SEO pro! However, if you are still feeling a little unsure then here are some resources.
Google’s guide on Mobile SEO – Separte URLs
Practice Questions
- What is a 500 error?
- How do you fix a 404 error?
- What kind of schema markup would be good for a wedding planner’s website?
- What is a 302 error?
- Write out the code for implementing alternate languages for www.moz.com. Languages are US english, UK english, CA english, and CA french.
- Why does a rel=canonical tag for mobile refer to the desktop page?
- How do you get Google to read an image and rank for it?
- How do we determine what a page looks like from Google’s point of view?
- How do we make sure a responsive designed website is search engine friendly for mobile?
- Should you have a canonical and an hreflang tag or just one of them on desktop?