WordPress Code Snippets to Jump-Start Your On-Site SEO
•Download as PPTX, PDF•
1 like•387 views
One of the three legs in the SEO stool is code and content on your own site, and WordPress on its own is relatively SEO-friendly. But for many sites, it just isn’t enough to have the extreme basics – and the deluge of SEO plugins for WordPress show that both developers and site owners want to know how to do it right. In most cases, you don’t need a plugin, just a few good code snippets. These snippets range from clearing out cruft in your wp_head() to using custom fields instead of bloated plugins to changing settings in your server files to speed up your site. By using the snippets that work for your site, you can increase search engine traffic and give both robots and your site’s readers the experience they want to keep them coming back.
Recommended
More Related Content
What's hot
What's hot (19)
Similar to WordPress Code Snippets to Jump-Start Your On-Site SEO
Similar to WordPress Code Snippets to Jump-Start Your On-Site SEO (20)
Recently uploaded
Recently uploaded (20)
WordPress Code Snippets to Jump-Start Your On-Site SEO
- 1. @ferkungamaboobo #JumpstartSEO WordPress Code Snippets to Jump-Start Your On-Site SEO
- 3. SEO Increase your search engine rank Machine learning, External links, and… @ferkungamaboobo #JumpstartSEO
- 4. On-Site SEO Increase your search engine rank by changing things on your site Content & Code @ferkungamaboobo #JumpstartSEO
- 5. Jump-Start Your On-Site SEO Increase your search engine rank by changing things on your site today @ferkungamaboobo #JumpstartSEO
- 6. @ferkungamaboobo #JumpstartSEO WordPress Code Snippets to Jump-Start Your On-Site SEO
- 7. Increase your search engine rank by changing things on your site today using small WordPress code snippets @ferkungamaboobo #JumpstartSEO
- 8. Only include what is needed @ferkungamaboobo #JumpstartSEO
- 10. Minify Big Files@ferkungamaboobo #JumpstartSEO
- 11. Minify Big Files@ferkungamaboobo #JumpstartSEO
- 12. Minify Big Files@ferkungamaboobo #JumpstartSEO
- 13. Minify Big Files@ferkungamaboobo #JumpstartSEO
- 14. How To Minify Big Files <!-- regular --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/ jquery.js"></script> <!-- Minified --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/ jquery.min.js"></script> @ferkungamaboobo #JumpstartSEO
- 15. How To Minify Big Files Dan’s Tools CSS Minifier: http://bit.ly/dans-css Dan’s Tools JS Minifier: http://bit.ly/dans-js @ferkungamaboobo #JumpstartSEO
- 18. Server-Side Pagespeed Editing the .htaccess file to have the server help make your site faster @ferkungamaboobo #JumpstartSEO
- 22. Server-Side Pagespeed Let the server do the work .htaccess Code Snippet http://bit.ly/speed-htaccess @ferkungamaboobo #JumpstartSEO
- 23. Site Speed Minify Large Files Easiest and quickest way to speed up a site Use Server Compression and Caching Significantly helps cached site speed @ferkungamaboobo #JumpstartSEO
- 24. Speedometers Google PageSpeed Insights http://bit.ly/google-speedometer Pingdom http://bit.ly/pingdom-tool @ferkungamaboobo #JumpstartSEO
- 36. Remove Generator <?php remove_action( 'wp_head', 'wp_generator' ); ?> @ferkungamaboobo #JumpstartSEO
- 37. Windows Live Writer@ferkungamaboobo #JumpstartSEO
- 38. Remove WLW <?php remove_action( 'wp_head', 'wlwmanifest_link' ); ?> @ferkungamaboobo #JumpstartSEO
- 43. WordPress API Access@ferkungamaboobo #JumpstartSEO
- 44. Remove API Access <?php remove_action( 'wp_head','rest_output_link_wp_head'); remove_action( 'wp_head', 'wp_oembed_add_discovery_links'); remove_action( 'wp_head', 'wp_oembed_add_host_js'); remove_action( 'rest_api_init', 'wp_oembed_register_route'); add_filter( 'rewrite_rules_array', 'disable_embeds_rewrites'); ?> @ferkungamaboobo #JumpstartSEO
- 47. Cleaning the wp_head Only include what is needed. Add to functions.php: http://bit.ly/wordpress-head-cleaner @ferkungamaboobo #JumpstartSEO
- 49. XML Sitemaps Not a page on your site “Submit to search engines” @ferkungamaboobo #JumpstartSEO
- 50. Simple XML Sitemaps <?xml version="1.0" encoding="UTF-8"?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> <url> <loc>http://domain.com/</loc> </url> <url> <loc>http://domain.com/page/</loc> </url> </urlset> @ferkungamaboobo #JumpstartSEO
- 51. Complex XML Sitemaps@ferkungamaboobo #JumpstartSEO
- 52. Complex XML Sitemaps@ferkungamaboobo #JumpstartSEO
- 53. Default Robots.txt User-agent: * Disallow: /wp-admin/ Allow: /wp-admin/admin-ajax.php @ferkungamaboobo #JumpstartSEO
- 54. Better Robots.txt Sitemap: http://www.example.com/sitemap.xml User-agent: * Disallow: /wp-admin/ Disallow: /something-else-you-want-to-hide/ Allow: /wp-admin/admin-ajax.php @ferkungamaboobo #JumpstartSEO
- 55. Sitemaps & Robots Sitemaps http://www.sitemaps.org/protocol.html Robots http://www.robotstxt.org/robotstxt.html @ferkungamaboobo #JumpstartSEO
- 56. Toothpaste for Dinner #JumpstartSEO
- 57. Keyword Metadata Not “meta keywords tags” Only two important SEO tags: <title> <h1> @ferkungamaboobo #JumpstartSEO
- 58. No Plugins Needed@ferkungamaboobo #JumpstartSEO
- 59. Keyword Metadata <title><?php $seo_title = get_post_meta( $post->ID, 'focus_kw', true ); @ferkungamaboobo #JumpstartSEO
- 60. Keyword Metadata if(!empty($seo_title)){ echo $seo_title; } else{ wp_title(); } ?></title> @ferkungamaboobo #JumpstartSEO
- 61. Social Metadata Can fuel anything you want. http://bit.ly/wordpress-metadata @ferkungamaboobo #JumpstartSEO
- 63. Summary Make our files smaller Help our server help you Tell crawlers where to and not to go Set up your important words simply @ferkungamaboobo #JumpstartSEO
Editor's Notes
- Thank you all for coming. I’m Douglas Thomas, and I’ve run whole-funnel marketing campaigns on Wordpress and other CMSes for the past 5 years. Today, we’re going to talk about “WordPress Code Snippets to Jump-Start Your On-Site SEO.”
- That’s a long title, So let’s break it down, starting at the end.
- SEO is a set of tactics to increase your ranking on search engines. For modern search engines, it’s a three-legged stool: The first leg is Machine Learning, like Google’s Rankbrain or Bing’s Cortana. Unfortunately for us, even the engineers who work on these projects consider them largely a black-box. The second is External links, which are often difficult to create by ourselves, especially if we’re running a small and simple site. But the third...
- … On-Site SEO, is something that we can easily change. By changing the words that we use on our sites and the way that you show those words to the robots reading your code, you make it easier for search engine crawlers to figure out what your page is about. This helps machine learning systems categorize the content that Mallory, Gregory, and Luca helped us create -- and Anthony helped us organize -- earlier today. Because our content and code are efficient, It also makes sure that people coming to our site can get answers to their questions quickly and easily, so they’ll want to share your site with others, creating those hard-to-come-by links for us. But we’re all busy…
- … so we’re going to jump-start our on-site SEO to make a measureable change today. But how?
- With WordPress Code Snippets.
- We’re going to use small, easy-to-use, easy-to-change code snippets that we can copy and paste into our WordPress site. Now, for those of you who might be a little uncomfortable in code, code isn’t scary -- the worst that happens is you hit undo and try again. To keep us focused, our code is going to follow one guiding principle:
- Only include what is needed. It’s a basic tenet, and those who watched Blake’s talk saw how to apply this tenet to their themes. We’re going to apply it to the parts of the site we can easily control: the theme, the server, and the content.
- To start, let’s focus on page speed, a fundamental part of “technical” SEO and Conversion Rate Optimization. Page speed lets us make sure that we help visitors to our website - whether human or machine - get what they want done.
- The first step for speeding up our site is to make sure you’re only making your users download the smallest possible file. By downloading smaller files, the time to load a page is reduced. The easiest way to do this is by using minified JavaScript and CSS. Minifying is a simple compression that removes white spaces and comments, only including what is needed to make the file run. This turns code like CloudFlare’s version of jQuery, a 273 kilobyte behemoth, into...
- ...this: a svelte 86 kilobyte file,CloudFlare’s minified version of jQuery. Removing the whitespace and comments makes the file clock in at 68% smaller than the regular file. This significantly reduces the time a visitor or crawler would have to load before your site did its cool jQuery stuff. In the same way, CSS…
- Like the styles.css for the TwentySixteen theme - nearly 72 kilobytes - can have its comments and whitespace removed to …
- Save yourself another 16 kilobytes - 22% of the original file. So just by minifying two very common files, we’ve immediately have saved a person connecting on 3g at 400 kilobits - 50 kilobytes - per second three full seconds of time before your page loaded. So how do we do this? ----- 6 seconds of downloading to just 2.9 seconds.
- For a framework like jQuery that we’d pull from a common CDN anyway, we’ll just call the minified version, which typically is called “filename.min.js.”
- But for both CSS and JavaScript that I have access to, I use Dan’s Tools - they’re quick and easy to use. All you do is copy and paste your file into the field and hit “minify,” then copy and paste it back into your theme file. Before we move on, I want to mention two things:
- First, don’t forget to keep required comments, like the first comment in your WordPress theme’s styles.css, to make sure your theme works correctly or conveys important information. It’s OK for the theme to not be 100% perfectly minified.
- Secondly, it’s probably a good practice to keep a non-minified version of the files on your server if you’re going to be working on that file, just to avoid the step of having to unminify it every time. It’s also a good way to quickly check how much of a difference you’ve made.
- The second way we’re going to quickly make our site faster and more friendly to bots and users is to let the server do some magic. We’re going to do this by editing your .htaccess file - a way to easily edit server configuration. Because we’re playing with config files, an error might take down your site with a 500 error -- but that’s ok, just undo out and save and the site should be back up.
- So this is the default .htaccess file for WordPress. All we have to do is add two Code Snippets to this file to make our site even faster. The first...
- …. Compresses our site’s files even more than just minifying. “AddOutputFilterByType DEFLATE” uses server-size gzipping to compress files before they are sent. Just like minifying, this makes the files even smaller than before, and allows us to compress plaintext, html, and other files that we wouldn’t necessarily want to have to look at minified. It also minifies files that we might not want to or can’t change ourselves or are generated from other files. On a small site, this might not make a large difference, but larger sites -- especially ones where there are a lot of moving parts -- will benefit immensely.
- The second snippet sets up a cache for most of our files. While your browser will often cache many files, caching at the server level speeds up our site even more because it cuts out middlemen. This is especially useful for images which may not change, but are loaded multiple times on a site - like a large hero image on a blog post - since you can only optimize the filesize so much without it.
- So by letting the server do the work, we save ourselves some time optimizing every file, and it goes even farther than what we can do using brute force.
- So we sped up our site in two ways, by making the actual files smaller, then by letting the server compress and cache our site’s files before sending them out to the browser or bot.
- If we want to test what this has done for us, we can use two tools: Google’s PageSpeed Insights gives recommendations and gives us an easy-to-understand grade. However, because it’s an automated tool, we might not be able to do all the things it tells you to, and it’s really unnecessary to try to score 100%. Pingdom comes at it from the other way - it gives the actual time their tool took to render your page, and gives a nice graph if we’re looking to see what kind of real-world improvements we’ve made.
- So we’ve talked about how to make our files faster. But what’s better than small and fast files? No files. WordPress, in their good-natured attempt to support a very wide range of users, adds a good bit of stuff to a typical site’s <head> tag that for many sites is not worth keeping.
- More than just filesize, including these links creates a lot of doors for a search engine crawler to go down for every page. At worst - though WordPress does a good job of solving this - the crawler can get lost. But every URL we link to spreads out the value of PageRank flowing through our site. To only include what is needed, we’re going to remove some of that code.
- We can do this using an FTP program, but using the backend works just as well. Under Appearance, click “Editor.”
- This brings us to the file editor. Almost every theme has a functions.php. Under the template file, click “Theme Functions.” We’re going to start ripping things out of various webhooks to only include what is needed for our site to run.
- I do want to say: we could do this by installing a plugin, but why include something that isn’t needed? Plugins tend to call a bunch of extra functions, create database tables that don’t need to be there, and add things to existing databases that we aren’t going to use. Basically, let’s follow one of my favorite emoji’s instructions: “Do Not Litter.”
- Oh, actually, speaking of emoji: At the start of the default wp_head, there is something that most sites emphatically do not need: Emoji Support. There’s about two kilobytes of data in the header that just takes up space, and it calls other files that just complicate our site, all to show something that almost every WordPress site just will never use. In the spirit of only including what is needed, let’s clear it out.
- All of these functions use “remove_action” which takes two or three arguments: The name of the hook, The action to remove And sometimes the priority in the remove action queue. These first two functions remove the javascript files we just saw in the last slide. We’re removing the print_emoji_detection_script action from the wp_head and admin_print_scripts hooks. But there’s more…
- Then we remove the print_emoji_styles action from the wp_print_styles and admin_print_styles hooks to remove the inline stylesheet.
- So that turns all of this code into nothing and moves up the next parts that we’ll want to go through.
- What’s left in the wp_head are eight lines of code, seven of which have a good chance of not being needed on a typical website.
- The first thing to clear out is the meta=”generator” tag. While it’s small and unobtrusive, there’s no reason to include it. I also know that it’s probably the easiest way for an agency to see what your site runs on, which means more cold-calls and emails.
- Just like before, we’re going to use “remove_action” to take it out.
- The next thing to remove is the Windows Live Writer manifest. The software is an end-of-life product and most people aren’t using it. So if you’re not using it, it doesn’t need to be included. So we’re going to take it out, in the same simple way as before.
- Again, we use “remove_action” to take it out.
- The final easy decision is to remove the shortlink. On pages that aren’t a list of posts or your front page, it shows the non-permalink version of your URL - like ?p= numbernumbernumber. Because that just redirects to your page, it’s a little confusing to crawlers and is just a link you don’t need.
- For this one, we’ll have to also take out the redirect. This makes sure that the link isn’t added through other functions.
- Now it gets a little more difficult to say “always remove this,” but if it’s not needed for your site, you should remove it. The first optional one is the XML-RPC link, which is used for some plugins like Jetpack to make their plugin work. But if we’re not using it, it’ll throw unnecessary errors, especially in older crawlers. It’s also not used by many things outside of WordPress, so we can safely remove it if we’re not using it.
- Again, it’s really simple. Just removing one action from the wp_head. The last one...
- Is the WordPress API. Now, this is something that - again - might be used by the plugins on our site. Personally, I’m very bare bones and don’t use it. To boot, there are three links in the wp_head and one script in the wp_footer. Since we don’t need them, let’s not not include them.
- This is easily the most complex set of functions. The first three are the same as before, removing links in the wp_head. Then, we stop registering the route for the oEmbed API. Finally, we add a filter
- So just as a reminder this is what we started with.
- And this is what we end up with. Now, you’ll see that I have one thing left -- the link rel=canonical. This is a key part of on-site SEO. What that does is tell search engines that this is the “canonical” -- the “correct” URL for this content. While WordPress is usually really great at redirecting, you might use parameters that shouldn’t be in the search engine index. So this canonical link
- So all of this is to fulfill our main tenet: Only include what is needed. And to make it easier, especially as we’re looking for easy snippets, you can just take the head cleaner here and paste it into your functions.php
- So let’s take a deep breath. We just did a LOT for our users. Let’s give in to our robot overlords for a minute. We’re done doing things for humans right now. The next two things are really deep topics on their own, but bear mentioning:
- XML Sitemaps are probably the deepest thing you can do on your site that’s just for robots. It is literally a “site map” - it’s as much information as we give a search engine about what’s on your site before the crawlers hit your site. This generally lives in the domain root -
- At it’s simplest, you just need to make a file called “sitemap.xml” that has four elements: A urlset - this says “here are all the urls” An XML namespace - this says “this is what to consider this data” A URL declaration - in the simple XML sitemap, this is just a placeholder, but remember what it is for later A location - this is our actual URL in the map And that’s all you really need. There are a bunch of ways to generate these, and we can talk about that after the talk, but if you have a small site, doing it by hand isn’t awful.
- But where we at our agency gets real benefits out of sitemaps is by going deep on XML sitemaps. Instead of just looking at urls, we look at locations, images, videos, and header links like language localization. And here’s a ton of namespaces -- I personally don’t know of anything that will do ALL of this for you, but the ROI on getting all of these things indexed in Google and Bing quickly outweighs the tedium and time of manually marking it up.
- This isn’t all of the different components we looked at in the last slide, but here’s a few examples of what you can add. We have our url, which now wraps everything for that location tag. We then have our “rel=alternate, hreflang” which is deeper than we’re going to get into, but it’s for localization of language-based content. Finally, we have an image with a geolocation and title. The specifics aren’t important, but each of these directly gives search engines information about your pages. But we missed a step… how does a search engine know where to find your sitemap?
- We can talk directly to Googlebot and Bingbot and every other bot out there. Wordpress builds a basic robots.txt for you, and that will let us see the elements: You can set a User-agent, which is the bot that you’re trying to talk to. The asterisk means that it’ll match everything. You then tell that bot to Disallow - not to enter - a directory. And then you can tell that bot that they’re allowed to enter a given file in that directory.
- But we just spent all that time with our sitemap, so let’s tell The first line tells the robot to look at that sitemap. It’s not the same as submitting the sitemap to the search engines, but it’ll show our sitemap to the robots, letting them crawl the links inside.
- So this is the bare minimum for working with sitemaps and robots.txt -- these two links will tell us everything we’d ever want to know about the files and all the snippets we might want to use with them.
- So we’ve spent a lot pf time talking about esoteric topics like pagespeed and how to make robots do our bidding. But the last part of on-site SEO is keywords. We’ve heard a bit about how to find and choose them today, but what’s the best way to display them using WordPress?
- To start, let’s define what we’re doing. It’s definitely not the “meta keywords tag” which is ignored by modern search engines. There are really two HTML tags that directly matter for SEO: the <title> tag, which is what typically shows in the search engine result page, and the <h1> which shows on the page itself.
- So instead of using a plugin that has a bunch of different features, we’ll just set up a custom field
- Then we move to our theme -- and this snippet is what’s going to do all the work that most people use plugins for. We make a variable, getting the custom meta of “focus_kw” and set it to be able to be echoed.
- And then, if it’s not empty, echo it. If it is empty, just show the regular wp_title.
- The beauty of this is that it’s infinitely reusable. You can reuse the focus_kw meta, use a different name for a field like a meta description or opengraph
- Ok so at this point, you probably feeling like this:
- So let’s go over everything we ran through: 1 - Make our files smaller using minify and avoiding loading them completely, 2 - Help our server help us by compressing and caching files 3 - Use sitemap.xml and robots.txt to simply tell crawlers where to and not to go 4 - Set up keywords using native wordpress without plugins to stay simple and avoid database bloat