Writing for Readability and SEO

This is the last post in a series about rewriting content. Though you’re welcome to read it by itself, you might want to read the first four posts first: One, Two, Three, and Four.

Now that we’ve fixed our page so that it’s easier to read, we need to make sure it’s easy to find. When we talk about making things easy to find, we really mean making them easy to find by Google, as more people find our content on the website via Google than they do any other source. Writing easy to find content is one aspect of Search Engine Optimization, or SEO.

Writing for SEO

Soon, we’ll be adding a new tool to the Drupal edit interface to help you perform a keyword analysis. To use it, you’ll simply edit a page, then scroll all the way to the bottom:

The Drupal content analysis box

After we turn it on, if your user has the correct role, you’ll see that Content analysis tab. Let’s start with doing a Quick SEO analysis, and put a phrase in the box. I’ll use “Where to print”, since that’s something I think people might google to find out where to print. Then click the button.

Content Analysis Results page

Your results will pop over the page, and be very hard to miss. But don’t worry – if you accidentally close that popover, the results will still be in the page. Let’s look at each of the sections in the results.

Page Title – The title is probably the most important place to put important keywords, but it’s important not to make it too long. Our current title is “TitanPrint”. That’s also something that people might google, especially as we try to message out about TitanPrint. So I’m ok with it, and we’ll leave this alone.

Body – The body is the second best place to put your important keywords and phrases. We’re missing my phrase entirely. So I should probably fix that. Let’s rework the second to last sentence:

You can use your print allocation at locations around campus.

And instead we can write:

Curious where to print? View print locations to across campus.

And of course we’ll link print locations to to the proper page.

Meta Keywords – We don’t use these. They’re generally ignored.

Meta Description – When you search for something, Google helpfully tries to use a snippet of the page to give you a preview of what’s on the page. If you’re finding that snippet to be unhelpful, you can enter a description that Google may use instead. If you’d like to enter one, check under the “Optional Fields” tab at the bottom of the page, and fill out the Search Engine Summary field.

Readability

In the popover, there was another tab labeled readability, which provides a series of different reading level scores. Depending on your content these may vary wildly, so it’s usually best to just use the average.

The reading level content analysis interface

Our reading level has an average of 8.3 – pretty close to what HemingwayApp told us. This interface isn’t as friendly as HemingwayApp, and doesn’t provide live feedback, but it saves you a lot of copying and pasting, so we encourage you to give it a try.

That’s it!

We’re almost done testing content analysis, so hopefully by the time you read this post you’ll be able to use it. If you have any trouble finding it, or using any of the tools we’ve covered in these posts, please, please, please contact us at webmaster@lanecc.edu and we’ll help you out. Also don’t hesitate to contact us for additional help with SEO – we have a bunch of information from Google Analytics that we’d be happy to share.

And be on the lookout for some upcoming sessions where we rework some content together, live, in person. Keep checking the announcements box on the Drupal dashboard right after you log in.

Call to Actions

This weekend, while rolling out some minor module updates, we also added a way to convert a link from this:

Picture of a link on the page

to this:

Picture of an Orange Call to Action Button

If you’re not a fan of orange, you can also use the blue version:

Picture of a Blue Call to Action Button

These big, hard to miss buttons are the page’s Call To Action (CTA). When you’re working on a page, you should be thinking about what the CTA for each of your pages is. What do you want the visitor to do on that page? Is your page purely informational (example: financial aid disbursement schedule)? Or are you trying to get them to take some sort of action (example: register for the Convening the State event)? If your page falls into the latter, you may want to consider the above CTA buttons.

To use them, you’ll need to add two classes to your link. For orange, you’d add cta and cta-orange, for blue you’d add cta and cta-blue. Don’t know what that means? Don’t worry about it! Just give Lori a call and she’ll walk you through it. Super easy.

One more thing: your page should only have one CTA. If there’s absolutely, positively, no way at all in the world you can have just one CTA, you can maybe add a second. If you have a bunch of CTA’s, you’re not helping people find what they need, you’re splitting their attention and making it unclear what they should do. And wherever possible, we should be trying to make it clear what we want people do on our pages – remember, people skim more than they read.

Drupal does CAS

