FullStack Labs

Please Upgrade Your Browser.

Unfortunately, Internet Explorer is an outdated browser and we do not currently support it. To have the best browsing experience, please upgrade to Microsoft Edge, Google Chrome or Safari.
Upgrade

Development Strategies to Increase Search Engine Optimization Rankings

Written by 
Brayan Castro
,
Senior Software Engineer
Development Strategies to Increase Search Engine Optimization Rankings
blog post background
Recent Posts
Google AMP vs. Other Frameworks - When to Use Each
How to Create a Simple File-Transfer WebRTC React Web Application
Using Split Flags with React to Control Feature Deployments

Table of contents

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.

Brayan Castro
Written by
Brayan Castro
Brayan Castro

I have been interested in computers since I was 11 years old, and now that I get to develop software every day, I regularly watch ideas materialize into real tools. I've built social media apps, knowledge organization software, and a CRM. I'm a fan of Ruby on Rails, but the recent updates to JavaScript have renewed my interest in it as an all-purpose language. I'm persistent, creative and curious, and I enjoy playing videogames, going to the beach, watching anime, and of course, programming.

People having a meeting on a glass room.
Join Our Team
We are looking for developers committed to writing the best code and deploying flawless apps in a small team setting.
view careers
Desktop screens shown as slices from a top angle.
Case Studies
It's not only about results, it's also about how we helped our clients get there and achieve their goals.
view case studies
Phone with an app screen on it.
Our Playbook
Our step-by-step process for designing, developing, and maintaining exceptional custom software solutions.
VIEW OUR playbook
FullStack Labs Icon

Let's Talk!

We’d love to learn more about your project.
Engagements start at $75,000.

company name
name
email
phone
Type of project
How did you hear about us?
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.