Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Brigthon SEO - The Xpath to discovery

Brigthon SEO - The Xpath to discovery

Spotting technical SEO issues and glitches in the DOM can be a nightmare.

To help solve this problem, this presentation shows you how to highlight issues using Xpath and Chrome Developer Tools.

Jonathan Moore

April 21, 2023
Tweet

More Decks by Jonathan Moore

Other Decks in Marketing & SEO

Transcript

  1. The XPath to
    Discovery
    speakerdeck.com/nathanless
    @NathanLess
    Jonathan Moore

    View Slide

  2. What I do
    I solve problems
    About me
    Technical SEO
    Consultant

    View Slide

  3. Critiquing other
    people’s websites is
    easy
    #BrightonSEO
    @nathanless

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. #BrightonSEO
    @nathanless

    View Slide

  10. HOME CATEGORY LIST PRODUCT
    #BrightonSEO
    @nathanless

    View Slide

  11. View Slide


  12. 12 #BrightonSEO
    @nathanless

    View Slide

  13. XPath is a query language.
    We can use it to select
    elements from an XML or
    HTML document.
    #BrightonSEO
    @nathanless

    View Slide

  14. XPath is mainly used in XSLT
    but can also be used as a much
    more powerful way of
    navigating through the DOM.
    Source: https://developer.mozilla.org/en-US/docs/Web/XPath
    #BrightonSEO
    @nathanless

    View Slide

  15. View Slide

  16. Control + Shift + C
    16 #BrightonSEO
    @nathanless

    View Slide

  17. View Slide

  18. Control + F
    18 #BrightonSEO
    @nathanless

    View Slide

  19. #BrightonSEO
    @nathanless

    View Slide

  20. Hello World!
    Attribute and
    Value
    Text
    Content
    Opening
    Tag
    Closing
    Tag
    #BrightonSEO
    @nathanless

    View Slide

  21. // a
    21
    Axis Step
    #BrightonSEO
    @nathanless

    View Slide

  22. #BrightonSEO
    @nathanless

    View Slide

  23. #BrightonSEO
    @nathanless

    View Slide

  24. #BrightonSEO
    @nathanless

    View Slide

  25. devhints.io/xpath

    View Slide

  26. #BrightonSEO
    @nathanless

    View Slide

  27. #BrightonSEO
    @nathanless

    View Slide

  28. // Fundamentals

    View Slide

  29. // footer // a
    29
    Axis Step Axis Step
    // Descendants
    #BrightonSEO
    @nathanless

    View Slide

  30. #BrightonSEO
    @nathanless

    View Slide

  31. //meta[@name="description"]
    31
    // Exact Match
    #BrightonSEO
    @nathanless

    View Slide

  32. #BrightonSEO
    @nathanless

    View Slide

  33. / / m e t a [ c o n t a i n s ( @ p r o p e r t y , " o g : " ) ]
    33
    // Contains
    #BrightonSEO
    @nathanless

    View Slide

  34. #BrightonSEO
    @nathanless

    View Slide

  35. / / s c r i p t [ @ s r c a n d @ d e f e r ]
    35
    // And
    #BrightonSEO
    @nathanless

    View Slide

  36. #BrightonSEO
    @nathanless

    View Slide

  37. / / l i n k [
    c o n t a i n s ( @ r e l , " n e x t " )
    o r
    c o n t a i n s ( @ r e l , " p r e v " )
    ]
    37
    // Or
    #BrightonSEO
    @nathanless

    View Slide

  38. #BrightonSEO
    @nathanless

    View Slide

  39. / / i m g [ n o t ( @ a l t ]
    39
    // Negation
    #BrightonSEO
    @nathanless

    View Slide

  40. #BrightonSEO
    @nathanless

    View Slide

  41. //a[ cont ains (tex t(),
    "for sal e in May fair ")]
    41
    // Text
    #BrightonSEO
    @nathanless

    View Slide

  42. #BrightonSEO
    @nathanless

    View Slide

  43. // Combinations

    View Slide

  44. //link[@rel="alternate"]
    /@hreflang
    44
    // Href Lang
    #BrightonSEO
    @nathanless

    View Slide

  45. #BrightonSEO
    @nathanless

    View Slide

  46. / / * / @ * [ s t a r t s - w i t h ( n a m e ( ) , " d a t a - " ) ]
    46
    // Data Attributes
    #BrightonSEO
    @nathanless

    View Slide

  47. View Slide

  48. / / l i n k [
    c o n t a i n s ( @ r e l , " d n s - p r e f e t c h " )
    o r c o n t a i n s ( @ r e l , " p r e c o n n e c t " )
    o r c o n t a i n s ( @ r e l , " p r e l o a d " )
    o r c o n t a i n s ( @ r e l , " p r e f e t c h " )
    o r c o n t a i n s ( @ r e l , " p r e r e n d e r " )
    ]
    48
    // Resource Hints
    #BrightonSEO
    @nathanless

    View Slide

  49. #BrightonSEO
    @nathanless

    View Slide

  50. / / *
    [ s e l f : : h 1
    o r s e l f : : h 2
    o r s e l f : : h 3
    o r s e l f : : h 4
    o r s e l f : : h 5
    o r s e l f : : h 6
    ]
    50
    // Header Elements
    #BrightonSEO
    @nathanless

    View Slide

  51. #BrightonSEO
    @nathanless

    View Slide

  52. / / h e a d / *
    [ s e l f : : i m g o r
    s e l f : : i f r a m e
    o r s e l f : : n o s c r i p t
    ]
    52
    // Invalid tags
    #BrightonSEO
    @nathanless

    View Slide

  53. #BrightonSEO
    @nathanless

    View Slide

  54. //picture/img
    54
    // Picture Element Images
    #BrightonSEO
    @nathanless

    View Slide

  55. #BrightonSEO
    @nathanless

    View Slide

  56. / / i m g
    [
    n o t (
    c o n t a i n s ( @ l o a d i n g , " l a z y " )
    o r c o n t a i n s ( @ c l a s s , " l a z y " )
    o r c o n t a i n s ( @ c l a s s , " l a z y l o a d e d " )
    )
    ]
    56
    // Image Lazy Loading
    #BrightonSEO
    @nathanless

    View Slide

  57. #BrightonSEO
    @nathanless

    View Slide

  58. //a[substring(@href,
    string-length(@href) =
    '/')]
    58
    // URLs with trailing slash
    #BrightonSEO
    @nathanless

    View Slide

  59. #BrightonSEO
    @nathanless

    View Slide

  60. //a[not(substring(@href,
    string-length(@href)) =
    '/')]
    60
    // URLs without trailing slash
    #BrightonSEO
    @nathanless

    View Slide

  61. #BrightonSEO
    @nathanless

    View Slide

  62. // Scale

    View Slide

  63. #BrightonSEO
    @nathanless

    View Slide

  64. #BrightonSEO
    @nathanless

    View Slide

  65. #BrightonSEO
    @nathanless

    View Slide

  66. #BrightonSEO
    @nathanless

    View Slide

  67. //count()
    67
    // Count
    #BrightonSEO
    @nathanless

    View Slide

  68. #BrightonSEO
    @nathanless

    View Slide

  69. //boolean()
    69
    // Boolean
    #BrightonSEO
    @nathanless

    View Slide

  70. #BrightonSEO
    @nathanless

    View Slide

  71. #BrightonSEO
    @nathanless

    View Slide

  72. // Takeaways

    View Slide

  73. Find the root cause
    #BrightonSEO
    @nathanless

    View Slide

  74. Master the
    fundamentals
    #BrightonSEO
    @nathanless

    View Slide

  75. Use combinations
    #BrightonSEO
    @nathanless

    View Slide

  76. Have fun and
    experiment
    #BrightonSEO
    @nathanless

    View Slide

  77. #BrightonSEO
    @nathanless
    Presentation Examples

    View Slide

  78. Thank
    You
    #BrightonSEO
    @nathanless

    View Slide