For the last two years, the IT department has been working on a project to improve identity, communications, and passwords across campus. We’re finally ready to start rolling pieces of that out. And you, lucky Drupalers, are getting to test one of the very first pieces.

Starting on October 9th, when you log into Drupal, you’ll be automatically taken to the CAS login page. What’s CAS? CAS provides a Central Authentication Service, which means that when you log into it, you’re actually logging into all the services that CAS is aware of. And when you log out, you’re logging out of all the services that CAS is aware of.

In the future, this is going to let us do some pretty neat things. For example, that means after you log into Drupal, when you go to myLane and press login, you’ll just automagically be logged in – without having to enter your L Number and password all over again. But for now, it’s just going to look like a different login page. So what’s it look like?

Screenshot of the CAS login screen

No, really, that’s it. When you go to the Drupal login page, it’ll automatically go to the CAS login page. After you log in, you’ll go back to Drupal.

It’s super important that you remember to log out when you’re all done. Since logging into CAS logs you into all services, if you forget to log out that means the next person that comes up to that computer could not only use Drupal as you, but also use any other CAS enabled service (and eventually, that’ll mean almost everything at Lane!). So please, hit the log out button when you’re done!

Encrypt all the things!

Over the last few weeks, we’ve been battling a problem where the web server would sometimes forget its own name. Some days it would want to go by www.lanecc.edu, other days it would want to go by 163.41.113.43 (our public IP address), and other days it would use our internal server name. We gave it a stern talking to, but it refused to cooperate.

The solution is to specify Drupal’s base_url variable. Normally, Drupal tries to identify what server name to use and it does a pretty good job. But clearly our server isn’t so great at that anymore. Specifying the base_url forces Drupal to use what we tell it.

But the base_url needs to be a full URL, complete with protocol. So it needs to be “http://www.lanecc.edu” or “https://www.lanecc.edu” – we’re not allowed to just say “www.lanecc.edu”. Why does that matter? Because even though the difference is just one letter – an “s” – that turns out to be one of the most important letters on the Internet.

HTTP is the protocol that defines how a lot of content on the internet moves around. It’s part of how this page got to you. But it’s a completely unencrypted format. When you’re browsing the web in HTTP, you’re sending everything in clear text – anyone that can listen in (for example, on an unencrypted WiFi connection) can read whatever you’re sending. But if we add the “s”, and browse via HTTPS, then everything we do is encrypted, and no one can listen in*.

But there’s some gotchas with HTTPS pages. For instance, most webpages actually consist of multiple requests – the Lane homepage has 34. If even one of those requests is made over HTTP instead of HTTPS, then we have a “mixed mode content error”, and the browser hides that content.

And that’s kept us from specifying our base_url so far. If we set it to “http://www.lanecc.edu”, then on pages that are HTTPS, like webforms, then all the styles and javascript will break, since those would be sent over HTTP. And if we went the other way, and set the base_url to “https://www.lanecc.edu”, then our caching infrastructure, which is built assuming most connections are over HTTP, would break, significantly slowing down the site. So we’ve been stuck running a mixed-mode site – most people use HTTP, but authenticated people and webform users use HTTPS.

There’s a number of reasons that isn’t ideal, which are well outside the scope of this already too long blog post. And the wider Internet is moving forward with using HTTPS only everywhere. So yesterday, we deployed new caching infrastructure which will allow us to go with using HTTPS only. Going forward, all connections with www.lanecc.edu will be  encrypted.

This should be a almost completely transparent transition, but if you notice any problems, email us at webmaster@lanecc.edu and let us know!

* strictly speaking, this isn’t true, and there’s a a whole category of attacks that can still work on HTTPS. But there’s a fix for that too, and we’re working on rolling that out too some time in the future.

 

 

Some Announcements

Over the last few weeks, we’ve added some features to Drupal that may interest you.

