0

I found this on stackoverflow and I have a question regarding this. Can I use this code on CodePen to satisfy SEO and design part of the page?

<figure>
 <img src="https://placehold.it/350x150" alt="something important">
 <figcaption>
   something important
 </figcaption>
</figure>

*{
  font-family: helvetica;
}
figure {
 margin: 100px auto;
 position: relative;
 width: 500px;
 height: 100px;
 background-image: url(https://placehold.it/650x150);
 background-size: cover;
 background-position: center center;
}

img{
 display: none;
 }
figcaption{
  position: absolute;
 bottom: 0;
 width: 100%;
 background: maroon;
 color: WhiteSmoke;
 text-align: center;
 font:small-caption;
 font-style: italic;
}
Community
  • 1
  • 1
  • 2
    "satisfy SEO" depends on what the content is on your page. You didn't provide any context re: what's in the img or the background, and why you're using one or the other or both. – Michael Coker Feb 28 '17 at 20:33
  • its a gallery that sells art... img is for the thumbnails of the pictures they sell,but those jpegs arent cropped on 100px*100px but some are 300px ,other 500px... I want them same size but not spending all my time cropping them in PS... I think using inline style on figure for background-image –  Feb 28 '17 at 20:53
  • Search spiders don't care about what your page looks like, they only care about the text, including your `figcaption` tag and `alt` attribute. – Waxi Feb 28 '17 at 21:04
  • I understand that.... I ask because I want it to be informative,searchable and to look good... –  Feb 28 '17 at 21:10
  • @AmericanSlime Google can understand images these day, just so you know. (Good) Spiders today care about images too today. – gdoron Feb 28 '17 at 22:06

1 Answers1

0

I found this on stackoverflow and I have a question regarding this. Can I use this code on CodePen to satisfy SEO and design part of the page?

SEO: yes, check out https://support.google.com/webmasters/answer/114016?hl=en and https://yoast.com/image-seo/.

So long as you're providing images which are appropriate to your content and serve to better the user experience you'll be good. Make sure you provide valuable alt attribute text and don't attempt to abuse the system.

Design: looks semantically correct, and I like the appearance although appearance is much more subjective.

pwynne
  • 13
  • 4
  • Thanks for the answer... It was very helpfull... design is just an example... I just needed to check this... I understand that with css I dont change html,but the apearence of it... So ,if the image with the alt attribute its there thats acceptable... –  Feb 28 '17 at 22:25