Edge SEO: What is it and what does it solve?

It can be frustrating when working as a technical SEO.

You know what to change and yet the development team has a huge backlog and can't squeeze you in.

After giving them your recommendations you think it won't be long until implementation. The task will only take a few hours. And you wait as the technical SEO changes get de-prioritized.

The business has other urgent changes and you watch as your task slides down the backlog.

What we need is a solution to implement the changes without the need for development input.

This is the problem that Edge SEO is trying to solve.

Allowing the SEO to make changes immediately on the live site.

We are going to look at what Edge SEO is how you can implement it on your site.

So what is Edge SEO?

What is Edge SEO?

Prioritization of your tasks is not the only problem that Edge SEO solves. It can also help when needing to make changes to a legacy tech stack.

Within a legacy tech stack, the speed of change can be very slow. The development team is already struggling to make changes without breaking the site. How will they find time to make SEO improvements.

When you find an issue with a site wouldn’t you like to deploy the fix straight away?

Edge SEO is the term coined by Dan Taylor to describe how an SEO can use serverless technology to make changes to a live website.

The changes are not made to the website itself but a layer sitting in front of the website. Usually, this is in a Content Delivery Networks (CDN’s).

CDN's are traditionally used for caching files close to the end-user. In recent years they have started to evolve.

Not only do they cache content, they now allow you to run code within the CDN.

This is Edge Computing.

This code can then manipulate the request / response from the web server.

There is a few CDN's that offer this functionality:

• Cloudflare Workers
• AWS Cloudfront lambda@edge
• Fastly Edge compute

They all offer the same functionality.

You can intercept a request and change it in some way.

Yet, there is a difference in the languages each system supports. Cloudflare and AWS support Javascript whereas Fastly uses WebAssembly.

As these CDN’s send files worldwide the code that you write is also distributed. This means that it is very fast and reduces website performance issues.

Let's take a look at some of the changes we can make using this technology.

What Can You Change with Edge SEO?

As the code is on the edge we can manipulate the HTML response that comes back from the web server.

That means that we can change the HTML response in real-time.

Any changes we make to the page are then sent back to the user that requested them.

The user sees the same site but with the added improvements.

The possibilities at this point are almost endless.

Here is a list of some possible changes we could make:

• 301 or 302 redirects
• HREFLang tags or HTTP header responses
• Compress / re-size images
• Minify CSS or Javascript
• Adding Schema or Structured Data
• Modify the robots.txt
• Modify the sitemap
• Change any HTTP header response (Cache, )
• Pre-render an SPA
• Inject any content into the page
• Change meta tags (title, description)
• Perform A/B, Multivariate tests
• Site security (CSP, HSTS, X-XSS, X-Frame-Options)

As you can see there is a lot of power that this brings.

With great power comes great responsibility.

Edge SEO and Website Performance

It is important to measure the effects of the changes that you make to the site when using Edge SEO.

Any changes can slow down the page performance.

Keep this in mind when making any changes. Make sure to measure before and after using tools such as Google Lighthouse.

Take advantage of any Caching the CDN provides.

For example, if you are re-sizing images then add the resized image to the cache. This will speed up future requests to that image.

Let's take a look at an example.

Example of Edge SEO

In this example, we will take a look at Cloudflare serverless workers.

We will write a custom worker to add FAQ schema to the example.com webpage.

Cloudflare workers let you write custom Javascript. This code can then intercept a request and manipulate the response.

Here is the code to add the schema:

addEventListener('fetch', event => {
  event.respondWith(forwardReport(event.request));
});

