One place for hosting & domains

      AngularJS SEO with Prerender.io

      Introduction

      AngularJS is an excellent framework for building websites and apps. Built-in routing, data-binding, and directives among other features enable AngularJS to completely handle the front-end of any type of application.

      The one pitfall to using AngularJS (for now) is Search Engine Optimization (SEO). In this tutorial, we will go over how to make your AngularJS website or application crawlable by Google.

      Search engines crawlers (or bots) were originally designed to crawl the HTML content of web pages. As the web evolved, so did the technologies powering websites and JavaScript became the de facto language of the web. AJAX allowed for asynchronous operations on the web. AngularJS fully embraces the asynchronous model and this is what creates problems for Google’s crawlers.

      If you are fully utilizing AngularJS, there is a strong possibility that you will only have one real HTML page that will be fed HTML partial views asynchronously. All the routing and application logic is done on the client-side, so whether you’re changing pages, posting comments, or performing other CRUD operations, you are doing it all from one page.

      Rest assured, Google does have a way of indexing AJAX applications, and your AngularJS app can be crawled, indexed, and will appear in search results just like any other website. There are a few caveats and extra steps that you will need to perform, but these methods are fully supported by Google. To read more about Google’s guidelines for crawlable AJAX content visit Google’s Webmaster AJAX Crawling Guidelines.

      Our application will be able to be rendered by Google bot and all his friends (Bing bot). This way, we won’t run into the problem shown in the picture above. We’ll get nice search results as our users expect from us.

      • When a search engine crawler visits your app and sees the <meta name="fragment" content="!"> it will add an ?_escaped_fragment_= tag to your URL.
      • Your server will intercept this request and send it to the middleware that will handle the special crawler request. For this article, we have chosen Prerender.io so the next step is specific to Prerender.io.
      • Prerender.io will check to see if the requested page has an existing snapshot (or cached page), if it does, it will serve that page to the crawler, if it does not, Prerender will make a call to PhantomJS which will render the page in its entirety and show it to the crawler.
      • Non-cached pages that require the call to PhantomJS will take longer to render leading to a much longer response time, so it’s a good idea to cache pages often.
      • There are additional ways to do this!

      Alternatives:

      • Set up your own Prerender service using Prerender.io open-source code
      • Use a different existing service such as BromBone, Seo.js or SEO4AJAX
      • Create your own service for rendering and serving snapshots to search engines

      Prerender.io is a service that is compatible across a variety of different platforms including Node, PHP, and Ruby. The service is fully open-source but they do offer a hosted solution if you do not want to go through the hassle of setting up your own server for SEO. The folks over at Prerender believe that SEO is a right, not a privilege and they have done some great work extending their solution, adding a lot of customizable features and plugins.

      We will be building a simple Node/AngularJS application that has multiple pages with dynamic content flowing throughout. We will use Node.js as our backend server with Express. Check out the Node package.json file below to see all of our dependencies for this tutorial. Once you are ready, sign up for a free prerender.io account and get your token.

          
          {
            "name": "Angular-SEO-Prerender",
            "description": "...",
            "version": "0.0.1",
            "private": "true",
            "dependencies": {
              "express": "latest",
              "prerender-node": "latest"
            }
          }
      

      Now that we have our package.json ready to go, let’s install our Node dependencies using npm install.

      The setup here is pretty standard. In our server.js file we will require the Prerender service and connect to it using our prerender token.

          
      
          var express = require('express');
      
          var app = module.exports = express();
      
          app.configure(function(){
            
            
            app.use(require('prerender-node').set('prerenderToken', 'YOUR-TOKEN-HERE'));
            app.use(express.static("public")); app.use(app.router);
          });
      
          
          app.get('*', function(req, res){
            res.sendfile('./public/index.html');
          });
      
          app.listen(8081);
          console.log("Go Prerender Go!");
      

      The main page is also pretty standard. Write your code like you normally would. The big change here will simply be adding <meta name="fragment" content="!"> to the <head> of your page. This meta tag will tell search engine crawlers that this is a website that has dynamic JavaScript content that needs to be crawled.

      Additionally, if your page is not caching properly or it’s missing content you can add the following script snippet: window.prerenderReady = false; which will tell the Prerender service to wait until your entire page is fully rendered before taking a snapshot. You will need to set window.prerenderReady = true once you’re sure your content has completed loading. There is a high probability that you will not need to include this snippet, but the option is there if you need it.

      That’s it! Please see the code below for additional comments.

          
          <!doctype html> 
          <html ng-app="prerender-tutorial" ng-controller="mainController"> <head>
      
            <meta name="fragment" content="!">
            
            <title>Scotch Tutorial | {{ seo.pageTitle }}</title>
            <meta name="description" content="{{ seo.metaDescription }}">
      
            
            <link rel="stylesheet" type="text/css" href="/assets/bootstrap.min.css">
            <style>
                body { margin-top:60px; }
            </style>
      
            
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
            <script src="http://code.angularjs.org/1.2.10/angular-route.min.js"></script>
            <script src="/app.js"></script>
      
          </head>
          <body>
          <div class="container">
      
            
            <div class="bs-example bs-navbar-top-example">
                <nav class="navbar navbar-default navbar-fixed-top">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/">Angular SEO Prerender Tutorial</a>
                    </div>
      
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/about">About</a></li>
                        <li><a href="/features">Features</a></li>
                    </ul>
                </nav>
            </div>
      
            <h1 class="text-center">Welcome to the Angular SEO Prerender Tutorial</h1>
            
            <div ng-view></div>
      
      
          </div>
          </body>
          </html>
      

      In our app.js, the page where we define our AngularJS code, we will need to add this code to our routes config: $locationProvider.hashPrefix('!');. This method will change the way your URLs are written.

      If you are using html5Mode you won’t see any difference, otherwise, your URLs will look like http://localhost:3000/#!/home compared to the standard http://localhost:3000/#/home.

      This #! in your URL is very important, as it is what will alert crawlers that your app has AJAX content and that it should do its AJAX crawling magic.

          
      
          var app = angular.module('prerender-tutorial', ['ngRoute'])
      
          .config(function($routeProvider, $locationProvider){
      
            $routeProvider.when('/', {
              templateUrl : 'views/homeView.html',
              controller: 'homeController'
            })
      
            $routeProvider.when('/about', {
                templateUrl : '/views/aboutView.html',
                controller: 'aboutController'
            })
      
            $routeProvider.when('/features', {
                templateUrl : '/views/featuresView.html',
                controller : 'featuresController'
            })
      
            $routeProvider.otherwise({
                    redirectTo : '/'
            });
      
            $locationProvider.html5Mode(true);
            $locationProvider.hashPrefix('!');
          });
      
          function mainController($scope) {
            
            $scope.seo = {
              pageTitle : '', pageDescription : ''
            };
          }
      
          function homeController($scope) {
            
            
            $scope.$parent.seo = {
              pageTitle : 'AngularJS SEO Tutorial',
              pageDescripton: 'Welcome to our tutorial on getting your AngularJS websites and apps indexed by Google.'
            };
          }
      
          function aboutController($scope) {
            $scope.$parent.seo = { pageTitle : 'About',
              pageDescripton: 'We are a content heavy website so we need to be indexed.'
            };
          }
      
          function featuresController($scope) {
            $scope.$parent.seo = { pageTitle : 'Features', pageDescripton: 'Check out some of our awesome features!' };
          }
      

      In the above code, you can see how we handle Angular routing and our different pageTitle and pageDescription for the pages. These will be rendered to crawlers for an SEO-ready page!

      When a crawler visits your page at http://localhost:3000/#!/home, the URL will be converted to http://localhost:3000/?escaped_fragment=/home, once the Prerender middleware sees this type of URL, it will make a call to the Prerender service. Alternatively, if you are using HTML5mode, when a crawler visits your page at http://localhost:3000/home, the URL will be converted to http://localhost:3000/home/?escaped_fragment=.

      The Prerender service will check and see if it has a snapshot or already rendered page for that URL, if it does, it will send it to the crawler, if it does not, it will render a snapshot on the fly and send the rendered HTML to the crawler for correct indexing.

      Prerender provides a dashboard for you to see the different pages that have been rendered and crawled by bots. This is a great tool to see how your SEO pages are working.

      I recently got a chance to chat with the creator of Prerender.io and asked him for some tips on getting your single-page app indexed. This is what he had to say:

      • Serve the crawlers prerendered HTML, not JavaScript,
      • Don’t send soft 404s
      • If you’re sticking with #s for your URLs, make sure to set the hashPrefix(‘!’) so that the URLs are rewritten as #!s
      • If you have a lot of pages and content, be sure to include a sitemap.xml and robots.txt
      • Google crawls only a certain number of pages per day, which is dependent on your PageRank. Including a sitemap.xml will allow you to prioritize which pages get indexed.
      • When testing to see how your AngularJS pages render in Google Webmaster Tools, be sure to add the #! or ?escaped_fragment= in the right place as the manual tools do not behave exactly as the actual crawlers do.

      Hopefully, you won’t let the SEO drawback of Angular applications hold you back from using the great tool. There are services out there like Prerender and ways to crawl AJAX content. Make sure to look at the Google Webmaster AJAX Crawling Guidelines and have fun building your SEO-friendly Angular applications!

      Hreflang Tags: Your Gateway to International SEO


      Continually working to optimize your website for search engine visibility will ensure that new users can find your website on the web. There are a range of techniques you can use to improve your website’s SEO rankings for a national audience, however when trying to target audiences in multiple countries or visitors who speak more than one language, you’ll need to follow a few additional rules — one of which involves adding hreflang tags to your website.

      Search engines read hreflang tags to ensure that your pages are indexed correctly for a defined international audience, and that those users are directed to the correct versions of your site. Fortunately, there are a handful of relatively simple, easy methods you can use to insert and leverage these attributes on your website.

      In this post, we’ll introduce you to hreflang tags and explain why they’re important. Then we’ll walk you through how you can implement them on your website. Let’s jump in!

      An Introduction to Hreflang Tags

      First introduced by Google in 2011, the hreflang attribute specifies the language of the content on a page.

      You can use hreflang tags to target specific countries. They are handy for websites offering content in multiple languages.

      Hreflang tags are added to the <head> section of your web pages’ HTML code. Each tag should specify the language and country for a particular page.

      For instance, the tags might look similar to the following:

      <link rel="alternate" hreflang="x-default" href="http://example.com/">
      <link rel="alternate" hreflang="en" href="http://example.com/en/">
      <link rel="alternate" hreflang="de" href="http://example.com/de/">

      In the above example, the first line is the default page for users who don’t speak any of the languages specified. The second and third lines are for English and German speakers, respectively. The hreflang attribute specifies the language, and the href attribute specifies the URL.

      It’s important to note that hreflang tags are only used by search engines — they won’t be visible to users. Furthermore, hreflang tags are just one type of tag that can improve your website’s SEO and User Experience (UX). Other common tags include title tags and meta descriptions.

      Also, keep in mind that hreflang tags and canonical tags are not the same. A canonical tag is an HTML element that tells search engines which version of a page to index.

      A hreflang tag, on the other hand, tells search engines which version of a page to serve to users in different countries. Canonical tags solve duplicate content issues. By contrast, hreflang tags ensure that users who speak different languages are served the correct page versions.

      Why Hreflang Tags Are Important

      Hreflang tags are important for a handful of reasons. They affect both the UX and SEO of your website.

      Benefits of Using Hreflang Tags

      • Ensure that your pages are indexed correctly.
      • Direct users to the correct versions of your site.
      • Lead to higher traffic levels and more conversions.
      • Organize your website.
      • Localize your content for global users.
      • Prevent competition between alternate web pages.

      In addition, hreflang tags can improve your Click-Through Rate (CTR) from Search Engine Result Pages (SERPs). Users who see your site is available in their languages are more likely to click on it. This can lead to higher traffic levels and, ultimately, more conversions.

      How to Use Hreflang Tags (3 Technical Methods)

      There are three main methods for implementing the hreflang attribute on your website. Below, we’ll walk you through each one.

      However, regardless of your chosen method, it’s important to understand three basic elements of hreflang tags. First, the language attribute must be in a two-letter country code known as the ISO 639-1 format. ISO is short for International Organization for Standardization. This value consists of one language, and can be combined with an (optional) region.

      You can use the ISO 3166-1 region codes to specify a region. It’s important not to get the two confused or use them interchangeably. For example, the code for the Greek language is “el”, but the code for the Greece region is “gr”.

      The second rule is that each URL needs to have return links pointing to the canonical versions. For instance, if you have 40 languages, you would have hreflang links for 40 URLs.

      Finally, you need self links for your hreflang tag implementation to work. This means that each language version must also list itself using a self-referential hreflang tag, which the page points back to itself.

      Now, here are three methods for using hreflang tags!

      1. Use HTML Tags in <head> Sections

      As we mentioned earlier, one of the ways to implement hreflang tags on your website is to insert them in HTML tags. This is often the quickest and easiest method.

      However, this process can be time-consuming if you have a long list of languages. You would need to link each variation to every other variation. Additionally, WordPress would have to make multiple database calls to generate these links.

      Ultimately, this could slow down your site. Therefore, if you have a larger website or want to create a long list of languages, you might want to use the sitemap method instead (see Method 3).

      To use this HTML tag method, you must insert your hreflang tags into the <head> section of each of your pages. For instance, if you wanted to add English and Spanish versions for the United States version of your site, you would add the following code:

      <link rel="alternate" hreflang="x-default" href="http://example.com/">
      <link rel="alternate" hreflang="en" href="http://example.com/en/">
      <link rel="alternate" hreflang="es" href="http://example.com/de/">

      In the above example, the first line refers to the default page. The second and third are for English and Spanish speakers.

      2. Insert Hreflang Tags in Your HTTP Headers

      If you want to add hreflang tags in non-HTML pages, such as PDFs, you won’t have HTML code to place the tags in. When this is the case, you can use your HTTP headers instead.

      The code would look something like the following:

      <http://example.pdf>; rel="alternate";hreflang="x-default",
      <http:/example.pdf>; rel="alternate";hreflang="en",
      <http://example.pdf>; rel="alternate";hreflang="es",
      <http://example.pdf>; rel="alternate";hreflang="de"

      In this example, you’re adding variants for English, Spanish, and German. Each of the respective versions must be placed in the headers of each PDF file.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      3. Add Hreflang Tags to Your Sitemap

      The third method for implementing hreflang tags is using XML sitemap markup. This approach will let you add the hreflang attributes for all your site’s pages in one place.

      It can also help you avoid slowing down your page loading speed (which might happen if you place the tags in the head section of the pages). Plus, changing a sitemap can be significantly easier than modifying each page’s <head> tag.

      The sitemap method is similar to the HTML <head> tag method, except the xhtml:link attribute adds the hreflang annotations to each URL. Following the xhtml:link attribute at the front of your URL, you would add the alternative page versions, so your markup would look similar to the following:

      <url>
      <loc>https://example.com/link</loc>
      <xhtml:link rel=”alternate” hreflang=”en-us” href=”x-default”
      <xhtml:link rel=”alternate” hreflang=”en” href=”https://example.com/link/” />
      <xhtml:link rel=”alternate” hreflang=”es” href=”https://example.com/enlance/” />

      Here, you’ll see that each URL has a hreflang attribute and return links to the other URLs. A separate <url> element should be created for every URL. Each element must include a <loc> that indicates the page URL. The URLs also need a <xhtml:link rel=”alternate” hreflang=”supported_language-code”> element that lists each alternative version of the page.

      You can add all of the necessary tags to one file. While the order of the elements doesn’t matter, we recommend keeping them uniform, because this layout will make it easier to check for mistakes. You can submit your new sitemap to Google Search Console when you’re done.

      Tools That Generate Hreflang Tags Automatically

      The time it takes to generate and implement your hreflang tags can vary depending on how many versions you want to create and which method you use. However, a handful of tools can simplify and speed up the process. Let’s take a look at some of the most popular ones!

      Weglot Translate Plugin

      Weglot is a popular and reliable translation tool that can add hreflang Google tags and markup to your website:

      The Weglot Translate WordPress plugin

      Weglot can be a helpful solution if you’re a beginner and unfamiliar with working with code. It automatically identifies href tags in your code during translation, and changes the page header links.

      Hreflang Checker

      It’s crucial to always double-check your hreflang tags to ensure that they’re working correctly after you’ve placed them. The Hreflang Checker tool provided by Weglot can help simplify this process:

      The Hreflang Checker tool

      To use it, just copy and paste the URL that you want to check into the text field (make sure to include “http://” or “https://”) and select a search engine bot to emulate. Then click on the Test URL button. It will display a search results page showing your tags’ status.

      XML Sitemap Generator

      If you want to implement hreflang tags using the sitemap method, you can utilize the Hreflang XML Sitemap Generator Tool. It was created by Erudite, a digital marketing agency:

      The Erudite Hreflang Sitemap tool

      After creating an account using your email address, simply tell the tool where to send your sitemap and upload your CSV file, including a column for each language. Then Erudite’s tool will automatically generate an XML sitemap.

      Hreflang Tags Generator

      If you need help generating the link elements for your hreflang tags, you can use the Hreflang Tags Generator:

      the Hreflang Tags Generator tool

      This tool, created by Aleyda Solis, can streamline creating tags for your multi-language or multi-country website. You can generate these tags by either adding the (up to 50) URLs to tag in the given form, or uploading them via a CSV file. Again, you’ll need to make sure that there is one column for the URLs.

      Ahrefs Google Sheets Template

      Another tool that you can use is the Google Sheets template provided by Ahrefs:

      The Hreflang planner Google Sheets template

      Under the Setup tab, select your site’s language-locale (default language), then choose up to four additional variations. For instance, you could pick English as the Default language-locale, followed by Spanish, German, Chinese, and Russian as the alternatives.

      Next, under the URLs tab, you’ll find five columns, each with its own header cells that correspond to the language you chose in the Setup tab. There should also be an X-Default column.

      Now paste the URLs into the respective cells. Then, under the Results tab, you’ll find an auto-generated code for your XML sitemap. You can copy and paste everything in the A column into an XML document and upload it via Google Search Console.

      Tips and Best Practices for Using Hreflang Tags

      Now that you understand the basics of hreflang tags and their implementation, let’s discuss some tips for using them. Below are some key best practices to follow!

      Make Sure the Tags Are Bidirectional

      Hreflang tags operate in pairs, meaning that they are bidirectional. When you add a hreflang tag to an English page pointing to a Spanish version, you also need to ensure that the Spanish variant returns with a hreflang tag pointing to the English version.

      This setup tells search engines the relationship is in agreement, and that you control both pages. If two pages don’t point to each other, Google will ignore the tags.

      Specify the Default Page for Users Who Don’t Speak Any of the Specified Languages

      Specifying the default page for users who don’t speak any of your set languages is important. It will ensure that visitors are directed to the correct version of your site.

      You can do this by adding a tag with the language code “x-default”. It would look something like:

      <link rel=”alternate” hreflang=”x-default” href=”https://example.com/” />

      The default page will be used in situations where Google is unable to extract the language or region for users when it’s not specified or listed. Instead, the x-default page will ask users which language they prefer, then point them to the appropriate alternate version.

      Use Absolute URLs

      Absolute URLs are complete URLs that include the domain name. They are also the preferred type of URL to use with hreflang tags. They are less likely to be affected by changes on your website, and make it easier for search engines to index your pages correctly.

      It’s important to make sure that your hreflang tags contain absolute URLs. In other words, the code should look like “https://example.com/link” rather than “example.com/link”.

      Make Sure Your Hreflang Tags Are Valid and Correctly Formatted

      As we mentioned earlier, the correct ISO language and region codes must be used when creating your hreflang link attributes. Otherwise, you may encounter a message in Google Search Console informing you that your site doesn’t have any hreflang language tags.

      Remember to use the ISO language codes for language attributes and the region codes for geographical locations. For instance, while “kr” is for the region of South Korea, “ko” is the code for the Korean language.

      Keep Your Hreflang Tags Up To Date

      As you continue adding content and pages to your website, keeping up with your hreflang tags becomes more critical.

      Let’s say you add a new domain for a particular country. Then you’ll need to add the appropriate hreflang tags to your existing pages, and check to ensure that they point to the new domain.

      The same applies if you delete any language versions of your website. If you remove a language, you’ll need to delete or replace the hreflang tags pointing to it. Pointing to missing or incorrect URLs can hurt both your UX and SEO.

      Monitor Your Website for Errors

      Just as essential as keeping your hreflang tags updated is consistently monitoring your website for errors. This process includes checking your site’s source code to make sure that all necessary tags are present.

      You can use a tool such as Google Search Console to monitor your website more easily. This platform will help you verify whether your pages are being indexed correctly.

      Optimize Your Website for International Audiences

      Using hreflang tags can improve the SEO and UX of your website for international audiences. These attributes can help your site reach users in different countries, and ensure that the correct content is served in their native or preferred languages.

      As we discussed in this article, there are three methods you can use to implement hreflang tags:

      1. Add the attributes to the <head> section of each page.
      2. Place them in the HTTP headers of non-HTML content pages.
      3. Put the tags in your XML sitemap, so that all the attributes are in one place.

      Do you need help optimizing your multilingual website? Check out our DreamHost Pro Services to learn how we can take your site to the next level!

      International SEO Made Easy

      We take the guesswork (and actual work) out of growing your website traffic with SEO.

      shared hosting



      Source link

      On-Page vs. Off-Page SEO: Complete Guide & Essential Tips


      Search Engine Optimization (SEO) is a complex and ever-evolving field that can certainly be confusing for beginners — and understandably so. With over 200 ranking factors and new “rules” being added by search engines all the time, it can be tough to know where to start.

      Well we’re here to shine the light on the situation for you. You see, there are two main “categories” of SEO — on-page and off-page. One refers to things you can directly control such as optimizing your website’s title tags and headings, while the other refers to external signals such as others linking to and sharing content from your site.

      When you understand the foundations of these distinct optimization types, you’ll be able to develop a comprehensive and balanced SEO strategy. Knowing how to cover all your bases, from image optimization to link building, can help ensure your site’s organic search success.

      In this complete guide, we’ll introduce you to SEO basics and explain the difference between on and off-page SEO. Then, we’ll share different ways you can improve both to boost your site’s rankings. Let’s get started!

      Why SEO Is Important for All Websites

      Before we get into the specifics of on-page and off-page SEO, let’s discuss the importance of search engine optimization more broadly.

      On a daily basis, the average online user will conduct a wide variety of searches on the web. From looking up directions to the nearest shoe store, to learning exactly how many steps are in the Eiffel Tower, most of us turn to the search bar as a reflex. In fact, more than 50% of online traffic comes from organic search.

      When it comes down to it, SEO is so important because all websites have the same goal – to be found and seen. A web page’s search rankings have the power to drive traffic, generate leads, and boost conversions. Therefore, SEO is relevant to almost every aspect of your online marketing strategy.

      The Difference Between On-Page and Off-Page SEO

      Now that we’ve covered the SEO basics, let’s dive into the differences between on-page and off-page SEO.

      What Is On-Page SEO?

      Also known as ‘on-site SEO’, on-page SEO is pretty self-explanatory. It refers to all the page ranking factors you can manipulate or optimize on your website. These elements can include the content on your product and service pages, blog posts, landing pages, and microsites.

      On-page SEO encompasses title tags, meta descriptions, heading structure, content, image optimization, accessibility, and overall website performance.

      What Is Off-Page SEO?

      As you might expect, off-page SEO or ‘off-site SEO’ includes all page ranking factors beyond your website.

      For instance, ‘backlinks’ (or ‘inbound’ links) are links on other web pages that direct back to your website. When your site has lots of backlinks from credible sites, they can benefit your search rankings because these pages can pass on some of their authority to you.

      This is a classic example of off-page SEO, but there’s more to it. Off-page SEO is not as straightforward as on-page SEO. However, it includes concrete SEO strategies for social media, domain authority, and more.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      10 Ways to Improve On-Page SEO

      It’s time to go into more detail for on-page SEO. Here are 10 factors to consider when optimizing your web pages for SEO!

      1. Create High Quality Content

      Creating high quality content is one of the most effective strategies for boosting your chances of appearing higher on Search Engine Results Pages (SERPs). After all, Google’s algorithms are designed to provide users with only the best and most relevant content.

      Keep in mind that quality includes everything from appearance to practicality. Your ultimate goal should be to create visually appealing, accurate content that will serve a useful purpose.

      For instance, if you are starting a blog, you might want to make sure you have a clear niche and stick to it. That way, you can work on growing your knowledge and establishing credibility in your subject area:

      gardening website example of high quality content

      Similarly, you’ll want to produce new blog posts regularly because readers and Googlebots alike favor fresh content. You may also want to develop a brand style guide and reference it when creating new content. This way, your audience can feel reassured by consistency.

      Calls to Action (CTAs) are also vital if you want your content to inspire your readers to make a move. Other indicators of high-quality material include images and reader-friendly text, but we’ll dive more into those later.

      2. Use Target Keywords

      Using target keywords on your page is one of the most straightforward SEO tactics you can implement. However, you’ll need to consider your intended audience before you can find target keywords.

      For example, if you run a craft blog, your ideal reader might be parents of children under 12. You could hone it down further to parents in the Pacific Northwest. Once you know your audience, you can find target keywords using tools such as Google Keyword Planner.

      You can start by introducing keywords that you anticipate your target audience may use. Then, see what similar words and phrases are produced. Choosing keywords with high monthly search volumes but low to medium competition is often best.

      It’s also wise to choose a diverse range of keyword types and lengths. For example, you may decide to use some shorter, medium-competition words. On top of that, you could select some lengthier keywords that are highly specific. These are called ‘long-tail keywords.’

      For example, if you run a candy store in Wisconsin, you might choose ‘candy shop’ and ‘candy store’. Then, for long-tail keywords, you could use ‘best candy shop in Milwaukee’:

      Google Ads Keyword Planner Tool
      Google Keyword Planner

      Once you have your keywords, you can place them anywhere on your site. You can add these phrases to blog posts, your About Us page description, product details, and anywhere else you like. However, you’ll want to avoid keyword stuffing.

      Essentially, you can use keywords anywhere you see text on the front end of your site. We’ll get into less visible locations for keywords later.

      3. Optimize Images

      Users prefer high-quality images, and search bots favor lightweight, SEO-optimized ones. Let’s consider a few ways you can ensure your photos are helping your search engine rankings.

      To start, it’s best if images are clear and high-resolution. Beyond that, you can compress image files so they are not large and heavy. Whenever possible, you may want to use a compression tool such as TinyPNG:

      TinyPNG online image compression tool

      This free tool enables you to shrink down PNG, JPG, and WebP files so that they don’t slow your site’s loading times (more on this later).

      Another simple way to optimize images is by adding ‘alt text’ (alternative text). Simply put, alt text is a summary of an image that users on the front end can’t see. It serves two essential purposes.

      Firstly, alt text increases your site’s accessibility by enabling users with impaired vision or complete loss of sight to interact with images. Assistive technologies (such as dictation tools) can help some visitors listen to the descriptions of your visual media files. Furthermore, bots can’t see pictures, but they can read the alt text.

      How you add alt text will depend on the Content Management System (CMS) you use. With WordPress, the process is simple. When editing your site in the Block Editor, just select the block for an image and find Alt text in its settings. Here, you can easily type in a brief image description and input some relevant keywords.

      4. Create Internal Links

      Whether you run a blog or a multi-page website, you will likely deal with many unique links. An ‘internal’ link is a URL that leads to another page on your website. For instance, you may have a footer with links to your blog, contact page, and other essential information.

      When creating your web pages, it’s a good idea to include internal links wherever possible. Of course, this process should always be done naturally. These internal links are crucial because web crawlers use them to jump from page to page while scanning information.

      In fact, if one of your web pages doesn’t have any internal links leading to it, it’s considered an ‘orphan page’. Search bots can’t find it. Therefore, it can’t be indexed, and it definitely can’t be ranked.

      Furthermore, internal links can keep users on your website for longer. This increased time on page may lead to conversions, lead generation, and more. Lastly, and most importantly, internal links help provide a positive UX.

      For instance, in a blog post explaining a complex subject, it might make sense to link to another one of your articles elaborating on a related concept. Additionally, internal links can help users navigate around your site as they search for specific details, such as contact information.

      5. Optimize Permalinks

      While we’re on the subject of URLs, let’s discuss permalinks. These are the permanent URLs that represent your pages, and they are also crucial for strong SEO.

      When creating new pages, you’ll want to ensure that your URLs are straightforward and intuitive. For example, if your domain is mywebsite.com, your other pages might have URLs like mywebsite.com/about and mywebsite.com/contact.

      If you run a blog, your URLs may need to explain more complex information, but remember to keep things simple.

      For instance, for an article titled “How to Declutter Your Bathroom in 10 Simple Steps”, using the full title would be too lengthy. Instead, you could use mywebsite.com/declutter-bathroom-guide.

      Using concise permalinks is best. In fact, certain ‘stop words’ (prepositions, articles, connectors) are ignored by search engine bots. Therefore, they should be left out. It’s also wise to include any relevant keywords in your permalinks.

      6. Consider Readability

      Whether your content is brief or lengthy, readability is an important ranking factor. Your articles and pages should be well-written. It’s best to write directly and concisely, using shorter sentences and vocabulary that fit your audience.

      Additionally, you can use headings and subheadings to organize your content. These elements are essential if you’re producing lengthy how-to guides or listicles:

      WordPress heading structure

      Headings also create more opportunities to insert relevant keywords. Furthermore, you’ll want to ensure that sections are neither too short nor too lengthy. Quality content tends to be skimmable without large blocks of text. You can also use those high-quality images we mentioned before to break up the text.

      7. Utilize Title Tags and Meta Descriptions

      Meta tags are bits of HTML code that signal to search engines how they should read your content.

      Title tags and meta descriptions are examples of these, and key for helping search engines understand how to rank your website’s content. These meta tags generate information that will appear to users in the search results and might encourage them to click on your page.

      Here’s an example of a title tag:

      example of title tag appearing in web browser tab

      Now let’s look lower down the page to see a meta description:

      meta description example in Google search results

      These elements are critical if you want to boost your search engine rankings. Without them, your page’s content will be advertised with a chunk of the first paragraph on the page. Furthermore, web users will have a hard time navigating back to your page when using multiple tabs in their browser.

      To easily add title tags and meta descriptions to your posts, you might want to try out a free WordPress SEO plugin. Yoast SEO and All In One SEO (AIOSEO) are popular choices.

      8. Monitor Site Performance 

      Site performance also plays a crucial role in search engine rankings. Here, we’re mainly talking about speed.

      As you can imagine, users looking at the search results don’t want to be led to pages that are slow or don’t work correctly. In fact, Google has created what it calls Core Web Vitals. It assesses page loading times, interactivity, and page stability to give you a Core Web Vitals score.

      If you’d like to check how your site performs, you can test it using tools such as Google PageSpeed Insights:

      Google PageSpeed Insights - Core Web Vitals Results

      Simply enter your website’s URL and see how it does. If your site needs some performance improvements, you can try implementing caching or lazy loading. Even better, you could ensure that your web host uses a Content Delivery Network (CDN), though this may require changing hosts.

       

      9. Prioritize User Experience (UX)

      As we approach the end of our on-page SEO strategies, it’s time to discuss UX. This concept is behind most other optimization tactics because the ultimate goal is to make a website more user-friendly.

      On top of quality, performance, readability, and strong internal linking, there are a few more specific ways to create a positive UX for your site’s visitors.

      A huge part of UX is linked to usability. Therefore, smooth navigation is particularly important.

      To make exploring a multi-page website easier, it’s best to use a prominent navigation menu either at the top or left of your page:

      example of accessible website navigation

      Additionally, you may want to create a search bar feature and include helpful links in your footer. All these elements help users navigate around your site without scrolling.

      10. Optimize Pages for Mobile Devices

      Last but not least, if you want your pages to rank at the top of the search engine results, they must be mobile-optimized. This is because most internet users prefer to use their smartphones or other handheld devices.

      There are currently more than 4.9 billion mobile internet users globally, and the number is growing. Therefore, it’s no surprise that Google declares mobile-friendliness a must for SEO. Plus, with the rise of m-commerce, any online businesses that neglect their mobile visitors are likely to miss out on significant sales.

      There are a few very simple ways to ensure your website is mobile-optimized. For starters, you can opt for a mobile-friendly WordPress theme. That way, you can set it and forget it.

      If you expect to customize your site extensively, you may want to use a WordPress page builder that has mobile previewing and modification settings:

      BeaverBuilder website page builder tool

      Beaver Builder is a popular choice that offers responsive designs and editing features. It’s also easy to use with a drag-and-drop interface.

      How to Improve Off-Page SEO (3 Essential Techniques)

      Now that you know everything about on-site SEO, let’s explore how you can improve your rankings by other means. Keep in mind that the following section is briefer, simply because you have more control over on-page than off-page SEO.

      1. Build Backlinks (Domain Authority)

      Backlinks to your site show Google that your content is credible. That’s why building backlinks can enhance your website’s ‘domain authority’. Your site accumulates a positive reputation through how many backlinks it has.

      Gaining backlinks takes time and quality content, but you can use some measures to actively participate in the process. For instance, you can write guest posts for other credible blogs in your niche and link to your content

      You can also monitor your site’s mentions online and request that any unlinked instances be credited. Furthermore, some common formats that get linked to include how-to guides, “best of” listicles, and even infographics.

      Ahrefs

      You’ll want to be careful not to participate in anything shady when building your inbound links because you can be penalized by Google. Since backlinks require time and effort, we recommend using tools such as Ahrefs, which has a backlink checker.

      2. Support Social Proof

      Another way to build trustworthiness is to provide simple evidence. ‘Social proof’ typically refers to things like reviews and testimonials.

      You can create a Google Business Profile for your company or website to gain social proof. This platform has a review feature built-in:

      Google Local Search results

      Other types of content marketing can also serve as social proof. For instance, conducting a survey and then publishing your findings is excellent evidence of your legitimacy and professionalism.

      Additional forms of social proof include testimonials and partnerships with other credible brands or individuals. For example, some companies collaborate with influencers in their niche to build more social proof.

      3. Grow Your Online Presence on Social Media

      On the subject of influencers, social media is perhaps one of the most important channels where e-commerce businesses can further build their off-page SEO.

      That’s because you can share quality content on any social media platforms you use. This material can include stunning images, target keywords, and links:

      Instagram business page

      Ultimately, social media is the place to build a brand, so we recommend developing an entirely separate (and complementary) social media strategy. All of these efforts will contribute to your off-page SEO because social media posts and pages can appear in search results.

      However, you’ll want to consider which platforms your target audience uses. For instance, if you are appealing to millennials, you might want to focus on Instagram. Whereas with a younger audience, you may prioritize creating content for TikTok.

      Improve Your Site’s Visibility Using On-Page and Off-Page SEO

      Search Engine Optimization (SEO) is a complex and dynamic field. That can make it challenging to get started with both on-page and off-page SEO strategies. However, it’s essential to prioritize these optimization methods to boost your website’s visibility.

      When it comes to on-page optimization, you can start small, implementing keywords, internal links, and high-quality content. Later, you can advance to elements such as title tags and meta descriptions. For off-page optimization, backlinks, testimonials, and a strong social media presence are essential.

      If you’re a beginner in SEO,  you might want to forget the site audits and leave them to the professionals. Check out our DreamHost Pro Services and free up your time to focus on the creative side of your business. We offer specific plans for SEO marketing that will help you rank higher on SERPs. Plus, we have an SEO toolkit to take your site to the next level!

      Search Engine Optimization Made Easy

      We take the guesswork (and actual work) out of growing your website traffic with SEO.

      shared hosting



      Source link