What is the best way to present source code to users without affecting SEO?

Let's say my website is HTML tutorials and I need to present HTML code to the user so that they can copy it.

If my main keywords were present in the markup code, will they affect my keyword density? Or simply SEO?

  • 1
    I've never heard of an SEO problem related to showing programming code on a page. As long as the code is useful for users, present it in the way that is most usable. Commented Jun 22, 2016 at 17:22
  • 1
    Stephen is right, however, I am a bit confused by your question. You will need to use the pre tag with the code tag nested within the pre tag. I say that just in case. That should be all you need to do. Cheers!!
    – closetnoc
    Commented Jun 22, 2016 at 17:29

1 Answer 1


Nothing special to do here, the code is your content. You mark up your code with appropriate elements, and consumers (like search engines) then can do whatever they want to do with this information. A code search engine might be especially interested in it, other search engines might ignore it, most will probably don’t care and handle it in the same way like non-code content.

You should use the code element, for blocks of code as well as inline code, just like I did in this very sentence (see example).

If you have a block of code where the formatting (i.e., multiple lines, indentation) matters, you should use the pre element in addition to code (see example).

  • Thanks, but i found that blockquote tag also work same as pre. Actually i am using blogger for hosting and in blogger blockquote tag preserve both line and space. Now, Is this good idea to use blockquote instead of pre? Check demo here howbloggerz.com/2016/05/how-to-customize-blogger-lightbox.html
    – Bloggerz
    Commented Jun 23, 2016 at 3:51
  • 2
    @Bloggerz: It would be wrong to use blockquote unless you quote the code. Your own code would be in <pre><code>…</code></pre>, and if you quote someone else’s quote, it would be in <blockquote><pre><code>…</code></pre></blockquote>-- The formatting works in your linked example because you use &nbsp; (for non-breaking spaces) and <br /> for line breaks, both of which is not needed if you use pre. CSS can also do this job, but the benefit of using pre is that CSS support is not required (i.e., the code is also correctly formatted for user agents without CSS support).
    – unor
    Commented Jun 23, 2016 at 12:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.