SEO is a Team Game: Front End Development

SEO is a Team Game: Front End Development

Google PageSpeed InsightsFront end developers have always, inevitably, had a role in SEO. Initially, meta tags and keywords were all the rage and many dirty tricks were used to hide keywords all over the site, trying to make it seem like it was filled with good content. And while meta tags and keywords still have a large role, these and almost all of your quality content strategies can be virtually nullified by a slow loading site.

Page Loading Speed via HTML: Both Google and Bing use page loading speed as a ranking factor. Search engine spiders can estimate your site speed fairly accurately based on a page’s code and filesize.

Page loading times and perceived loading times aren’t just a concern to performance junkies, site speed should be a primary concern for everybody. Server admins and back end developers contribute to this, but I feel the brunt of this falls on front end developers. In addition to page load time, here are some other factors that front end developers should be responsible for.

As we reference this list again, there are a number of tools or plugins that can help give you complete control over the next few items. Yoast is one of the most popular WordPress plugins around.

Keyword in Title Tag: The title tag is a webpage’s second most important piece of content (besides the content of the page) and therefore sends a strong on-page SEO signal.

moz-title-tag-preview-toolTitle Tag Starts with Keyword: According to Moz data, title tags that start with a keyword tend to perform better than title tags with the keyword towards the end of the tag. Google recently redesigned their results and the slightly larger font size may affect your previous search listing. Fortunately, Moz offers a Title Tag preview tool that reflects the new design.

Rel=Canonical: When used properly, use of this tag may prevent Google from considering pages duplicate content. Duplicate content is a negative factor with rankings.

Keyword in Description Tag: Another relevancy signal. Not especially important now, but still makes a difference.

Keyword Appears in H1 Tag: H1 tags are a “second title tag” that sends another relevancy signal to Google, according to results from this correlation study

HTML errors/W3C validation: Lots of HTML errors or sloppy coding may be a sign of a poor quality site. While controversial, many in SEO think that WC3 validation is a weak quality signal.

Alt Tag (for Image Links): Alt text is an image’s version of anchor text.

Site Over-Optimization: Includes on-page factors like keyword stuffing, header tag stuffing, excessive keyword decoration

In this series:


SEO is a Team Game: User Experience/Design

SEO is a Team Game: User Experience/Design

I think this is an unintentionally undervalued part of SEO. I say unintentionally because measuring the quality of the user experience isn’t easy to do. Even the Google Quality Guidelines doesn’t really clear that up for us:

“We may focus on different parts of the page or different aspects of the page. One rater might rate based on the content of the page and another based on the layout of the page.”

“We may even have different ideas of what High quality means for a landing page. What makes an encyclopedia article High quality? What makes a product page High quality?”

While there aren’t hard guidelines for making a page layout perfect, here’s your direction:

“The page layout on highest quality pages makes the Main Content immediately visible.”

Site Usability: A site that’s difficult to use or to navigate can hurt ranking by reducing time on site, pages viewed and bounce rate. This may be an independent algorithmic factor gleaned from massive amounts of user data.

Screen Shot 2014-07-24 at 11.05.09 AMSite Architecture: A well put-together site architecture (especially a silo structure) helps Google thematically organize your content. It also helps the user find what they are looking for -> improving the user experience -> potentially leading to more time on the site -> all other related factors.

Dwell Time: Google pays very close attention to “dwell time”: how long people spend on your page when coming from a Google search. This is also sometimes referred to as “long clicks vs short clicks”. If people spend a lot of time on your site, that may be used as a quality signal.

Popups or Distracting Ads: The official Google Guidelines Document says that popups and distracting ads is a sign of a low-quality site. Unfortunately ads are often an obstacle that we must overcome. To keep them from negatively affecting the user experience, ads need to be part of the planning process and not an afterthought.

Breadcrumb Navigation: This is a style of user-friendly site-architecture that helps users (and search engines) know where they are on a site. This is an example that directly affects user experience and how well your site gets indexed.
Coyier Breadcrumbs

Mobile Optimization: Google’s official stance on mobile is to create a responsive site. It’s likely that responsive sites get an edge in searches from a mobile device. There’s no doubt that when sites are responsive, it’s a win for clients and users. Planning this from the beginning is best but even retrofitting in some responsive behavior can have dramatic benefits.

Mobile optimization is best done when design, user experience and front end development work together. Each team plays an important role in producing an intuitive design that loads quickly. We’ll expand upon this on our next post focused on SEO and Front End Development.

In this series: