integrated web development: building a better site with design, seo, cro & social

Did you ever hear the story about the SEO who tried to optimize the entire internet? She worked feverishly, day in and day out, website by website, working towards creating an internet optimized to perfection. Every day she worked, but every day more websites kept popping up. She simply couldn’t keep up, so she devised a plan – a plan to get designers and developers involved. Slowly, she taught them the ways of SEO, CRO, and social integration and they quickly picked up on her tactics. Soon all the new websites were aesthetically pleasing, user friendly, and SEO friendly. The developers, designers, CRO’s, SEO’s, and Social Media Marketers joined forces and they all lived happily ever after.

what is integrated web development?

Now, I understand that we don’t live in a fairy tale, but wouldn’t it be great if all websites were designed with SEO in mind from the get-go? Website design, content planning, and SEO strategy should work together holistically to build a better website. The old practice of optimizing after the site is built or redesigned almost always results in missed opportunities.

Integrated Web Development means working together from the start and developing with optimization in mind. It means working as a team during the development process; combining each individual’s unique skill set to create a website that is optimized for the web.

why is integration important?

Imagine the frustration you would feel if, after entering that last piece of code, you find out that changes need to be made. Not small changes, but major changes. Not only is implementing these changes time consuming, prioritizing these changes can be difficult. In some instances, an entire website overhaul is needed, which can be costly and takes weeks and even months to complete.

By understanding SEO essentials and, reversely, the web designers’ needs and concerns, the necessary optimizations can be mapped out ahead of time and implemented as the website design progresses. Saving time, money, stress, and aggravation.

quick wins for integrating

Now, every fairytale has it’s magic spells. Here are some tips to consider when designing a website to keep it looking awesome and SEO friendly.

keep your website crawlable

Googlebot, as Google calls it, is a web crawling bot (sometimes called a “spider”) that crawls the internet discovering new and updated pages to be added to the Google index. Every day, using an algorithmic process, billions of websites are crawled by Google. Through the process, any new sites, changes to existing sites, and dead links are noted and the index is updated. If the Googlebot is incapable of crawling your site or even incapable of crawling your site efficiently, this will negatively affect your ranking in the search engine results pages (SERPs).

what does Googlebot see?

A Googlebot is just that – a bot. Therefore, all the intricacies of a website that we, as consumers, see and appreciate on a daily basis are not recognized by Google. For example, a Googlebot cannot appreciate all the nifty Flash integration a website uses. A website filled with Flash does not have any SEO value because Googlebot will not crawl these elements on the page.

You may be curious about your own site and wonder: What does Googlebot see? Luckily, as long as you have a Webmaster Tools account you can find out. This past May, Google announced a new featured – Fetch and Render.

With Fetch and Render, Google presents us with the opportunity to see exactly what Googlebot is seeing for both desktop and mobile devices. For example, the DragonSearch homepage contains a flash video. In the render below we simply see a black box warning. Imagine if your entire site was in flash. The Googlebot would gain very little information about the site.

submit a sitemap

An XML sitemap is essentially a map of a website designed for website crawlers such as Googlebot. When a web crawling bot arrives at a website they look for the website’s robots.txt file. The robots.txt file tells the bot if there are any changes that are off-limits and should not be crawled. In addition, the bot seeks the website’s sitemap, the location of which should be in the robots.txt file.

When a bot discovers a sitemap this becomes the map to which they crawl the website. This map allows the spider to gain a better understanding of the website’s architecture and content structure. A sitemap should be generated and checked for errors on a monthly or quarterly basis depending on the size of the website. Common elements like 404 errors, 301 redirects, or any other type of response code other than 200 do not have a place in the sitemap. Make sure the sitemap is pristine to ensure that any time the website is being crawled it is being done efficiently.

add social buttons

Social media buttons, ideally located in either the header or footer of your website, are a great way to further integrate with your social media marketing efforts. Social buttons allow interested users to quickly and easily visit your social media platforms and follow your posts to stay up to date.

Social Media buttons for Google, Facebook, LinkedIn, RSS, Twitter

While you’re at it, add social buttons to blog posts. When a user comes across your great blog post, with one click they can share the post which further expands your social reach. Be sure to include appropriate @ tags, # tags, and even tracking to ensure that you’re effectively branding and measuring success. We created a great Word Press plug-in, DragonTweet, that allows you to customize Tweets that others will share from your site so, give it a try. Also, make sure you add the right social buttons. Nothing frustrates me more than when I want to share a blog post and go to click on the social button but it is a “follow” button instead.

