Case Study of Schema Proper Markup

schema example

While checking the NAP (Name Address Phone) details on my clients location in Google Maps, I saw a clear case study for implementing Schema data with proper markup code. No other work was done for the local business on Google maps, but we can clearly see a link to it’s menu. When this website was published some years ago, I implemented the markup on just the menu items to denote them as “menu”.  This markup is used to better index information for findability purposes.  Because every item on the menu page is designated as “menu”, Google knows that this is the menu page for this establishment, and has conveniently added a link to the menu page. This was done organically, meaning we didn’t directly tell Google to put that link there, but Google put that link there on it’s own.

schema example

Improving Google PageSpeed in WordPress

Google PageSpeed 100

I set out to improve my Google PageSpeed score to 100. Through many trial & errors, I finally dumped my current theme and used just the default 2016 WordPress theme. Technically I should create a child theme if I was going to put it into production, but I just needed some insight so I ripped into the parent theme.

The end results for making 2016 theme score 100 is:

  1. Remove the external stylesheet style.css, minify it, and place it in the head.
  2. Remove references to Genericons and specialty fonts out of the functions.php file
  3. Minify the functions.js file
  4. Add this to functions.php to move the jquery scripts to the footer:
add_action('wp_enqueue_scripts', 'rudr_move_jquery_to_footer');  
 
function rudr_move_jquery_to_footer() {  
 	// unregister the jQuery at first
        wp_deregister_script('jquery');  
 
        // register to footer (the last function argument should be true)
        wp_register_script('jquery', includes_url('/js/jquery/jquery.js'), false, null, true);  
 
        wp_enqueue_script('jquery');  
}

This last step got me past the dreaded “remove render-blocking js”.

Practicality?

While this theme is now technically scoring 100, getting a site ready for production will be a little harder. As plugins are added and dependencies appear, the score will decline, but at least I now have a basis to start from (start a new theme) and can work on the score each step of the way.

Bookmark: Function found here:

https://rudrastyh.com/wordpress/render-blocking-javascript-css.html

 

Google PageSpeed 100

AMP Accelerated Mobile Pages

Lightning bolt symbols AMP compliant

Accelerated Mobile Pages is an open source project aimed to make news pages load faster on the web. It dictates how the page resources are loaded, primarily Javascript, because JS can be a resource hog that does not allow the rest of the page to load until it finished loading all it’s JS first. This is called render-blocking JS. It also requires knowing the dimensions of your assets so it can take control of your page layout. In other words, it knows the final dimensions of assets in the page, so it won’t half load the content, allow the user to start reading, and then have content “jump” around because it’s still loading content. This is a particularly painful point around ads, because this is what a slow-loading ad does to the user experience. Additionally, users are turning to “ad blockers” to mitigate the poor user experience. The AMP project is finding a solution that benefits not only the user experience, but a better solution for monetized publishers also. The hope of the project is to have content, and ads, load so fast that utilizing a 3rd party ad blocker will be the slower experience, thus eliminating the need for the blocker.

To load fast, there are certain rules a developer must follow when implementing the website. Most of these rules are centered around loading all JS files async, portion-sizing the CSS down to what is needed at just the page level, concentrate on loading above-the-fold content immediately, and limiting CPU usage.

WordPress is adopting the AMP methods so we might see this baked-into core WordPress in the future. Right now there are a couple of plugins available. I downloaded and tried the AMP plugin on this blog and observed what it is doing.

AMP research
Comparing the website with and without the AMP plugin for WordPress.
  • To see the AMP styling, you have to append “/amp” to the end of your URL.
  • It adds the appropriate js framework needed to make the page AMP compliant.
  • It adds “async” to javascript files so they are not render-blocking.
  • It added it’s own CSS to the head of the page, including @font-face definitions for custom fonts
  • It removed the main navigation and sidebar
  • Images are replaced with amp-img so the SRCSET is baked right into the solution.
  • Speed test shows the AMP page scores an 88 for the speed test, while non AMP page scores 32.

You don’t get to choose which version of the page the user sees, that is handled by the Google Cache System.

Plugins are only able to AMP the POSTS, not pages and not the archives.

The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated.” So I guess this is the advantage AMP has over using just a CDN to deliver speed.

See that Lightning Bolt?

At first I thought this was a sign of AMP compliant pages, but it is instead a symbol of Facebook’s Instant Articles:

AMP in the wild
AMP in the wild: on Facebook

I clicked it to see what it looks like, and it really was “lightning” fast, and this is what the article looked like:

AMP article found in the wild

This article has 3 sponsored ads in it that I scrolled right on by… but the ads were just as fast as the content delivery so as a user, I really didn’t mind them being there because they did not hinder my experience.  This article also has an embedded video that auto played as I scrolled over it.  I wasn’t too thrilled about the sound coming from my phone (since I was at work) but even the video, sound, and ads never slowed down my browsing experience.

Notice the URL for this ends in .html.

 

Title Attribute is Dead?

Jeffrey Zeldman

The once “must have” title attribute on links is no longer relevant for SEO purposes. Even Zeldman says so. I love this article and how it gives a video of how screen readers interpret the title tag.

