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.

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