testing, testing, 123

Remember, optimization is never complete. Therefore, be prepared to test. Test your main call-to-action copy, color, and location, for example. You may find that simply moving the location of your call to action greatly increases your click-through rate. Data is essential in this phase. Collect data, analyze, and forever test. Simple tweaks can have vast results.

diving deep with advanced SEO, CRO, and social integration

The optimization tips above are only the beginning. Ready to really jump in?

website code optimization

It is essential to have SEO friendly code. When a Googlebot arrives at your website it crawls through the website’s code. As it crawls, it picks up valuable information about the site. For example, the topic of the website is understood and links to and from the page internally and externally would be noted. In order to provide the Googlebot with as much information as possible, there are a number of optimization techniques that can be implemented.

organize with header tags

Header tags are a great opportunity to structure your information for both the user and crawl. Header tags structure the information on a page and provide a hierarchy of information. Each page should have an H1 tag. The H1 tags tell the user the topic of the page they are viewing in the most general sense. As appropriate, introduce H2, H3, H4, etc. tags to further organize the information.

image alt attributes

In compliance with the Disabilities Action Section 508, ‘Alt’ attributes, or alternative text, should be applied to all images to allow for accessibility to people with disabilities. Search engine spiders are the ‘most disabled’ users since they cannot see images but rather only the code. The ‘alt’ attribute should clearly describe the subject of the image. Googlebot can then use this additional information to gain a more detailed understanding of the page. Therefore, create a keyword-focused ‘alt’ tag for each image on site. In addition, this information will help the search engines index the images.

integrate social further

Social integration doesn’t end at adding social buttons to your website. There are a number of additional integrations, namely, Twitter cards and rich pins.

twitter cards

Twitter Cards allow you to attach rich media such as photos and videos to your tweets to drive traffic to your website. When a user tweets links to your content a card is created that adds visibility and makes the post stand out. To create a Twitter card, a small amount of meta-information must be added to the page’s code. However, this process is easy with the use of plugins, such as All in One SEO, that guide you through the process.

There are a number of different Twitter cards that you can choose from, from photo cards to lead generation cards. Experiment with many to determine what works best for your needs.

rich pins

Similar to Twitter Cards, Rich Pins give you the opportunity to add additional information and make your pins stand out among the rest. There are five different types of rich pins: movie, recipe, article, product, and place. Additionally, like Twitter Cards, Rich Pins requires the addition of meta information to the appropriate website page.


Schema is a type of structured data that allows, through a specific markup language, a search engine to gain a better understanding of the information on a webpage. With the introduction of this markup vocabulary into your code, a Googlebot can quickly determine valuable information on your website.

In my opinion, one schema markup that any business cannot go without is Local Business Schema. Through schema markup you can easily define, to name a few, the business’ address, contact information, and hours of operation.

A screenshot of details for the local business schema

There is also another additional benefit. Websites that are marked up with schema often display a knowledge graph in the SERPS. What can be better than that?

design for the user

Lastly, remember who your website is for… the user! There are a number of things that can turn a user away from your website. Does the site take a long time to load? Is it clear right away what the topic of the website is about? Is the website easy to navigate and find what you are looking for? These, and numerous other questions, are the ones you should be asking yourself.

Support your hypothesis with data. Consider the conversion funnels and user paths. Determine where users drop off. Take a look at bounce rates, average time on site, and conversions to determine your strongest pages and also your weakest. Then, work towards building up these pages until they are performing better than before. When you think of the user your conversion rate should increase correspondingly.

Overall, the information above only scratches the surface when it comes to optimization opportunities. Therefore, call up your favorite SEO, start collaborating, and make your website the fairest of the land. You wouldn’t believe the opportunities that lay ahead.

Do you have any tips and tricks of your own? We would love to hear your thoughts and feedback in the comments below.

Connected TV vs. Over the Top: What’s the Difference?

New Year, New Strategy: 3 Elements for Digital Strategy Success in 2022

Meet Elizabeth Banks, Archer Roose’s “Uninvited Guest”

Marketing in the Time of Coronavirus