First, we’ve added some new buttons to the WYSIWYG editor:

  1. The “K” button works much the same way as the Flickr button, and allows you to embed Kaltura Videos (hosted on http://). For more information, talk to Dean Middleton
  2. The map button allows you to embed the new style Google Maps maps. Google changed both the Google Maps interface and the embed codes recently. If you see a white box on the left hand side of Google Maps, you’re using the old version, and should continue to just paste the map link into the WYSIWYG on its own line, like always. But if Google Maps takes up the entire screen, you need to copy the embed code and paste it using the new Google Maps button in the toolbar.

Second, we’ve had some problems with revision messages. Here’s a real life sample of some of the message we’ve seen the last few weeks:

  • z
  • .
  • Revised page
  • Update1
  • page update
  • routine
  • same
  • got it

Clearly, these are incredibly unhelpful. Log messages should be concise and descriptive. Here’s some great ones:

  • Revised office hours and added fall term hours
  • Update reference to Retail AAS
  • added IT maintenance window event spud
  • updated links to event flyers
  • added link to BP040

When we’re trying to figure out when something changed, it’s a lot easier if we can skim through the revision log. And it helps you – that way you can see who else changed your pages, and what they did.

Due to the number of really poor revision log messages, we’ve been forced to add some checks within Drupal for obviously bad ones. If your message doesn’t meet the terribly low bar we’ve established, your node will not save, and you’ll be asked to enter a better message.

Remember, if you find yourself constantly entering messages like “Trying again” or “One more time”, you should try using the Preview button to make sure what you’re adding is what you want. That way you’re not creating 3 or 4 revisions for one small change.

There’s also a couple of people who include their initials with the log message. Although we used to really like having that information when we were using Contribute, we track your login when you make changes now, so there’s no need to also have your initials. Save a few keystrokes!

Finally, we’ve also open sourced a piece of our Drupal Migration. if you visit our GitHub page, you can find the source of our Migration Tracker, which kept track of the old and new URLs, and made it possible for us to migrate over several months, rather than needing to do it overnight.

A Static Server

As I may have blogged once or twice previously, making websites really fast is important to me. Recently, we’ve made a change that should help us improve the speed of not only www.lanecc.edu, but of many of Lane’s other websites, including this one.

When you request a webpage, in addition to fetching the page itself, you usually end up requesting each individual image, font, css sheet, and javascript sheet. Making those requests is expensive. There’s a sliding window, which limits how many requests you can make at once. So if the window size is 5, but you need to make 6 requests, you need to wait for one of the first 5 requests to finish before you can make the 6th. On the other hand, if you only need to make 5 requests, your browser can start rendering the page a lot sooner.

One way is to combine images into a css sprite. Here’s ours:

Lane's CSS Sprite, which combines social media and other common icons and images from the website into one image.

That’s 15 different images combined into one. And even though there’s empty space on the bottom right, it’s actually usually faster to fetch a slightly bigger image then it is to fetch each icon individually.

Another way is CSS and JavaScript aggregation. Most pages on our website have 35 CSS sheets and 35 JavaScript files – but after aggregation, you only end up requesting 7 of each (there’s reasons why 7 of each is better then just 1 CSS and 1 JS, but that’s outside the scope of what we’re doing here).

But the easiest way to speed up a request is to not make it at all. When you make a request, you send some request headers with it, that tell us things like if you’ll accept a compressed version and what language you prefer. Then we respond with a header that tells you how long you should keep our response cached on your computer. If you need that resource again before the expires time we gave you, you just use the local one, rather than fetching a new one.

In addition to sending headers with your request, and us sending different ones, we also send each other cookies.

A picture of some cookies
baked by https://www.flickr.com/photos/plutor/3646688/in/photostream/

Cookies are always set on a domain. When you log into Moodle, cookies are set on the domain classes.lanecc.edu, so Moodle knows on every page load that you’re logged in. But here, on the Lane website, we’re not so lucky, as you can actually use the website on either www.lanecc.edu, or on just lanecc.edu. So we set our cookies on .lanecc.edu. That little dot before lanecc.edu is critical. That tells your browser to send your cookies to all domains that end in lanecc.edu.

The downside is that those cookies are sent on every request to our domain – even requests that don’t need them, like the request your browser made to show you the picture of those cookies up there.

What does this have to do with static?

We’ve started moving relatively static (unchanging) resources, like the college logo and the megamenu onto the static asset server, which we’re putting on the domain static.lanecc.net. Since these resources are relatively unchanging, we can set a long expires time – maybe 30 or even 45 days in the future (for now, it’s set to 0minutes in the future, for testing). Once your browser has fetched them, you won’t need to fetch them again for a whole month. And because they’re not under the lanecc.edu domain, you won’t send any cookies (and we won’t send any back), making the few requests you do need to make even smaller.

If you’re really curious about the inner workings of our new static asset server, I’ve added some extra geeky content to the Our Tech Stack post.

In the months to come, we’ll keep migrating content onto the static asset server, trying to reuse resources between websites, so that the logo you see on myLane is served from the same URL as the logo you see in Moodle, reducing the number of requests you need to make, and making it simpler for us to update things in the future.

Link text standards

Take a look at these two sentences:

Which is better?

Answer? the first one. There’s a couple reasons.

First, it turns out that descriptive text in links like this is actually really helpful for search engines to determine what’s on that page. So providing descriptive links can really help improve search.

Second, if you’re linking to another Lane page from within Drupal, if you use descriptive text you don’t need to worry about ever updating the link. We’ll take care of it for you. If you use the URL as your link text, then you might get a weird situation where the link text no longer matches the url you’re linking to – it says “lanecc.edu/science/bio” but you’re actually sent to “lanecc.edu/science/biology”.

Third, it simply looks better. No one wants to read long, ugly looking urls as part of their text.

“But wait,” you say, “what about when someone prints the page?”

We’ve thought of that. When you print a page from the Lane website, we automatically include the url next to the linked text. Of course, we’d rather you didn’t print web pages in the first place, but that’s a discussion for a different day.

Of course, there’s exceptions to this rule. Use common sense.

We’ve added a check to our linkchecker, so from here on out we’ll be actively hunting for these links. We’ll fix some of them for you, but we may also contact you for some help rewording your content.

As always, if you have any questions about best practices with content, send Lori an email.

New Social Media Options

On some Drupal pages, there’s links to department social media on the left hand sidebar, right at the bottom of the navigation menu (for an example, check out the Marketing and Public Relations site). Recently, we’ve added a few more social media options that you can add to your website. The whole list of options is:

  • Blogs
  • Facebook
  • Flickr
  • GooglePlus
  • Instagram
  • LinkedIn
  • Pinterest
  • Twitter
  • Tumblr
  • YouTube

If you don’t currently have permission to add social media sites to your department’s pages, talk to Lori about becoming an advanced content editor. And if there’s any other social media sites that you think we’re missing, let us know.

As always, make sure to follow the Social Media Standards!

Common Pitfalls – Alt Text

Recently we updated our link checking script to hunt for some common mistakes in image alt text.

As you may recall from your initial Drupal training, alt text is very important for accessibility, as it’s the text that’s read to the visually impaired to describe what’s in the image. Close your eyes for a second and pretend whatever you put in the alt text is being read to you. Is what’s being read so short that it’s meaningless? So long that you get bored just listening to it? Does it repeat something that you already say in the text, making it redundant?

But we’re interested in even worse problems today. Sometimes people put in alt text that doesn’t event attempt to describe the image. For example, some people use the file name as the alt text. Like this:

<img src="/dog.png" alt="dog.png">

If you were using a screen reader, your software would get to that image and read you “dog dot p n g”, which is summarily unhelpful. Reading the file name won’t help anyone better understand what’s in that image. Also unhelpful is this:

<img src="/dog.png" alt="goldenRetrieverPuppy">

which we haven’t seen recently, but has come up in the past. That’d just cause the program to attempt to read goldenRetrieverPuppy as a word, possibly completely unintelligibly.

And then some people are just lazy:

<img src="/dog.png" alt="picture">

Completely unhelpful.

Remember, for us (as it should be for everyone) being accessible isn’t optional. Starting today, we’ll be scanning for these errors automatically, and emailing content editors that need to touch up their alt tags a bit.

 

Last Deployment?

No, seriously. This will be the last deployment blog post you ever see.

Done today:

We also did a couple touchups in other areas of the site, correcting URLs and page titles,

In the upcoming weeks we’ll be looking through the areas of Drupal that migrating touched, trying to clean up some of the excess redirects and url alias’s we’ve developed. But as of right now, we’re done with the migration (check out the embedded graph in our progress page!)