Advanced Tech SEO Slides and Resources

• The DOM:
• Accessibility:
• Scraping time :

So I got to talk at the Advanced Technical SEO Conference about some of my favourite topics: web standards and dull technical applications. My talk was called "Lessons from Crawlers, Screen Readers, the Mobile Friendly Test and the DOM" and you might be able to see a replay of it at the Advanced Tech SEO HeySummit site. This was for Brighton SEO. But here are the slides and some resources to check out.

Lessons from Crawlers, Screen Readers, the Mobile Friendly Test and the DOM Slide Deck

The DOM: #

MDN Web Docs - Introduction to the DOM

CSS Tricks - What is the DOM?

How to traverse the DOM in JavaScript

View Rendered Source Extension

Code snippet time!
Highlight all images without alt text

var myElement = document.querySelector("img:not([alt])");
myElement.style.border = "5px solid red";

You can also just use CSS. Stick this in the head.

<style>
img:not([alt]){
border:5px solid red;
}
</style>

Print all links to console:

console.log(Array.from(document.querySelectorAll('a')).map(link => [link.href, link.textContent]).join("\n")); 

Copy all links to clipboard:

copy(Array.from(document.querySelectorAll('a')).map(link => [link.href, link.textContent]).join("\n")); 

Accessibility: #

Download NVDA screen reader

WebAIM - Using NVDA to Evaluate Web Accessibility

WebAIM - Using VoiceOver to Evaluate Web Accessibility

Using the Accessibility Tree:

Chrome Devtools

Tracking users who may be using accessibility devices:

[Can we track how many users with disabilities access our site?](Can we track how many users with disabilities access our site?)

How Many People With Disabilities Use My Website?

How to Use Google Analytics to Identify Web Accessibility Issues

(I'm also considering writing a post about this)

Here are some other Accessibility resources and twitters:

Adrian Roselli

@mikeyil

Steve Faulkner

Carie Fisher

Bruce Lawson

Scraping time : #

How to start using Curl and why

NPM Site

Puppeteer site

Script: Some.js

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://jessbpeck.com/horribleseoexperiments/domorder/');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

In the command line:

node some.js

The mobile friendly test

And if you want to test out your new DOM skills, here are a couple of pages to check out:

Page where the DOM order is different to the visual order

Page where JS has been injected

← Home