Transform CONS to PROS: How Formatted Text Improves Your Website

June 17th, 2013

Your website can be about anything, but one way or another it’s going to need text. How you apply the text will determine your visitors’ engagement. Do you know that publishing unformatted text can even damage website optimization success? If you don’t want to make this mistake, keep reading!

How you present the content on your website is very important. In an era when image dominates visitor attention, it’s pretty hard to make a text look appealing. If your text is messy and hard to read, it won’t be read and you’ll lose visitors. Apart from checking basic things like spelling and punctuation (type your text in Word if you’re not sure about your skills), pay attention to the following:

  • Separate big text into few sections
  • Make a heading for each section
  • Don’t forget to divide big chunks of text into paragraphs
  • Use bullets and numbering for lists
  • Use bold or italic for highlighting words

Take a swift glance at these two identical texts:

Text

Their content is the same, but the first text clearly lacks any visual appeal.

Using HTML text formatting to improve optimization

Formatting text is not just styling it with color, font type, etc., but it also provides information to web crawlers about what is what on your website. If you’re using a CMS like Webnode, you’ll be able to format text directly with its content editing tools.

Attributes like Heading1, Heading2, etc. indicate to web crawlers that some part of your text is text in a paragraph, another is a title and so on. Therefore, if you have a keyword in the title or headings of your page and it matches somebody’s search query, the search engine finds your website more relevant and shows it higher in search results.

Want to improve your website even further? Check out our article about “10 Things People Hate to Find on Your Website” here.

Olena Romanova (11 posts)

Transform CONS to PROS: How Formatted Text Improves Your Website by
  • endanciles

    Do you know that
    publishing unformatted text can even damage website optimization
    success? If you don’t want to make this mistake, keep reading!

    Spybubble pro

  • thepchelp

    what about being able to insert @font-face in webnode?

    I have tried to do this edited the css like this:

    @font-face {

    font-family: myfont;
    src: url(‘http://files.the-pc-help.co.uk/200000079-0bde80cd8e/modernpics-webfont.eot’);
    src: url(‘http://files.the-pc-help.co.uk/200000079-0bde80cd8e/modernpics-webfont.eot?#iefix’) format(’embedded-opentype’),
    url(‘http://files.the-pc-help.co.uk/200000080-2a4a82b43c/modernpics-webfont.woff’) format(‘woff’),
    url(‘http://files.the-pc-help.co.uk/200000081-83205841a7/modernpics-webfont.ttf’) format(‘truetype’),
    url(‘http://files.the-pc-help.co.uk/200000082-150c21606a/modernpics-webfont.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    and then I added :

    .icon:before {
    font-family:myfont;
    font-size: 1.2em;
    content: attr(data-icon);
    }
    So in the HTML you can add this:

    this is an example of pictogram
    another example
    L

    I think is a very cool way of creating a visual impact. This is the result : http://www.clipular.com/c?14521835=fBDzFfsngwJ6UdVldkdtS4HvKPs&f=.png

    and this is how a page can look like : http://www.clipular.com/c?14521836=_DYS10ODwFeaS3XBOHQrdoUUh-Q&f=.png

    impressive huh? The trouble is that works only in chrome. I had managed at some point to work in firefox too but now I don’t know what happend.

    It seems that the folder were the fonts are stored has to be in the same root folder as the pages and not on http://files.the-pc-help. so should be the-pc-help.co.uk/fonts

    I will still work on a workaround but it would be nice if webnode would give you the possibility to add your own fonts!

  • Thank you Christian, for visiting our blog!
    Viktoria
    Webnode

Build your Free Website!

  • 100% free
  • No Ads
  • No installation
  • In only 5 min
  • Your own domain

Affiliate program

Make money with Webnode!

More information