Skip to content Skip to navigation

Working with Content in Drupal: an introduction to design, accessibility, and SEO

About a month back now at Drupal Camp, I presented on best practices for formatting your content for the web in the context of Drupal. Highlights included: what well-structured content is, why we care about it and how to make it in Drupal, with special focus on the CKEditor WYSIWYG (what you see is what you get, pronounced "wizzy-wig") Editor. For anyone who was unable to attend, the main gist is outlined below.

What is well-structured content?

Well-structured content follows basic formatting guidelines that ensure that your website is well-organized, clearly understandable to readers, and accessible to people with disabilities. Such guidelines, which include Search Engine Optimization (SEO) best practices, provide the added benefit of making your site more findable and promotable, since Google and other search engines "see" pages that are well-formatted better than those that aren't. Creating well-structured content requires the usage of some basic patterns and strategies.

Basic Patterns and Strategies

  • Write your content in small chunks
  • Define subsections of your pages with HTML Heading tags (h2, h3, h4, h5)
  • Keep all headings nested by numerical level, don't choose them just for looks
  • Make lists of things into HTML bulleted or numbered lists
  • Only use tables to display tabular data (like charts of statistics), not for page layout
  • Make sure that any text you make into a link reflects what people get to if they click it (avoid using "click here")

Why do I care?

The HTML formats that you use in your content make your content more readable not only by your average browser who can look at the internet, but also by search engines like Google, and people who browse the internet in ways we sometimes forget, like by having a screenreader read it aloud, or by tabbing from place to place without a mouse.

Design and Readability

If you are working with a nice Drupal theme (like any of the new Stanford Drupal themes), the styles are designed to make your site look good when you use well-structured HTML. Walls of text without any headers are fine for novels and essays but don't work well in the internet, where people scan content at lightning speed. Give your users something easy to grab onto by formatting your content clearly and keeping it short.

Accessibility

People with visual impairments surf the internet using screenreaders, which are designed to make it possible to jump from heading to heading or link to link. This allows those users to "scan" the content of a page quickly. If your content is well-structured, screenreaders will be able to call out the primary sections on each of your pages.

SEO

Search engines like Google read your website the same way a visually impaired person does, with all text and no pretty formatting. Build a hierarchy of information by calling attention to the main sections of your pages with headings, and Google, Yahoo, and Bing will be able to tell what is important on each page.

By default, the most important information will be your Drupal page title (most themes make this a heading 1), then the search engine will assume that any text in a heading 2 is the next most important thing to consider if someone is searching for those words, followed by heading 3, etc.

How can I get it?

In Drupal, if you use a WYSIWYG, you don't need to know HTML to write well-structured content. The CKEditor makes it very easy to choose formats. The buttons you click even look like an MS Word document. The main difference is that you are creating HTML when you apply formatting to your content.

To change the display of some text, select the content you want to format and then use the CKEditor buttons to choose formatting like bulleted lists or bold. The format dropdown that reads "Normal" by default is where you choose to use Headings. An example of all formatting options and their descriptions can be seen at: https://sites.stanford.edu/sws-demo-wysiwyg/formatting-options

WYSIWYG dropdown menu for formats

Stanford WYSIWYG

Stanford Web Services (and especially the esteemed John Bickar) has created a standard configuration of CKEditor that includes commonly used formats and is nicely cleaned up. This Stanford WYSIWYG can be enabled in any sites.stanford.edu website from admin/structure/features in the Stanford tab.

See Examples in Action

For the Drupal Camp session, I created a small website about content. Feel free to peruse and check out the example pages of badly formatted content, goodly formatted content, and the list of HTML formats available to you with the Stanford WYSIWYG.

I hope this was helpful to you. And remember, your website is only as good as your content. Take the time to make it awesome!

Comments

I dont have the option to add it under the Stanford tab. Is there some other place where I can add the CKEditor?

Hi KRB, Are you building on Stanford Sites (https://itservices.stanford.edu/service/web/stanfordsites)? What is the URL of your site?

Stanford WYSIWYG will be added to Stanford Sites next week (the week of July 29th, 2013).

Using alexa for keywords of competitors site and sharing contents through various content sharing websites is very effective. I tried it for my website Science Hook and it is giving me amazing results. There are various other strategies to improve seo but it's all about discovery. Google won't reveal it's algorithms.

I am into IT field for more than 15 years. What I observed many of the best developers dont know what is SEO although they are working in reputed companies and good programming skills. I feel SEO is vast and big field which requires lots of research. It cant be learned in one day. It took me almost 2 years to learn all this SEO tricks. Who ever is new to this field, I would suggest to leant and do lots of research and then you will learn how to optimize search engine. Also, SEO's algorithm is changing every day. You should be aware of what's new and what need to be done to optimize.