Search Engine Optimization

SEO

SEO refers to organic methods to improve your website's search engine performance and visibility. SEM (Search Engine Marketing) refers to paid methods to improve visibility in search engine results, such as using Google Adwords or Pay Per Click keyword campaigns. We will focus on organic, technical-based methods here.

Indexing

First, It's important to know how GoogleBot (the indexer), indexes webpages. Using the index page, the crawler will navigate around the page just as a user would, by rendering the page and clicking around using <a href="/stuff"> tags. Googlebot indexes all content on each page, including meta tags which can indicate a title, description, and other information. If Javascript is used to dynamically load content, the indexer must wait for rendering and places the page into a rendering queue. This isn't an ideal scenario for indexers because some bots do not support JavaScript at all. This is also why server-side rendering is preferable because all content is immediately available to crawlers and users. Using Google's Search Console you can see if a particular URL is being properly indexed.

Google has switched to mobile-first indexing because most of its users access search results on a mobile device, making it critical to have a mobile-optimized site. Use Google's mobile-friendly test to see if there are any issues with your mobile site.

It's a good idea to build and upload a site map yourself if your site is large and complex. This will help GoogleBot to index your site properly.

This guide from google is a great resource for understanding how Google Index works and also provides some great tools to debug and optimize your indexing and search performance and visibility.

Making it possible for Crawlers

If your site is using the app shell model, it may be more difficult or impossible for a certain crawler to read the content on your site. As we've discussed, some crawlers are not able to read JavaScript, and the crawler may not wait for the page to be fully rendered and client-side requests to be completed. Thus, it's a good idea for crawlability to use a server-side or pre-rendering model. If your site isn't server-side rendered, you can use a tool like prerender.io so that your site is rendered, cached and sent in this form if a crawler requests the site, but sent in its usual form if a user requests the site.

It's also import to make sure GoogleBot is not indexing auth challenge or error pages. One method is to dynamically include robot meta tags with the noindex attribute, which tells crawlers to not index the page.

<!-- Googlebot won't index this page or follow links on this page -->
<meta name="robots" content="noindex, nofollow">

If an error occurs, dynamically include the robot meta tags:

axios.get('/user?ID=12345').then(response => {
  if (response.error) {
    // get the robots meta tag
    var metaRobots = document.querySelector('meta[name="robots"]');
    // if there was no robots meta tag, add one
    if (!metaRobots) {
      metaRobots = document.createElement('meta');
      metaRobots.setAttribute('name', 'robots');
      document.head.appendChild(metaRobots);
    }
    // tell Googlebot to exclude this page from the index
    metaRobots.setAttribute('content', 'noindex');
    return;
  }
});

Making it easier for Crawlers

TL;DR: Increase the quality of your site

• Performant
• Mobile optimized
• Up to date with relevant and rich content

Performance, mobile optimization (use of viewport tags), clarity of content and relevance to specific keywords used all can impact SEO. Google ranks better performing sites higher. Unique, targeted and rich content, including relevant keywords and terminology all can help SEO. Crawlers generally prefer sites that are more recent so make sure content is up to date.

Page Rank

TL;DR: Increase the number of sites (high quality is better) that link to yours

Link Building campains

• Creating 'key pages' to focus inbound traffic
• Develop SEM strategies to target particular keywords using Google Keyword Planner

• Google search console

  • Tool to measure and improve your site's performance on google search

• www.spyfu.com

  • Learn PPC (pay per click) and SEO budgets and strategies per domain

You can see how the indexer is crawling your site using the Google Search Console. You can also submit a URL directly to be crawled and debug the output.

Structured Data

Sending structured data for your site is one way to better help Google understand the content of your site. Structured Data is a standardized format for providing information about a page and classifying the page content. Google uses structured data to find information about a page and to understand it more. Google Search also uses structured data to format and enhace search results so they appear in a more user friendly manner.

• Creating structured data
• Structured Data Testing tool

Meta Tags

Make sure every page has:

• descriptive title tag that uses some popular keywords that are relevant to your site.

  • You can use google trends to try and find a good keyword that is most relevant to popular search queries.

• meta description that is detailed and includes valuable snippet with descriptive information about your site.

  <meta content="Google's generation of page titles and descriptions (or &quot;snippets&quot;) is completely automated and takes into account both the content of a page as well as references to it that appear on the web. The go" name="description">

* viewport tags

#### Opengraph tags
[Open graph](https://ogp.me/) allows your sites pages to be shared in a way that is formatted and displayed correctly on various social platforms. It also can help in the way a text message displays previews of the snipet, for example.

#### Twitter Cards
Twitter cards are basically like Opengraph for Twitter. They allow pages to be shared on Twitter in an elegant way. https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards

<img src="https://i.imgur.com/XRXzats.png" alt="Twitter Card example" role="presentation" title="Twitter Card example" width="375" height="350" />

<br />
<br />
Follow me on twitter!