Mockups are a key part of creating new marketing campaigns and redesigning entire websites. As partners in the process of producing those new experiences, search-engine-optimization professionals should offer feedback at every stage of the process.
Critiquing mockups can be challenging, but not impossible. And optimizing for SEO from a mockup is worlds better than waiting until all the design and user-experience decisions are made.
We need to review mockups to identify the challenges and opportunities that the new design presents. We should imagine the ways that the mockup could be brought to life and optimize those — while stating your assumptions along the way.
To be sure, offering recommendations based on mockups is not as effective and efficient as optimizing an experience that has been developed. But waiting until something has been developed to offer specific SEO recommendations risks missing out on critical decisions that must be made to get to there.
Optimizing Content in a Mockup
Because the mockup will typically contain textual content, optimizing this aspect is one of the easier tasks. Even if the text is a placeholder, you can still make recommendations based on what it should be.
Textual content is critical to contextual relevance, one of the major components of every search engine algorithm. For the text to be relevant, it first has to have a place on the page.
Forget, for a moment, the words themselves. Are there headings? Are they designated as H1 or H2 headings? Has room been allocated for some descriptive text somewhere on every page?
Even if the text is a placeholder, you can still make recommendations based on what it should be.
Now, look to the actual words. Has the creative team used primarily romanticized marketing language? Are there enough words present that real consumers would use to describe the products? Recommend simple additions or substitutions rather than complete rewrites. Remember, SEO is not the only goal. Copy needs to speak in the correct voice and tone to represent the brand and appeal to shoppers, as well.
Keep the length of the text in mind as you’re making content optimization suggestions, especially if you’re working with international sites that need to be localized in other languages. Some languages use more space to say the same thing. Regardless, do not alter the allotted space in the design. If needed, look for easy areas to add additional text that won’t break the design or require a complete rework.
The less work you can make for the creative team while getting the essence of what SEO requires, the more receptive they will be to modifications and the more willing they’ll be to work with you in the future.
Make sure to note that the text in the mockup needs to be developed as plain text floated over a background image — not embedded within the image itself. The text should also be updatable by the business via a content management system, as opposed to having to go through developers to update it.
Lastly, ask if any areas of rich articles or guides that don’t exist today will be generated by the business or if it will be sourced from a content syndicator. Incorporating syndicated content is a good play for visitor engagement. However, syndicated content will not drive natural search performance because it is at best duplicate content and at worst serving to drive natural search performance for the content syndicator rather than your site.
Functionality Implied within Mockups
Now it’s time to use your imagination. Often designers will include thoughts on how navigation, carousels, tabs, and other implied functionality that can’t be displayed in a flat image mockup. Make sure that you understand those intentions before making SEO recommendations.
Focus first on header and footer navigation, as these are always essential elements to natural search performance. It’s common to show one heading rollover state to demonstrate functionality, but mockups seldom document all the heading options. Will the headings shown trigger rollovers or mega-navigation? Will any links — even one — be added or removed from the header or footer?
Next, move on to the promotions on the page. Will there be a rotating feature like a carousel? Will there be tabs? How are those triggered? What will be visible in every state?
This is a good time to note assumptions about links you need to be present on the page that aren’t currently seen. If some of the areas of high keyword demand aren’t currently being linked to, request that they be added.
If some of the areas of high keyword demand aren’t currently being linked to, request that they be added.
For example, maybe a series of how-to guides or a specific type of products with a hot new feature has the potential to boost natural search performance (based on keyword demand), but is buried in the site. Recommend navigational or promotional links to boost the visibility of that content, both to site visitors as well as to search engines. Remember, keyword demand is a measure of how many searchers are looking for a keyword or phrase. If they care about it enough to search for it, then they probably also care enough about it to navigate to it within your site’s linking structure.
Development Decisions That Make a Difference
Make sure to note that everything seen and unseen needs to be created in a way that search engines can crawl and index.
Content that needs to rank should not be visible based on cookie acceptance, because search engine crawlers do not accept cookies. Make everything that needs to drive natural search performance available in an unauthenticated state. Anything you want to rank for needs to have the content to drive those rankings accessible without entering information into, say, a sign-up form, password form, or search box.
Clickable, browseable navigation and text are critical to natural search performance.
It’s important to note that Google cannot access all JavaScript content, even though Google claims otherwise. I’ve seen too many cases of search engines either not being able to crawl a complex JavaScript experience at all, or being able to crawl it but not being able to associate relevance or authority signals with the links inside the experience.
In particular, Angular and AJAX pose serious SEO problems if not planned for. Make sure to ask that proper JavaScript headers, lists, and linking are employed in all instances.