Development Strategies to Increase SEO Rankings

As the need to rank higher in search results and get more organic traffic increases and becomes a core to establishing a robust online presence, we need to implement multiple strategies to ensure that we’re accomplishing these objectives.

Self-hosted webfonts to decrease the number of external requests.

Web fonts are a common resource to use in modern web applications. Services like Google Fonts or Adobe Fonts are very easy to use and have a wide variety of fonts, but we want to avoid those external requests to improve our response times.

In order to accomplish this, we need to reference our fonts directly to our server. We can do so by changing the font-face src to point to the local path where we have placed our fonts.

@font-face {
  font-family: 'Lato';
  ...
  src: url("/assets/fonts/Lato.woff2") format("woff2"), url('/assets/fonts/Lato.woff') format('woff');;
  ...
}

WebP images with fallback to jpg/png to improve page load speed.

Assets have a critical impact on response times, which means it is important to use the best formats and display images appropriately. We can improve image loading times by rendering WebP format images as the first option and use of jpg or png formats as a fallback.

To do so, we need to make use of the HTML tag <picture> which allows us to use <source> to set the srcset value for the webp image location and the <img> to set the image src value for the png/jpg image location as fallback.

<picture>
  <source srcset="/assets/images/cat.webp">
  <img src="/assets/images/cat.png" alt=”Cat”>
</picture>

Pay attention to Google's minimum threshold for all Core Web Vitals in order to benefit from the associated ranking signal.

Since Google announced a change to search rankings that takes into account Core Web Vitals as a ranking signal, it’s even more important to take action on measurement reports from tools such as Lighthouse.

Once we have a report we can make use of the metrics and diagnostics presented to implement the changes needed, resulting in improved performance and SEO.

Use Google structured data query tool to validate meta tags schema.

Tools such as Lighthouse are quite powerful to make performance and diagnostics improvements, but if we want to focus on SEO we can make use of Google structured data testing tool. 

This tool allows us to provide a URL or page code snippet in order to analyze its content and provide diagnostics on it.

This allows us to detect errors and see how our content is detected by search engines.A way to do that is to provide structured data about the content of the page in order to classify its content.

The next data block follows the JSON-LD definition which is the recommended option by adding a <script type="application/ld+json"> tag to provide an explanation in JSON to search engines on how to read it in order to increase the SEO score.

<script type="application/ld+json">
    {
      "@context":"http:\/\/schema.org",
      "@type":"LocalBusiness",
      "name":"FullStack Labs",
      "alternateName": "FullStack Labs",
      "url":"http:\/\/www.fullstacklabs.co\/",
      ...
    }
</script>

SEO has many more aspects but there is a minimum threshold based on how search engines find content and how content is evaluated by their algorithms, so making use of tools like Lighthouse and Google structured data testing tools are a must in order to have a solid online presence.