Content Migration: A Step-by-Step Guide, Part 1

We’ve previously posted some guidelines for changing Content Management Systems. Today’s post digs a little deeper and provides the first part of a step-by-step guide for how to migrate individual pieces of content.

This guide is intended for the website redesign stage where you are ready to populate your new site with content. For more about the various phases of the redesign process, check out this guide.

The steps outlined below follow best practices for SEO, accessibility, and general user experience. I’ll be using posts from a business blog as an example of migrated content. The following tips are not only applicable to migrating existing content, but can also be used as a checklist for publishing new content.

1. Migrate the Content Body

The body text is the substance of your content. All remaining steps of this guide are “simply” concerned with how you present your piece.

The most effective way to migrate your content, e.g. a blog post, is to copy the source code of the post. The source code is what you see when you are editing the HTML version of your post, rather than the formatted preview. There are tools for batch exporting and importing source codes between Content Management Systems, but you can also simply copy-paste your body text in HTML format.

By copy-pasting your post in HTML format you won’t lose all the good stuff during migration; header tags, embedded images, hyperlinks, etc. After posting the source code, preview your post: If your HTML was correct in the original post, it is likely to have carried over successfully into your new CMS. You still want to make sure that everything is formatted and structured as intended, which leads us to the next step.

2. Check Semantic Markup

If your post has several sections with sub headers, you have to make sure these follow a logical structure by tagging them correctly. The ‘Heading 1’ or <H1> format is reserved for the post’s title (which will be covered next week in step 10). First level sub headers should be tagged with <H2>, second level sub headers should be tagged with <H3>, etc. This is critical for both web accessibility purposes and SEO.

You would also want to review any other text formatting carried over during migration. For instance, it is common to have additional formatting, besides h-tags, on headers for cosmetic reasons. However, for consistency it is better practice to have your default headers coded in a style that works from both a design and readability perspective, so that you don’t have to add extra formatting.

Try to keep the formatting of your post simple. Just using clean <h2>, <h3> and <p> (paragraph) formats will get you a long way. In general, for any other formatting, like bold, italics, center alignment, etc., ask yourself; does it help convey your message? or can you leave it out without hurting the readability of your content? You can remove any superfluous styling with a function called ‘Clear formatting’ or similar depending on your publishing tool.

3. Add Links and Check Them

If you had hyperlinks correctly coded in your original post, they should have carried over in your new editing tool.

To learn more about how writing proper link texts from an accessibility and UX point of view, check out our “Quick Guide to Writing Link Texts”.

When reviewing your post before publishing, remember to check if your links work correctly. As the default, you want all link destinations to open up in a new tab or window. This way, you are not forcing visitors away from your blog or website, and they can easily go back and continue reading.

Only have link destinations open in the same tab if you intend to lead the visitor onto a natural next step in their reading; the next entry in a blog series, for example.

Read more about Siteimprove’s automatic link checker. 

4. Add ‘More’ Tag

The ‘More’ (or ‘Read more’) tag indicates the end of your post’s excerpt; that is, the short teaser of your text body displayed in any previews of the post. For the most effective use of the ‘More’ tag, make sure that the first sentence or two concisely tease the key point(s) of your post.

In HTML, the ‘More’ tag looks like this: <!–more–>

Here is an example:

People are the most important part of any system of web governance. In this post, we’ll explore some of the ways you can ensure peace by delivering the clear job descriptions your team needs.<!–more–>

5. Add Images

Visuals are key to the user experience and are good for SEO. At least have a main image which can be used at the top of your post and as a thumbnail in previews of the post.

Remember to adjust the size and alignment of your images.

From an accessibility standpoint, it is of critical importance that any images that are not purely decorative and that convey information not otherwise stated in the text of the post should have an ‘alt text’. The alt text should describe the content and purpose of the given visual, and ideally, from an SEO perspective, contain some keywords (covered next week in step 10).

For more on alt texts, read our post on common accessibility misunderstandings.

6. Add Call(s)-to-Action (CTAs)

Never let your blog posts or any other content be a blind alley. At the end of your post, and perhaps even in your text body, offer your visitors something more: The ability to download or register for something that keeps them engaged with your business.

For tips on CTA best practices, check out this guide from Hubspot.

In a separate document, you might want to keep track of where you have used which Call(s)-to-Action. In this way you have an overview of where your web content fits in various user journeys.


Check in next week for the final steps of this guide, which will cover adding tags, optimizing for search engines, mapping redirects, and more. Meanwhile, check out the guide “The 7 Phases of a Website Redesign”.





Get the guide: The 7 Phases of a Website Redesign




Your email address will not be published. Required fields are marked *

*

by Aske Denning
January 26th
2016

Subscribe to Blog Updates