async function forwardReport(req) {

  let schema = `<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"What is the return policy?","acceptedAnswer":{"@type":"Answer","text":"Most unopened items in new condition and returned within <strong>90 days</strong> will receive a refund or exchange. Some items have a modified return policy noted on the receipt or packing slip. Items that are opened or damaged or do not have a receipt may be denied a refund or exchange. Items purchased online or in-store may be returned to any store.<br /><p>Online purchases may be returned via a major parcel carrier.  </p>"}},{"@type":"Question","name":"How long does it take to process a refund?","acceptedAnswer":{"@type":"Answer","text":"We will reimburse you for returned items in the same way you paid for them. For example, any amounts deducted from a gift card will be credited back to a gift card. For returns by mail, once we receive your return, we will process it within 4–5 business days. It may take up to 7 days after we process the return to reflect in your account, depending on your financial institution's processing time."}},{"@type":"Question","name":"What is the policy for late/non-delivery of items ordered online?","acceptedAnswer":{"@type":"Answer","text":"Our local teams work diligently to make sure that your order arrives on time, within our normaldelivery hours of 9AM to 8PM in the recipient's time zone. During  busy holiday periods like Christmas, Valentine's and Mother's Day, we may extend our delivery hours before 9AM and after 8PM to ensure that all gifts are delivered on time. If for any reason your gift does not arrive on time, our dedicated Customer Service agents will do everything they can to help successfully resolve your issue. <br/> <p>Click here to complete the form with your order-related question(s).</p>"}},{"@type":"Question","name":"When will my credit card be charged?","acceptedAnswer":{"@type":"Answer","text":"We'll attempt to securely charge your credit card at the point of purchase online. If there's a problem, you'll be notified on the spot and prompted to use another card. Once we receive verification of sufficient funds, your payment will be completed and transferred securely to us. Your account will be charged in 24 to 48 hours."}},{"@type":"Question","name":"Will I be charged sales tax for online orders?","acceptedAnswer":{"@type":"Answer","text":"Local and State sales tax will be collected if your recipient's mailing address is in: <ul><li>Arizona</li><li>California</li><li>Colorado</li></ul>"}}]}</script></body>`;

  let path = new URL(req.url).pathname;
  let address = 'https://www.example.com' + path;
  let response = await fetch (address);
  let html = await response.text();

	html = html.replace( /<\/body>/ , schema);

  return new Response(html, {
    headers: response.headers
  });
}

We are doing many tasks here so let's break it down:

1. We receive a request to our worker
2. We forward the request on to example.com
3. We then take the text response and replace the </body> tag with the schema.

This will add the JSON schema to the end of the page.

You can see the results before the change by going to https://www.example.com:

Then if we go through our Cloudflare Workers the page’s HTML looks like this:

This is a simple demonstration showing the power of this solution.

Cloudflare also provides a code editor online where you can write a worker and then test the results.

At the moment I am the only one who can see the added schema as the worker uses Cloudflare's workers.dev domain.

To put this into production we would need to point example.com DNS to the workers URL using a CNAME.

For a simple change editing in this way is fine, yet as you start to add more and more changes this could get out of control.

Cloudflare provides a command-line tool to manage and push code to the worker. Is there a better way?

Next, let's look at a way of managing the changes.

Edge SEO CMS

Sloth is an Edge SEO code generator and manger. It has a web interface making it easier to make and install changes.

This tool currently can:

• 301 and 302 redirects
• Hreflang into the HTML head
• AB testing
• Modifying/overriding your robots.txt file
• Security headers

The beauty of tools like this is that you do not need coding experience. The user interface allows you to manage the changes with a few clicks.

Another similar tool to check out is Spark which also works with Cloudflare Workers.

Working with Development Teams

One word of caution with this solution. Changes on the edge can be confusing if not managed. The development team may see results they were not expecting because of changes on the Edge.

For this reason, any changes made should also be added to the developer's backlog.

This way once they can complete the work the rule can be removed from the Edge.

This is not an approach to circumventing the development process.

It allows for immediate change to the site and then added to the site permanently at a later date.

If not, the changes on the Edge could get complicated and out-of-control.

It’s always better to work together on the final implementation.

Wrapping Up, Edge SEO

Development teams can be a bottleneck.

Competing business priorities make it difficult to get changes through the development pipeline.

One solution to making changes as an SEO is to use the new serverless edge computing.

Edge SEO allows you to make changes directly to the site in real-time.

Don’t forget to make the changes in the underlying codebase.

Work with the development team to ensure they learn best practices.

Why not give it a try Cloudflare has a free tier and so you can try this out yourself.