Issues with sitechecker results

HTML & CSS
1

I have a number of question regarding the site I have, which is based on a template.

(a) Today I did a sitechecker on my site and it showed 71 pages without a H1. The pages have H2, but H1 would does not suit the design - nor was any H1 in the template, is there a solution to this as it is showing as needing resolving with status code 200.

The sitechecker is also showing 100 pages with Duplicate H1 - which are for the same pages it shows as being without a H1. Any insight would be welcome.

Should/could I add a blank <h1></h1> to resolve this issue?

(b) Also, the sitechecker showed a 404 for 9 images. The URL showed in the 404 list is not correct. The page and the related images are all in a sub-folder. The page works well when accessed in a browser either directly or through other pages.

Example of one of the Images actual URL
(https://www.mysite.com/QuoteImages/images/fulls/Life-Is-A-Game-art.jpg)

The URL shown in sitechecker
(https://www.mysite.com/images/fulls/Life-Is-A-Game-art.jpg)

The html for the image on the page:
<a href="images/fulls/Life-Is-A-Game-art.jpg">
If I add the full actual URL in the <a ref> should/would this be the solution?

c) There are a lot of .ccs in the css folder and a lot of .js in the js folder of the template.

I have identified which .ccs and .js are mentioned in the header and footer. Is there a potential for the unmentioned .ccs and .js to be deleted? Or are some of the other .ccs and .js likely to be referenced within other .ccs and .js files.

Will the unused .ccs and .js files slow the site down if I just left them?

Any ideas would be welcome.

2

You’ll need to help us by providing a link to your site ( https://www.mysite.com/ ?) AND the location of the code that calls the images that cannot be found.

3

Don’t choose an element based on appearance, always choose the most semantically appropriate element for the job.
If you don’t like how it looks, that’s what CSS is for, you can use it to make it look however you want.

What would that achieve? Is the issue that “sitechecker” shows problems, or is the issue that the site has problems?
It may make “sitechecker” tick more boxes, but if your real aim is to improve SEO and user experience it’s a waste of time adding empty headings just to please a checking tool.

Neither of the image URLs work for me. But if the definitely do work on the site they may be OK, but assuming the URLs you posted are correct, there may be something at play stopping external access such as hot-link protection.

Can’t say, but there is a good chance it will break the site. You could always test in your developer environment.

3 Likes
4

Just noticed it’s not a real site URL.

5

It’s not negotiable.

If a page doesn’t have an h1 then it can’t have an h2 or indeed any other heading.

Headings are used in logical order of heirarchy and an h2 without there being an h1 is seen as nonsense. How can it be secondary when there is no first :slight_smile:

CSS doesn’t care what elements look like and you can style almost anything (apart from form controls) to suit the design as required.

The most important thing is to keep the semantics correct by using the correct tags to start with. Never use an element judged by its default appearance.

4 Likes
6

Are your image folder and html page both in the QuoteImages folder?

7

Ah, I was looking at sredhead’s site not the mysite URL. My blooper.
Looks like the OP edited his post.

8

Thank you for the replies ‘ronpat’, SamA74, PaulOB, and Rubble.

The full links are:
Example of one of the Images with the actual URL that works from the page is:
(https://www.stevenredhead.com/QuoteImages/images/fulls/Life-Is-A-Game-Steven-Redhead-art.jpg)

The URL shown in sitechecker as a 404:
(https://www.stevenredhead.com/images/fulls/Life-Is-A-Game-Steven-Redhead-art.jpg)

The html for the image on the page:
<a href=“images/fulls/Life-Is-A-Game-Steven-Redhead-art.jpg”>
If I add the full actual URL in the <a ref> should/would this be the solution?

Yes Rubble, this page is in the folder QuoteImages along with the ‘images’ and ‘fulls’ folders at https://www.stevenredhead.com/QuoteImages/
https://www.stevenredhead.com/QuoteImages/images/
https://www.stevenredhead.com/QuoteImages/images/fulls/
The ‘fulls’ images zoom out when the original image on the site page is clicked. https://www.stevenredhead.com/QuoteImages/images/thumbs/
I just overlayed my images on the images included in the template.

Thank you PaulOB for your advice, I just used a template due to my ability and it didn’t have any H1, I hadn’t realise the true significance of this H1 and H2 etc until you outlined this above. Not sure how to manipulate the H1 in ccs though.

9

Thank you ‘ronpat’, I entered the actual site links above.

10

Thank you as always you your support PaulOB, and your advice regarding H1 text.

I tried to find a solution to the H1 issue on Google, there appears to be options. I was wondering if I make H1 size the same as H2 and change the first H2 into a H1?

My concern is I saw the carousel and slider text in the ccs that referenced H1, so wondered if changing the H1 size would also impact these too.

Parts of the style.css

h1 {
  font-size: 3.2em;
  line-height: 44px;
  margin: 0 0 44px 0;
}

h2 {
  font-size: 2.6em;
  font-weight: 700;
  line-height: 42px;
  margin: 0 0 32px 0;
}

h3 {
  font-size: 1.8em;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 24px;
  margin-bottom: 15px;
}

/*use in section headings*/
h3.heading {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  font-style: normal;
  margin: 0 0 20px;
  padding-bottom: 10px;
  position: relative;
  text-transform: capitalize;
  overflow: hidden;
  vertical-align: middle;
}

h3.heading:after {
  position: relative;
  left: 18px;
  content: "";
  display: inline-block;
  width: 200%;
  vertical-align: middle;
  height: .50em;
  margin: 0 -200% 0 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

h4 {
  font-size: 1.4em;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 27px;
  margin: 0 0 14px 0;
}

h5 {
  font-size: 1em;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 18px;
  margin: 0 0 14px 0;
}

h6 {
  color: #333;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: normal;
  line-height: 18px;
  margin: 0 0 14px 0;
}


.carousel-item-content h1 {
  display: inline-block;
  padding: 10px 20px;
  line-height: 35px;
  font-size: 35px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  background-color: #32c5d2;
  margin: 0px;
}


.slider-text h1 {
  font-size: 3.75em;
  color: #FFF;
  padding: 5px 10px 0px;
  line-height: 1.4;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
  text-align: center;
}

I tried without success

<h1>H1 - No Class</h1>
<h1 class="h2">H1 - Class H2</h1>

Do you think just changing the H1 by adding the H2 size in the ccs? Any ideas or direction welcome.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.