https://silktide.com/i-thought-title-text-improved-accessibility-i-was-wrong/

But is it really dead? Even the attached article points to the w3c recommendations of DO put ALL the text in the anchor tag, but hide it for the sighted person. We see “read more”, but the screen reader announces “Link: Sandy’s great article on links. Read More”.

Wow, everything I have been taught about hiding text is that it is bad. It has always been bad. Until now.  In this case it is now recommended.  I get it. I will always support techniques for more digestible content especially for the disabled.

Correct Full Screen Sliders

This example proves that when used correctly, a slider can be a beneficial marketing tool that focuses the user's attention to help drive conversion rates.

Aren’t we tired of seeing the same cookie cutter sliders on every website? I believe the trend is to steer away from sliders. They are routinely installed without any thought to their purpose, no thought to why we are including them other than habit.

Then I saw this web site example from Slack, and how they are utilizing the slider in a full screen fashion. I have to admit, I liked it. The slider is used as a marketing message delivery system on the home page. The full width design centers the users concentration and delivers impact by removing all of the other clutter typically jammed into a home page. It is clear, concise, and effective at delivering exactly the intended message.

Let’s also applaud the placement of the signup button. It is at the top coupled with their mission statement. There is no doubt what you are supposed to do here and why you are doing it. The company must have fantastic conversion rates with this type of UI placement.

This example proves that when used correctly, a slider can be a beneficial marketing tool that focuses the user’s attention to help drive conversion rates.

This example proves that when used correctly, a slider can be a beneficial marketing tool that focuses the user's attention to help drive conversion rates.

Beginners to Website Speed Optimization

Website Optimization
Website Optimization
Website Optimization

Notes on Website Speed Performance Article https://kinsta.com/learn/page-speed/

  • Houston Airport Incident
  • Elevators mirror keep us busy styling ourselves
  • You got 3 seconds.
  • “Tablet users on the other hand spend 20 percent more than desktop users.” We are shopping from the couch.
  • Web traffic and search engine ranking is primarily a vanity metric for website performance.”  Ouch, says the girl with some SEO background.
  • Interested in “Initial page speed”, pushing slow loading content to the back
  • “website monitoring specialists Pingdom and GTMetrix yield valuable insights into website performance indicators for free, and programmatically generate scores and suggestions to educate non-geeky website owners.”
  • Manju, have you tested our SRG sites on Pingdom? What are the results? How do we look statistically?
  • But I don’t know what that means: “And it goes without saying, use future expire headers for images on the website core (.htaccess for Apache servers) to optimize image payload with server-side preprocessing.”

“For underperforming websites – notice underperformance being a relative term – page load times exceed human limitations, whereas failure to process user requests gives the false impression of ignorance or incompetence in delivering the desired response efficiently and accurately.

High-performing websites on the other hand – notice high-performing being a relative term as well – impact three parameters that determine user engagement: user feelings, user mental states and user interactions. These three aspects create an emotional, cognitive and behavioral connection between human visitors (can’t say much about bots!) and the website.”

Dr. Becky Laird

“Just want to also say thank you so much for your talent, thoroughness, attention to detail, organization and your patient time…. I would love to refer work to you if you are taking on more work…”

I helped Dr. Becky with moving her existing website to Wordpress and set her up with some SEO techniques.

 

Googles SEO Starters Guide

Googles starter guide to SEO

I have Search Engine Optimization experience from my last 2 employers: 4 years Medical Management Associates, and 2 years Local Marketing Inc. Additionally I studied SEO while attending the Art Institute under instructor Aarron Walter. The essence of online marketing is an ever-moving target because the rules change. The search companies continually update their search algorithms to provide better, honest results.  Marketers who try to game the system by bloating their content with too many keywords designed only for search engines will fall out of favor in the search results war, and they lose. The best advice for online marketing is true, honest, and real content that comes directly from you, and you provide content that other people want.

To do an SEO audit, I would start with Google and follow their own guidelines. This piece is labeled a starter guide, but it serves as a good refresher for myself.
http://static.googleusercontent.com/media/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf

I’m not sure I agree with what is being said about the mobile search, though. It sounds like they are talking to the companies that are still providing a separate mobile site to users, instead of one website that is responsive to all screen sizes.

Karen Sims Deady

Thank you so much! Love my Website!!

Thank you so much! Love my Website!!

“Thank you so much! Love my Website!!!” – Karen

Karen is a jewelry artist and I updated her existing WordPress design to be responsive. Also, I  moved her jewelry photos to blog posts where than can be categorized, tagged, and commented on to increase textural content and improve SEO. Additionally, I added social sharing buttons to help her improve her social presence.

 

Patrick Clark

Barker Street

“We felt that Sandy took real ownership in creating our website, her research of our company and our industry helped challenge us to improve our message and better define our target audience. Working with Sandy is the closest thing to having in-house web design!”

“Sandy doesn’t just take your content and design a website around it, she meticulously researches your industry so that the message is clear, current, and consistent. No matter the industry Sandy finds the right key words and imagery to make your website stand out amongst your competitors .”