Blogging + Barking

WordPress 5.4 Update: What You Need To Know

The nest core update for WordPress is 5.4 and is scheduled to hit your website March 31, 2020. This post will help you understand what you need to know and address any changes you need to make!

Below we are outlining all of the items in the update that our clients would need to know. There are other updates specific to developers which we are not including. If you want to see the full update details you can read more on WordPress.org.

Contents

Improvements To The Block Editor

There were many updates made to the block editor to make updates for some bugs and performance issues.

These updates are showing reductions in loading time of 14% and a 51% reduction in time-to-type for long posts.

Introduction Of New Blocks

Social Media Icons

Now you can easily add social follow icons anywhere on your website – making this block perfect for authors and bio areas.

The block comes with three styles for you to choose from which include the default, logos only and then a pill shape which is shown below. There are a lot of social profiles to choose from so you can customize which you want to use.

You can see more about this on WordPress here.

Buttons Block

In the past the button block only allowed you to add one button to your content, the new button block now offers you the option to show multiple buttons.

Below is what the new button block will look like. You can see we added 3 new blocks, each with a different color and text. You can customize each button in the styles area which offers 2 preset button styles and limitless color options.

You can even use gradient colors and add a radius to your buttons.

Fullscreen Mode

This is a change that may affect how you view your content area. The editor starting in WordPress 5.4 will open in full-screen mode by default now. It was always an option but now they changed it to be default.

Full screen mode essentially removes the left WordPress navigation and all distracting elements.

You can easily change it back to another screen type in the Tools & Options area in the area show below but there are a lot of people who are not happy with this part of the update. There is a fix in there to deactivate it but there are a few who noted it is not an efficient option.

How to change editor options in WordPress 5.4

Welcome Guide

Once you update to WordPress 5.4 you will be able to view their newly included Welcome slideshow. This is an overview of how to use the block editor and shows some simple screenshots to help you use the blocks better.

If you want to see this slideshow at some other time you can easily access it by going to the Tools & Options menu and select the Welcome Guide link as shown in the image below.

Inline Text Color Options

With WordPress 5.4 you can easily select some text within a paragraph block and change the text color. In the past you would have to use the HTML editor to change the text – but now there is a simple Text Color option that makes is a breeze.

Below you can see the purple highlight is the text we highlighted, then when the arrow down option is selected you can see the Text Color option.

Sample tet color option in paragraph block

Once you click the Text Color link you will get a color picker which will allow you to change the color of just your highlighted text.

Latest Posts Block

This block in the past was kind of useless as it had limited options. Unless you just wanted a list of posts it was not very useful. But now you can customize your posts by adding featured images.

WordPress Reusable Blocks Tutorial

One of our favorite things in Gutenberg has been the Reusable Block option and we are going to show you why you need them and how you can use and manage them!

Contents

What Is A WordPress Reusable Block?

Imagine being able to share content on multiple posts and change the content on all those posts by editing that content in just one location!

That is what the reusable block functionality in WordPress does – it allows you to easily add a block of whatever content you want – any where you want it. Then you can just go to one place in your admin area to edit that content and it will change all instances of the block.

Some common uses for these blocks include:

Affiliate or ad banners and promotions. For example in every cat post you do you can promote a specific cat product/service
Subscribe block that is targeted to your post categories. So every keto category post can have a unique subscribe block inserted to target a keto audience
Call to action forms
Custom author boxes
Call to action to promote related pages or posts
Donate form for nonprofits

Seriously, the options are endless for how you can use these!

Creating Reusable Blocks In WordPress

Creating a reusable block is super easy and there are 2 ways you can create them:

1. Add them directly from the post you are working in which is the most common way
2. Go to the reusable blocks area and add them there

We will cover both options below.

Adding A New Reusable Block In A Post

Once you create a new block within your post that you know you will want to use in other posts it is easy to add as a reusable block with the simple steps below.

Once you create a block you want to save as a reusable block you will click on the 3 vertical dots in the block editor and in the dropdown you will see Add To Reusable Blocks as shown in the image below.

Click on the Add To Reusable Block option and then you will be presented a field that looks like the one below. This is where you enter the Title/Name of your block! We highly recommend you make it super descriptive so you can easily know what it is!

TIP: By adding descriptors first you can keep you blocks organized. Example all ad blocks can start with AD or if it is a form of some sort you can start with FORM. This has helped me tremendously on sites that have a lot of reusable blocks going on!

Below you can see a reusable button we created with the identifier of BUTTON – followed by what the button is for.

Accessing WordPress Reusable Blocks Area

The reusable blocks area is where all of the blocks are stored and is where you can edit existing or add additional blocks.

1. If you are in a page or post click the add new block icon to add a new block. Search for reusable blocks as shown in the image below then you will see the Manage All Reusable Blocks link in the lower right – click that link!

2. Click the 3 vertical dots in the upper right corner of your post or page that are located to the right of the UPDATE button and select the Manage All Reusable Blocks option.

Images are below for both options.

Once you do either of the options above you will be taken to a page that looks like the one below. Basically it is a list of your reusable blocks that you have available.

Adding A New Block In The Blocks Area

Once you are in the blocks area you will see the ADD NEW button at the top of the page – click on that and you will see a screen that resembles any other post or page you are editing.

The block editor is just like any other page or post editor so you simply add your blocks like you would in a regular post and then click publish to save it.

Editing Reusable Blocks

The beautiful thing about reusable blocks is that you can edit a block and have it change in EVERY place you have the block added.

This makes it absolutely awesome for coupon type affiliate ads! When a vendor updates their coupon codes and dates – you can easily change it in your block and every post it is on will be updated!

To edit a block you will go to the list above and simple click the block you want to edit. Then you will be taken to a screen that looks like any other page or post for you to edit.

Converting Reusable Blocks To Regular Blocks

Another fantastic feature is the ability to change a reusable block to a regular block.

As an example if you have a mailing list signup block and on one specific post you want to change the call to action text – you can simply add the reusable block to your post and then use the change to regular block option to be able to edit it for just that post!

Just click the 3 vertical dots and look for the Convert to Regular Block option.

Once you click that – then edit your block as needed and only this one block will be changed!

Convert to regular block from reusable block

Exporting Reusable Blocks

Another cool option is the ability to easily export your reusable blocks to use on other websites you may have.

When you are in the reusable block area just click the Export as JSON link which will download the block to your computer.

Importing Reusable Blocks

Once you have exported your blocks – now you can easily import them by going to the reusable blocks area and clicking the Import From JSON button and you can upload your files that you downloaded.

Reusable Block Examples

Below are a few reusable blocks we have created recently for Keep America Beautiful. These blocks can easily be inserted anywhere on their website that they want. Both are custom built blocks that were then saved as reusable blocks.

Donation Block

The donation block features an image and intro text – but what really makes it awesome is that hovering over each donation amount gives the donor insight into the impact their donation will make.

Affiliate Block

KAB affiliates are the groups around the country that make amazing things happen to keep our environment clean. KAB needed a search box to allow a website visitor to find an affiliate group nearest to them and this block does just that. By using the reusable block capabilities for this box – they can insert it as a call to action into relevant post or new landing pages easily.

The Video

WordPress Security: 10+ Great Tips To Protect Your Site

Why is WordPress such a target for hackers? Because it is popular. No content management system is exempt from being hacked, but because WordPress is so incredibly popular and because so many do not do everything they can to keep themselves protected, they are an easy target for spammers and hackers.

Studies show that as many as 170,000 WordPress websites were hacked in 2012! The break down of how these hacks happened as noted on WP White Security is as follows:

41% of hacked WordPress were hacked through a security vulnerability on their hosting platform
29% were hacked via a security issue in the WordPress Theme they were using
22% were hacked via a security issue in the WordPress Plugins they were using
8% were hacked because they had a weak password.

The best way to prevent a hack from happening to you? BE AWARE & PROACTIVE! A website is part of your business and should be something that is monitored often to ensure it is running well and is secure.

The items below are steps you can take to ensure your WordPress website is as secure it can be.

Contents

Keep Core WordPress Updated

You always want to make sure you have applied all updates to WordPress as they come available. By not keeping your website updated you are putting your website at risk since many updates are done just to keep your website secure.

Before you do an update, make sure you run a full backup of your website.

If you see this message when you login to your WordPress – take a few minutes to make sure you have a recent backup and then you can update your WordPress to the latest version.

Also, consider following the WordPress blog which will show you the latest updates and releases: WordPress News

Schedule WordPress Backups

Make sure you always have a backup of your website! If your WordPress security is at risk or if you have in fact been hacked this will allow you to easily restore your website to a previous version – then you can take some of the steps in this post to have it not happen again!

Here are a few WordPress backup plugins that we personally like.

Updraft Plus is the one we primarily use on our clients websites. Single click backup of files and database that you can have upload to so many different places!
WordPress Backup To DropBox syncs with Dropbox so you can keep a copy off of your server for the ultimate security.
Backup WordPress allows you to upload to your server, Dropbox, Google Drive and more.
Finally we have VaultPress which does have a small subscription fee, but it is worth it.

Important Backup Tip

Make sure you store a backup on a 3rd party website like Dropbox or Google Drive!

Update Your Plugins

WordPress plugins also need to be updated – an outdated plugin can leave a lot of ways for hackers to get in!

Also use caution when downloading plugins, since plugins are open-source and can be created by anyone for use – you have to use caution and be sure you are downloading ones that are free from malicious code. Make sure you are doing your research on plugins before installing any on your website!

Look at the reviews, learn about the author and be sure to see how often they are updating it. Some extensions have not been updated in a long time – that is a signal that issues could arise. By reading the reviews and looking at the support questions you can see the issues that the plugin may have – and make better choices in the plugins that you choose to use.

Before downloading any plugin, we do recommend doing a quick check to make sure there are no vulnerabilities!

Change Your Username & Password

If you are still logging in to your WordPress admin with the username of “admin” – you are putting yourself at risk. This is the FIRST thing you should change when you launch your WordPress website – or your developer should have changed it for you before handing your site over to you.

If you need to change your username – here are the simple steps:

a) Create a NEW user and make sure they are set to have administrative access.
b) Make sure your new username is unique and your password includes a variety of numbers and letters in both capital and lowercase.
c) Logout from the old admin user once the new user is created
d) Login with the new user login you just created
e) Go to users and DELETE the old admin user name – it will ask you where you want to transfer all posts, make sure you choose the NEW username you just created

By removing the “admin” username you now have a much more secure website. If you need help choosing a really secure password, here is a great tool that can help: Password Generator

Choose Secure Hosting

Hosting is one of the top reasons for hacking issues – as noted above reports show that 41% of hacking attempts were caused at the host level. If you are on a cheap host or one that is not doing everything it can to prevent hack attempts then you are opening yourself up to allow the hackers in. If you are hacked at the host level, there is nothing you can do to prevent it and you are at the mercy of the host to fix it!

It is important to invest in a host that will be a step ahead of the hackers, and while no host is immune to hackers completely – some do a lot more than others to keep them at bay.

Here are some things to consider when signing on for hosting.

a) Choose a host that provides free backup recovery – although you should have your own as well, it is a great addition so that you never loose your data
b) Ask if the host offers security monitoring services that monitor for malware – do a search for “hosts offering free daily malware scanning”
c) If you are considering a host do your research! Do searches for things like “my site was hacked on whatever host you are considering“
d) Review the recommended WordPress hosting list at WordPress Hosting Recommendations

Be sure to do your research! If you are doing research about hosts, be sure to find websites that give actual insight via comments and dialogue – there are many web pages that are “website hosting review” sites, but those are just affiliate websites trying to make money – do not use those to make such an important decision!

WP-Config.php File

If hackers can get access to your wp-config.php file – they can wreak havoc!

This is a file in your root directory that contains all the data and details about the configuration of your blog, by securing your website to make sure no one has access to this file it is a major way to prevent a hack.

By adding the following code to your .htaccess file – you can prevent anyone from accessing the wp-config.php file. This will also block the website owner from accessing the file as well – so if for some reason you need to edit this file in the future, you will need to remove this code from the .htaccess.

# Deny access to wp-config.php file
<files wp-config.php>
order allow,deny
deny from all
</files>

Personal Computer

Yes, what is going on on your own personal computer can impact what happens on your website. Imagine you have malware on your computer that is tracking your every move (called a keystroke logger). Then the hackers can see every keystroke and gain access to your WordPress files just from this malware.

No matter how secure you may make your WordPress website, if you have malware on your computer it is all in vain. Make sure your computer browsers are up to date, you run frequent malware scans and keep your operating system updated to avoid computer malware issues that can cause issues with your website.

Use A WordPress Security Plugin

There are a few great plugins that you should definitely install that will do a great job of monitoring your website for a variety issues from malware to file integrity to activity auditing.

Here are a few to consider, each have their own advantages and some offer a free and premium version.

Sucuri Security
Wordfence
All In One WP Security & Firewall

We use Wordfence on our website and here is a screen capture of a recent scan that we have done on 2 Dogs Design:

WordFence Security Scan To Prevent Hack Attempts

You can see that is found an issue in the old themes, plugins and core files section. When we scroll down we can see exactly what plugin has the issue and take action to fix it. In this case it was our Shareaholic plugin – which needed to be updated. But this is a great way to see at a glance where you may have vulnerabilities.

Database Prefix

By default your WordPress database will typical be wp_ and since that is the default, every hacker in the world knows it too and will use it to their advantage to possibly inject malicious code into your database files.

We highly encourage you to rename your prefix of your database to something custom that the hackers cannot easily guess. If you are wanting to do this on a live website – we recommend you hire someone if you do not feel confident enough to handle it as it can break your website!

Examples can be “cattygirl2354_” or “jessupb6923_” – just a unique array of letters and numbers.

More experienced website owners, can do this via your SQL database with some custom commands, but for those that are less knowledgeable you may want to hire someone to help.

Be sure before you update your database prefix that you run a full backup of your website in case any issues arise! Then when you do the change and ensure everything on the site is working as it should you should run another backup that has the new database prefix.

Protect Your Admin Area From Unwanted Access

There are a couple of ways you can keep your admin area safe from unwanted access.

If you are a small website that only has a few people who need access to the admin and you have no need for visitors to access it, you can restrict access by applying the following code to your .htaccess file:

# Block access to wp-admin.
order deny,allow
allow from x.x.x.x

The allow from should be your IP address. If you are not sure what that is you can visit whatismyip.com where you can get your IP address.

You will need to add that line that starts with Allow for EACH person that needs access to your admin with their specific IP address.

As an alternative – if you have several people who require access or if you often rely on Wi-Fi networks that can change IP addresses often, you can use a plugin that will allow you to set limits on your login settings.

A couple of good ones that have several login related features to protect you are:

We use Wordfence on our website and for a short while had it set to email us when there were attempts at logins to our admin. We stopped that email notification quickly as it became overwhelming! Yes, there are really that many attempts every day to access your WordPress login. This is a simple step that can have great rewards.

Here is a sample of an email received that showed an attempt that someone was trying to make to access our admin login.

You can see in the email that they used an invalid username “admin” – which is why it is critical that you change that!

This email was sent from your website “” by the Wordfence plugin at Wednesday 17th of December 2014 at 11:45:14 AM

The Wordfence administrative URL for this site is: https://www.2dogsdesign.com/wp-admin/admin.php?page=Wordfence

A user with IP address 93.61.66.215 has been locked out from the signing in or using the password recovery form for the following reason: Used an invalid username ‘admin’ to try to sign in.

User IP: 93.61.66.215
User hostname: 93-61-66-215.ip145.fastwebnet.it

Final Thoughts

Protecting your WordPress website is important! You will hear people say “WordPress is not secure” but that is just not true. When you integrate many of the steps above you will have a super secure website and a stress free online business!

As always – if you have questions or concerns just leave a comment below!

Jill Caren

Jill Caren brings over 12 years of WordPress and SEO experience to help you improve and grow your website. She has spoken at several events on SEO and has been published in several top SEO publications. You can learn more about her here.

Best Nonprofit Websites To Inspire You!

Wondering what some of the top nonprofit websites look like?

Wondering what makes the best nonprofit website stand out from the rest?

We are going to tell you!

Check out our list of the best nonprofit websites that we love as a design agency – we also give you some insight into what elements we love that make them our favorite nonprofit websites! It is not just about the look and feel – it is more about the way it makes us feel, the user experience and how strong of an impact they can make to get me to take action or get involved with their organization.

We will update our best nonprofit websites list as we find new sites that we think are awesome!

Best Nonprofit Websites List!

NATIONAL TRUST FOR HISTORIC PRESERVATION

Visit NATIONAL TRUST FOR HISTORIC PRESERVATION

The simplicity of this website that allows us to focus on the historical treasures they are saving is what makes this site a part of our best nonprofit websites list. The menu is well organized and the overall subtle color scheme with the pop of orange in just the right places tells the user to come in and join them to help save more historic places.

The interior pages are clean and well organized with a touch of accents to make them a bit unique.

ROYAL CONSERVANCY

Visit ROYAL CONSERVANCY

Beautifully simplistic! The home page with its strong compelling imagery and clear font and call to actions, make this website a winner in our books. The menus are incredibly well done and easy to understand and the interior pages, although clean and content focused offer enough aesthetic to give the pages a unique and elegant look.

HUMANE RESCUE ALLIANCE

Visit HUMANE RESCUE ALLIANCE

The cuteness factor works on the Humane Rescue Alliance website. The intro video makes you smile, the icons in the impact area are adorable and we particularly love this whole area because it is one that we think many nonprofits forget the importance of. Letting visitors know right away about their impact is a great way to bring a sense of trust. The site is incredibly well organized and has a clean aesthetic so the focus can be on the animals. The only change we would make personally is to make the video less high – and include higher up on the page where they are located.

DOGS ON DEPLOYMENT

Visit DOGS ON DEPLOYMENT

There is so much to love about this nonprofit website – from what they do to the great content. As soon as you land on the page it is clear what they do – they have a search right at the forefront that is paramount to their offerings. They clearly note how funds are allocated, how much they have helped and profile dogs that are currently being helped. Everything you would want to know about a nonprofit – is right there in a clean and organized way. The interior pages are as well done as the home page – keeping the search readily available and all the content well organized and easy to read.

THAT’S NOT COOL

Visit THAT’S NOT COOL

Thatsnotcool.com is a fantastic website dedicated to helping people understand that dating abuse is never OK! The website offers a fantastic design for what we imagine is a younger demographic that is tech savvy. Large images with focused text clearly outlines what the site is about, what the user can expect and how they can get help if they are feeling “abused”. It is filled with useful statistics, a social hub and even an app. The website is well thought out, engaging and bright and bold which will appeal to the market they are trying to reach.

CYSTIC FIBROSIS FOUNDATION

Visit CYSTIC FIBROSIS FOUNDATION

We love the cleanliness of this foundation website, the ease of finding out what they do and how they can help those affected with Cystic Fibroses. The header is able to deliver a lot of information but is done in a way that is not overwhelming, the large home page image tells you right away what the team is up to and the news section overlaid on the image is a great way to keep visitors engaged!
The creative use of the varying colors for the call to actions really helps “pop” the various messages like their drug development work, advocacy and clinical trials. The mega menu is well done and easy to navigate to find information based on the level of CF a person is dealing with.

PLANT CHICAGO

Visit PLANT CHICAGO

ONE

Visit ONE

We love the uniqueness of the home page on this nonprofit website – great use of space to highlight the most important pieces of content that they want visitors to see right away. The clear subscribe box with text makes it clear what readers are signing up to do – “fight poverty”. The interior pages are kept simple and basic – and it works in helping deliver their messaging and content easily.

DIFFA

Visit DIFFA

Bold is what comes to mind with this design. Bold fonts, colors and call to actions round out why this website made our list. This nonprofit website has a clear tagline on the home page, great use of fonts to break up content areas and simple design elements to keep it aesthetically pleasing.

LAST MILE HEALTH

Visit LAST MILE HEALTH

reat imagery that tells a story, clean design style and elements coupled with great content that clearly defines their mission and how visitors can be involved round out why we think this website is great.

NOBEL WOMENS INITIATIVE

Visit NOBEL WOMENS INITIATIVE

Visit NOBEL WOMENS INITIATIVE

Unique home page that allows a lot of space for the organization to post content about upcoming events and actions they want visitors to take. Simple and clean design aesthetic with good typography to get their message out and the slide functionality for the blog posts and Take Action areas help them deliver their best content easily.

WORLD MONUMENTS FUND

Visit WORLD MONUMENTS FUND

Great introduction on the home page that makes it very clear what they do along with other content that clarifies how they do it and who they work with. We like the navigation menu – it brings attention to the 4 sections of the website they most want visitors to reach – but added an additional menu icon that offers a drop down to all pages of the website. (Although we sometimes find that visitors do not know that a “hamburger” menu on a full website is an option – so we shy away from that personally), but it is well done here.

The design is beautifully done and works well with the mission. The Trending Now section is a great way to promote different critical content.

ALLEY CAT ALLIES

Visit ALLEY CAT ALLIES

First, it is a website about cats – so what is not to love? But seriously this is a fantastic website that does a great job of breaking out the content areas on the home page. We particular love how you can get information tailored to who you are by simply clicking on a link. This is an exceptional example of “personalizing” a visitors experience. Well done navigation and great interior pages with strong call to actions in the sidebar make this website one of the best!

GALAPAGOS

Visit GALAPAGOS

Displaying strong images right on the home page pulls you in to the Galapagos Conservancy, who focuses on preserving the Galapagos Islands. We love the creative block elements on the home page that direct users to different areas of the website. They are will done with simplicity and clarity!The menus are creatively done while still offering a clear hierarchy for their content. The only thing we would recommend are interior pages with more beautiful imagery to give that same wow factor we get on the home page.

UPSTREAM

Visit UPSTREAM

Upstream looks for people that are doing great things in the world but are limited in the change they can make due to lack of resources. They then work with these world changers to make a bigger impact. This website may very well be a top pick for us.

It is creative – breaking out of the norm in terms of design, but still leaving it very easy to use and understand what they do. The warm colors and textures with powerful imagery offer a great storytelling aspect. We love the icons and how they can provide all the core information with so little text. Everything about this website is well done.

HABITAT FOR HUMANITY – FOX CITY

Visit HABITAT FOR HUMANITY – FOX CITY

Habitat for Humanity is about people – and the home page definitely does a great job of promoting that fact. Creative use of images as call to action blocks allow users easy access to the areas that the nonprofit wants to promote. The about section on the home page is well done with a strong image and creative opacity use.The donate button in the red pops on every page and the interior pages are clean and easy to read. Creative icon use also gives the website a nice touch while allowing users to understand what each item is about.

MEMPHIS ZOO

Visit MEMPHIS ZOO

A minimalistic design with well thought out accents make us love this site. The home page image and creative use of call to actions make it easy to find the content that visitors are most interested. We particularly love the use of the animal icons that allow visitors to easily see each unique section of the zoo.

TEAM RUBICON

Visit TEAM RUBICON

Team Rubicon focuses on not only helping veterans but offers disaster relief to those in need. The website does a great job of clarifying their mission helping visitors get a clear understanding of what the organization does. The clean design is well done with use of strong fonts and great imagery that tells the story of their successes. The mobile experience was extremely well thought out as well which makes this standout experience.

TO WRITE LOVE ON HER ARMS

Visit TO WRITE LOVE ON HER ARMS

Addiction, depression and suicide are all things that touch us personally somehow – and To Write Love On Her Arms provides support for those who are struggling with these issues. The website allows for story-telling, resources for help and more to help people see they are not alone.

The compelling Learn page is well thought out and tells the story of their beginnings – the whole website offers exceptional details to allow for users to find the help they need and the support they want. The only recommendation we would make on this site is to have the call to action items be a different color to help them pop a bit more!

THE GESUNDHEIT! INSTITUTE

Visit THE GESUNDHEIT! INSTITUTE

A fun and creative website that sets itself apart with its creative illustrative type elements. Personally we would like to see these used more in web design! Great use of color to showcase different topics and we really like the area on the home page for their Facebook, Twitter and blog posts – uniquely done and easy to read! From the creative fonts to the blocks that hold the information – the details make this not only a great looking website, but one that is easy to read and navigate.

LOVE146

Visit LOVE146

Strong imagery tells the story on this website and that is what nonprofits are about – storytelling. Easy to navigate, creative use of both photography and simple design elements keep the look unique – but yet clean and fresh. The navigation is clear and well organized and the interior pages are well done as well.

RAW FOUNDATION

Visit RAW FOUNDATION

We rarely see left sidebar navigations anymore – but this one has it and it is well done. The creative elements on this website are so well done and they do a good job of introducing their foundation mission and what visitors can do to learn more. The Problems and The Solutions blocks are well done and make usability first and foremost for getting engagement and the latest news and twitter updates are also eye catchers. We really love the unique look of this website – and coupled with clear call to actions it becomes a fast favorite. Our only concern on initial visit was the lack of a clear navigation – often icons are misunderstood – but their hover effect on the icons makes that a non issue!

SHARING AMERICA’S MARROW

Visit SHARING AMERICA’S MARROW

Simplicity at its best is why this one made it to our best nonprofit list! A beautiful web design with a home page that features an engaging video followed by pages that are clear and to the point about how they want a visitor to interact with the organization.

There is not a lot of “design” going on but we love that as it allows the user to focus on what matters – the content. The only dislike we have is the lack of a title or logo in the header to further brand who they are and what they do. But the clean footer menu with a clear focus on things like “get involved” are what we look for in a great charity website.

JUST ACTIONS

Visit JUST ACTIONS

We absolutely love the design aesthetic of this website. We find the imagery sucks us in and we particularly like how the “10 Just Actions” section is done with the slider effect on the home page and even on the actual page. Good use of white space and simple design elements that “guide” users makes this website stand out.

INTERPARES

Visit INTERPARES

This website we love because of the uniqueness of it in terms of the design. So many websites these days are filled with images and are full width websites, but this group took a different direction with creative illustrations and bold use of color and design in a fixed width layout that is still responsive and looks amazing on mobile too.

A well thought out home page and well designed interior pages make this website a top pick for us.

GLOBAL FUND FOR WOMEN

Visit GLOBAL FUND FOR WOMEN

Bold, bright, informative – these are all the things we see when we land on this website. This is one of our best nonprofit website picks because of the bold font usage and easy navigation. From promoting their work to helping visitors see how they can get involved – everything is well organized and easy to acces.

Strong images and great use of typography are what makes this site really stand-out in the nonprofit web design world. The imagery is incredibly powerful as well which definitely adds to the storytelling that we so highly recommend in organizations like this.

VINTAGE HOPE

While we noticed the website is down – we wanted to keep this one up to draw inspiration from. Because the aesthetic of this web design is so unique and may be something to consider for a nonprofit we felt it was worth keeping on the list!

A beautiful design that fits with the mission of renting china dinnerware with all proceeds going to help children in Malawi. A beautiful color scheme with imagery subtle in the background do a good job of story telling. The only change we would have recommended was being a little clearer at the top about what the mission is exactly – we had to scroll to the bottom to find it! We love the uniqueness of this one page website and it will work well for smaller nonprofit organizations.

Planning your nonprofit website.

When developing nonprofit websites there is a different mindset that needs to be taken. 2 Dogs Media primarily focuses on web design for nonprofits and organic seo services and have built hundreds of sites for all kinds of charity organizations over the years.

Creating the best nonprofit website for your organization may seem challenging, but with the right website design agency – it will be easier than you think.

One thing we do know for sure is that no two nonprofits are alike and it is important to have a web design agency that will work with you to understand your specific and unique needs so you can get the best nonprofit website for your supporters!

This will ensure your message is clear, your user experience is great, your site is easy to navigate – all resulting in having the best nonprofit website to help you gain supporters, donations and of course making an impact.

The best nonprofit websites usually have the following items!

Clear messaging – the best nonprofit websites make it easy for a visitor to know what they do and what mission statement is.
Design – is the web design aesthetic appealing to their specific demographic?
Are the fonts well used and complement each other? Do they draw the reader in with color treatments for call to actions?
Photo usage – does it align with the websites messaging and make a visitor “feel something”?
Is the website well done on mobile as well as desktop?
Is the navigation clear and direct making for a good user experience?
Does the organization have clear defined strategies for helping users learn how they can get involved with the charity?
Is there a strong focus on following the organization on their various social media outlets?
Are social sharing icons easy to find on important information?
Providing options for communication like newsletters and text updates should be at the top of list of features!
Is the contact information clear and easy to find?
Is the donation page amazing and designed for conversions? See some of the best donation page examples we could find and be inspired!

Although the visual elements are of course important – usability is key to top nonprofit websites and some organizations sacrifice that for more advanced design elements – and we do not recommend that! The best nonprofit websites feature web design that is clean and simple with bold call to actions – that is it!

With most nonprofit organizations having a wide array of demographics it is important to have a web presence that appeals to many different people and is as user friendly as possible. Nonprofit website design is a unique niche within the web design world – having the right partner to create a website for your organization can make all the difference to your success!

Wild Apricot did a great roundup of 22 features that every top nonprofit website has which is worth a look as well if you are still in the planning phases and want to be the next website added to our best nonprofit website list!

LOOKING FOR A NONPROFIT WEBSITE DESIGN AGENCY THAT CARES?

Well, you found us!

As WordPress web design professionals we take our non-profit clients web design needs seriously – and spend a lot of time analyzing trends, data and case studies to see what makes a website for a nonprofit successful. How we develop a website can directly affect the future of our client, so we understand how important it is to create a site that not only engages but converts on actions that they require to happen whether it be a newsletter sign-up, donation or volunteering!

If you are inspired by one of the designs here or looking for something unique – we can help!

Diib Review: Turning Data Into Dollars

I gave Diib a test drive to see how it works and if it really offers any value to a website owner.

This review is not sponsored in any way and I paid for a subscription to the program so I could test it out.

Price

A lot of bang for your buck and affordable for even small budgets.

Ease of Use

Simple setup and clear reporting make this tool a winner.

Usefulness

We do think that the tool offers insight that can help you grow your web presence!

Contents

What Is Diib?

Diib is a data platform that started back in 2012 that claims to tell people in plain English what they can do on their website to make it better. My one concern about them was that given how long they have been around I had not heard of them until I saw an ad on Facebook. It intrigued me enough to want to try it out.

The tool basically runs a scan of your website and offers a plan for growth based on your current status.

It also takes your data and gives you dollar values based on your data and a snapshot of where you compare within your industry.

Signing Up With Diib

I used my website charitypaws.com to test drive Diib and the sign up process was easy. One you signup you will need to answer a few questions and also sync your data channels like Facebook and Google Analytics to get the data.

Site Dashboard

A well laid out page that focuses on an overview of your website. Jumping in you can easily see how your website is doing and if you are improving or failing in certain areas.

The Daily Health Score shows you how well you are doing based on the Diib predictions. You can see we are at 94% which means we have met 94% of their predictions.

Now, the one thing I am not clear on at all is the Annual Growth Opportunities which is supposed to be a prediction of how much money my site may make in its current state.

When I signed up I noted I made money from ad revenue and only put in that I was currently making $50 per month in revenue. So clearly that number is excessive – so I would not put too much stock in that number.

Objectives

This area focuses on specific areas you can improve in and what the value of that improvement might be.

It breaks down how you can improve your growth, authority, visitor experience and more.

Alerts

The alerts section is really cool as it gives you an overview of a variety of items that are impacting your website.

One of the things I see that I love is that it will tell you when you have broken backlinks to your own site – which can really impact SEO. There was an alert in my list – then I click on it and it takes me to a page like the one shown below.

I can see the broken backlinks so I can easily fix them by either asking the person linking to it to change the link – or setting up a redirect.

Click through further will give you tips for fixing them too. Well done Diib!

Other alerts include growth in Facebook and Twitter, analytics updates and so much more. This is one of the best parts of the tool in our opinion – especially for beginners.

SEO Reporting

The SEO reporting tool offers a look at your keywords, backlinks and search engine indexing. We will look at teach of these in a bit more depth. While this will not replace tools like Ahrefs, SEMRush or even RankTracker – it does give a great overview for a great price.

Keywords

The total number of keywords it showed my website ranking for was 2,143. Ahrefs has me at about 2,780 – and while this seems way off, it is actually pretty good! There is no tool that gives you 100% accurate data and I am impressed that Diib showed me as many as it does.

Also found some keywords in Diib that I rank for that were not present in Ahrefs – which is why we always recommend multiple tools if you want the most accurate data!

You can slo enter your competitors to see what keywords they rank for to find missed opportunities!

Gotta give a shout out to how fast it pulled this data too!

Backlinks

It will show you the number of backlinks you have to your website along with the source of the link, anchor text and domain authority of the linking page.

The number of backlinks it showed was in line with the other tools we use to find backlinks so it is really giving us a great overview at an affordable price.

It showed 2,839 backlinks while Ahrefs shows 2,526 – we did not evaluate them side by side – but like that it was able to pull so many.

The tool also allows you to input competitors to pull their backlinks as well so you can try and get links from the places your competitor does.

Search Engine Indexing

This is just a good look at whether you have pages being blocked for the search engines. Definitely helpful in finding pages that may be blocked that you do not want blocked.

Social Analytics Reporting

Right now Diib only works with your Facebook page and provides all the data from your Facebook insights and puts into an easy to read and understand format to help you improve your Facebook performance.

We really like the simplicity of this report – if you have ever looked at Facebook Insights, it can be quite overwhelming. This report really gives me an easy to read analysis of my page over either 7, 14 or 30 days in great graphs and charts that are easy to understand.

The Social Analytics report features:

Performance overview – see your fan reach, growth, click thru rate and sentiment.
Post performance – see your posts list, the date and reach and engagement to get a better understand of what your fans react to.
Performance by post type – view data by type of post (share, photo, video etc) and the reach, clicks, and reactions you received.
Best time to post – shows you when you should be posting based on the activity of your page.
Demographic of your fans – offers great insight into the age and sex of your fans.
Net likes – gives you an overview of how many new likes or unlikes your page has received.
Total reach – shows a daily look at how far your reach is on any given day.
Video Views – shows how many people saw a video you shared.
Timeline for page fans – gives an easy to understand look at how your fan growth is going.

Can you find all this data in Facebook for free? Absolutely.

But for me – this is so much more useful and easy to read.

Take A Walk Through Diib

The Emails

You will get a weekly email with a snapshot of how well your website is doing and they also send other emails if there is something significant that has happened.

We have seen some mentions of emails being received after a Google update letting a website owner know that a drop in rank or traffic has happened that coincides with that update.

That is a good thing to have!

Diib Pricing

Diib offers a free subscription which of course has limited access and their full access Pro subscription is $29.99 a month.

When I signed up for the limited access plan I did get an email letting me know I received 3 days of Pro access to really test it out.

I received another email a week or so later offering me a month at a discounted rate of $19.99 so I did take advantage of that as well so I could really test it out to create this review.

Have You Tried Diib?

While we do think this is a service that can help less experienced website owners and those that are looking for an affordable way to get some quick wins for their website – we are not convinced it is a good option for more experienced website marketers.

We would love to hear your thoughts on whether you tried Diib or have experience with it – good or bad.

Jill Caren

Header Tag Tutorial For SEO Success

Header tags are just ONE of over 200 ranking signals! These tips can give you an edge but will not directly improve your rank.

If you are here in the hopes of finding some kind of “magic trick” where improving your HTML header tag will catapult you to the top of the search engines – you might as well bounce off here.

There is no such magic.

If you are here in the hopes of learning why header tags are important and how this header element can help improve your overall ability to rank in conjunction with your other on page optimization techniques – then read on!

Read This Disclaimer First!

Your HTML header tag is NOT a major ranking factor.
Not every page needs H2-H6 tags – only use them if they make sense to help your READER.
There is no “right or wrong” with header tags – but there are “recommended practices” that can help you improve your rank if the rest of your onsite SEO is good.
If your header tags are awesome it won’t matter at all if you have a lot of other technical, speed or optimization issues.

I NEVER write my headers for the search engines – I write them for my readers. Actually, every post I write is for my readers – below is my methodology for post writing;

Readers: every page or post I write is with the reader usability in mind first and foremost – this includes content, headers, title and even internal links.
Accessibility: creating a good header structure can help the visually impaired better scan your content with a screen reader.
Search Engines: the last thing I care about when writing my content and headers.

You can have the BEST header structure possible and still not rank well.

Remember header tags are just one of hundreds of items that determine rank. It is a small piece of the puzzle – but getting them right is just one less thing you need to worry about later!

What Exactly Are Header Tags?

Header tags are used to define various areas of content within your page or post and are shown in the HTML. These tags are part of the body content and can be styled using CSS.

Below is the benefits these HTML tags have:

For the search engines – it helps them to better understand what your page is about.
For your readers – it helps them be able to scan your content easily to see what they can expect to find in the article.

Do Search Engines Care About H1-H6 Tags?

Yes, but they are not a major ranking factor and just changing a header tag will usually have minimal affect on rank. But as noted by John Mueller – they are used to better understand what your content is about.

QUOTE: “We do use H tags to understand the structure of the text on a page better” John Mueller, Google 2015

Giving your article a clear hierarchy is one of the best on-page optimization steps you can take as a good user experience is priceless.

What Do They Look Like?

Header tags are defined in the code using HTML (as you can see below on the left) and on the post or page will be reflected typically with larger or more defined fonts (as shown below on the right).

Most themes do have the H1 through H6 tags styled in the stylesheet to have the H1 as the largest font and then decrease in size in increments for each header tag. So your H1 may be 36px and your H2 may be 30px and H3 may be 24px and so on.

How it looks as code

<h1>Everything You Need To Know About Cats</h1>

<h2>The Physical Health Of A Cat</h2>

<h3>Veterinarian Visits</h3>

<h3>Grooming</h3>

<h2>The Mental Health Of A Cat</h2>

<h3>Training</h3>

<h3>Playtime </h3>

<h2>Cat Proof Your Home</h2>

How it might look on your site

Everything You Need To Know About Cats

The Physical Health Of A Cat

Veterinarian Visits
Grooming

The Mental Health Of A Cat

Training
Playtime

Cat Proof Your Home

When Should I Use Heading Tags?

H2-H6 tags should be used to break up your content areas only when they are needed! As an example – in this post our title is the H1, we use H2 tags to break out the sections and we are using just a few H3 tags to better define additional information that is directly related to the H2 it is under.

Think how your content would be addressed if it were a book.

H1 would be the title of the book
H2 would be the chapters of your book
H3 would be sub chapters of your book that go within a chapter
H4 may be an informational section within your H3 chapter

Shorter posts may not require them at all – longer posts should definitely have them. We most commonly use the H1, H2 and H3 – rarely have we used the H4-H6 tags.

How Many Tags Should Be On A Page?

This will vary based on the type of post or page you are creating – but there is no official right or wrong amount of header tags to use! As we say quite often – use what is needed to give your users a nice skimming experience – and see what your competitors who are ranking well are doing.

Can I Have Multiple H1 Tags?

Typically every page should only have just ONE H1 tag – and this is usually going to be the title of the page – and it should include your main keyword and be ENGAGING!

While there is some controversy over how many H1 tags you can have as noted in the video below where it is said that multiple H1 tags are OK – we like to ensure there is only one for accessibility reasons.

There is no value in having more and to keep your page or post structured well, one is all you need! After all, books do not have more than one title do they?

Remember Google is not the only search engine – and while they may be OK with multiple H1 tags – others recommend only one. If you have a page ranking that does have multiple H1 tags – just leave it alone!

H2 – H6 Headers

You can have as many of these as you NEED to make your article easy to read and understand – there is no limit or minimum.

Remember you DO NOT have to add these to your content if they do not warrant it.

If you are writing a personal post for example that does not serve a purpose to educate or inform a heading tag may not be needed.

If you do have multiple levels of heading tags they should be used in order – so if you have an H1 for your title – do not use an H3 to create your first “section” – make it an H2.

Then under the H2 you can create and H3 and so on. For accessibility and user experience it is better to keep them in the numerical order and have them nested underneath each other.

Should My Header Tags Have Keywords In them?

Again, while headers do not have a huge singular impact on SEO – the search engines do look at them to get context for your page. So using keywords/phrases and variations can help you.

Your H1 should include the main keyword/phrase you would like to rank for. This tag has the highest weight and should be highly relevant to your keyword.

For the H2-H6 headers keywords should only be added if it makes sense – and should be variations of the H1 keyword or phrase – not the same!

DO NOT stuff keywords for the sake of putting them in there as that can lead to over-optimization which is just as bad, if not worse than under-optimization.

When I create H2 tags for example I read it out loud – does it make sense to a user if that H2 makes it as a site link or part of a featured snippet?

Optimization Tip: See what the top ranking competitors are using for their header tags on a post! If they are using keyword variations – you should too, if they are not – then don’t. By looking at your competitors you can see what the search engines are rewarding and emulate the process. See more about this below.

The above tip is one I recently gave to a blogger that I completed a website audit for. She has a food blog – which is one of the most difficult niches in my opinion. She was struggling to grow her blog and wanted to see what she could improve.

While she did a lot of the suggestions from our audit – one of the areas she did improve on greatly were her header tags. While others were telling her to make sure she did not use keywords in them – I suggested she do – with the caveat she check what the competitors were doing.

She added header tags to pages that had none – some of her pages only had a H1 and then an H2 for her recipe card. On a few recipes I checked during the audit I noticed top ranking competitors had better header structure and gave her the suggestion to work on them.

I recommended she try:

H1 for the title
intro paragraph to entice the reader to learn more
H2 like “How To Make Recipe Name”
H3 for “Ingredients”
H3 for “Instructions”
Next H2 would be the recipe card title.

The results below are NOT just from rewriting her header tags – but are a part of the overall success of the audit.

Header Tags + TOC Can = Sitelinks

Header tags help the search engines understand the structure and content of the page – and if you are using them in a table of contents (TOC) they can really help you have more visibility in the search engines.

Take a look at a personal example below from our own website. This result is for the term “meta description example” and we rank #2 for that term – outranking some very competitive sites like Shopify and Search Engine Watch.

We acquired “sitelinks” for this post – those are the links below the meta description. Guess what those terms are? Yep, they are H2 tags.

Notice they all have the term “Meta Description” in them.

Imagine how those site links would look without the keyword in there – although I do not think we would even have those sitelinks without the keyword being in our H2.

But what if we had those H2 tags as:

“What is it”
“The Basics”
“Writing Tips”

Those would not be as engaging to a searcher would they?

So in a post where you have a TOC and hope to get sitelinks it makes sense to try and use keyword VARIATIONS in your H2 tags.

It is also great to see that I am the only result that has these sitelinks!

Now let’s take a brief look at the page itself to see how the content was broken out. I am using a table of contents which I do recommend if it makes sense – for example it would NOT make sense on a recipe post. But if you have a huge amount of content – you should have it.

H1 – Meta Description Examples & Writing Guide (my book title so to speak)
H2 – What Is A Meta Description (chapter)
H2 – Meta Description Basics (chapter)
H3 – Do I have to have a meta description? (sub-chapter)
H3 – Do meta descriptions affect my rank? (sub-chapter)
H3 – Will the search engines always use the description I write? (sub-chapter)
H2 – Meta Descriptions Gone Wrong (chapter)
H2 – Tips for Writing Meta Descriptions (chapter)
H3 – What Not to do with them (sub-chapter)
H3 – Simple tips to writing a great description(sub-chapter

This is good for the search engines because they can see the sensical way the content is being delivered and my readers can easily go to section that is most relevant to them and just bypass the ones that are not.

So as you can see a lot of my headers do have the word “meta descriptions” in them – but they should be to have them make sense to the READER. I did not write them this way for Google – but for my readers. <——- I cannot stress this part enough.

H2 Can = Featured Snippet

These are great for those “best of” posts – you do typically need an organic rank position on the first page to grab a featured snippet so if you do and want to steal the featured snippet, H2 tags can help.

When I type in “best pen holder” I get the featured snippet below. There hierarchy is very clean with just a H1 tag for the title and then an H2 tag for each of the items they are talking about that appear in the list.

Header tags can help get a featured image.

But I See Competitors Ranking With…

It upsets all of us to see people ranking with crappy websites, poorly written content or formatted horribly. But it happens.

Yes – you will see websites ranking multiple H1 tags.

Yes, you will see them ranking with no H2 tags – or a hierarchy that makes no sense at all.

Google is a machine – there is no rhyme or reason sometimes for why a page ranks well for a keyword. Just understand it is constantly evolving and the more buttoned up you are in ALL areas of optimization – the better chance you have of jumping in that spot when Google realizes the page is not good.

Also there are so many other factors to ranking – and header tags are a small part.

Do not repeat a keyword in multiple header tags – EVER
Each page should only have one H1
H2 should come after H1 – H3 should come after H2 etc.
Do not wrap sentences in header tags – it should just be a few words.

Stalk Your Competitors

One of the best ways to know what search engines like in terms of content for a keyword/phrase is easy – see what the top ranking pages are doing!

By understanding how your competitors are creating their content you can modify yours to be similar in format. If they are ranking well – in part it is because search engines can understand what the content is about.

There are a few awesome tools that will allow you to see how your top competitors are creating their pages to help guide you as you improve or create yours.

Tool 1: SEO Content Hero

URL: http://1.seocontenthero.com/tool/

Right now this is a free tool – and it is an awesome one!

Enter your main keyword that you want to rank for and click submit.

When the report is done you will get a XLS spreadsheet of data that will help you better understand what the top ranking competitors for that terms are doing. You can see related searches you can use in your post, the content count of each post and see their usage of the header tags on their ranking page.

Tool 2: SEO Ruler

URL: SEO Ruler Chrome Extension

This is a Chrome add-on that will scrape a page and show you all the important information for that page including headings, schema, meta description and more.

Below is how you will see the data when you click the ruler extension – but then you can select specific areas like headings to get more details about the exact headers they are using.

SEO Ruler chrome extension to find competitor heading tags.

Great HTML Header Tag Usage Example

Below is a great example of a post that this website owner recently did that we are so impressed with! A pretty awesome example (with a few minor tweaks needed) – of how to properly layout a post into categories and sub-categories with headings.

Big Dog Mom: Mastiff Puppy 101

Sample post: https://bigdogmom.com/raising-a-puppy/

She pretty much nailed her use of heading tags in this post! She has a great balance of using the keywords relevant to “mastiff puppy” and has the organizational structure of the post in perfect sync with the important aspects of owning a puppy.

Her H1 for the post is: Mastiff Puppy 101: Wild Puppy to Gentle Giant, Guaranteed!

Then the H2 tags are sub-categories like “Finding A Breeder”, “Puppy Socialization” – then below that there are H3 tags to further refine the details of each of those H2 sections.

Suggested Improvements:

1. We did find a few small issues like under Finding a Reputable Breeder – the title is a H2 – but then the sections underneath it like “Go To A Local Dog Show” – is in an H4 – when it should be a H3″. While changing this to a H3 may not have a direct affect on rank – it will be a best practice that can help you overall! You always want to keep your H1, H2 and H3 tags in order. You can hide them from the TOC if you want —
2. Recommend the URL be /raising-mastiff-puppy instead of /raising-a-puppy since it is so breed relevant

Testing Header Tag Changes

As with EVERYTHING SEO related – testing is key!

Try optimizing your header tags for a post today but be sure to track EVERY CHANGE YOU MAKE so you can revert back if your results are not good.

Read your post out load – look at it with one of the tools above or if you use Gutenberg there is a cool way to see all of your content laid out.

Simply click the little round i icon at the top of the post and you will see the hierarchy of your page. As you can see below I get a great outline of my post and all the header tags I am using. I can see a clear hierarchy of topics related to the main title.

You can now make your changes – resubmit the URL in Google Search Console and then wait a bit and see if you see any positive changes in rank – click thru’s – featured snippets and more!

View content outline Gutenberg to see your html header tag outline

Header Tag Summary

For those that hate reading and just want the bullet points – here you go! While we prefer you read and understand the how’s and why’s for the recommendations – we get it, you are busy!

Header tags are not a major ranking factor
No matter how great your header tags are – if you are not well optimized, fast or do not have quality backlinks the header tags will make little difference
H1 tags have more weight than H2-H6
Only one H1 tag should be used per page for best practices and accessibility
H1 tag should have the keyword or phrase you want to rank for
As many H2 – H6 tags can be used as needed to improve user experience
H2 tags can use variations of your H1 keyword to further refine the content for your readers but will not add a huge ranking bonus
H3-H6 not necessary to use keywords or phrases unless it really adds a benefit for your readers
A good H2-H6 hierarchy can help you grab featured snippets or sitelinks
If you have a lot of H2-H6 tags – we recommend using a TOC plugin
See how your top ranking competing pages are using header tags – and emulate

Jill Caren

WordPress Images: Everything You Need To Know

Serving well sized images is critical to a fast website and good user experience. This guide will give you everything you need to manage your images in WordPress!

This post is going to strictly focus on helping you resize your WordPress images and talk about the updates in some versions of WordPress that may affect how your images are sized or displayed.

There won’t be a lot of “why we do it this way” but just plain old “how we do it this way!“.

Contents

Finding Oversized Images

ScreamingFrog

The easiest way is to download ScreamingFrog and do a crawl of your website. ScreamingFrog is free for websites with less than 500 URL’s – if you have more than that you will need to purchase a license, or you can ask us to run a crawl for you for $50.

Once the crawl is complete you can then filter to view only images that are over 100KB so you can see your largest images and where they are located on your website. Below is a screenshot of how it looks.

Finding Oversized Images in WordPress Option 1

This is a much slower way – but free! You can click on your images one by one in the admin to see the File Size in the details box as shown below. (To do it this way we recommend you have your media gallery set to the GRID option located to the left of your media filters).

But doing it this way allows you to use the arrows to easily move back and forth – and you can click the EDIT IMAGE button below the image to do the resizing. You can see below that this image is 144kb and is 1200 by 433 pixels – if we are happy with it we can hit the arrow right and move on to the next.

Finding Oversized Images In WordPress Option 2

Alternately – if you feel comfortable adding some code to your functions.php file, you can add the code below which will show a column in the media area with the image sizes for you to see them a little easier. To see the image sizes you will need to use the LIST style media option instead of the grid format.

Once you add the code to your functions file you will see a column called FILE SIZE as shown in the image below. Then you can just scroll through your media pages to see which ones need to be resized.

add_filter( 'manage_media_columns', 'td_media_columns_filesize' );
/**
 * Filter the Media list table columns to add a File Size column.
 *
 * @param array $posts_columns Existing array of columns displayed in the Media list table.
 * @return array Amended array of columns to be displayed in the Media list table.
 */
function td_media_columns_filesize( $posts_columns ) {
	$posts_columns['filesize'] = __( 'File Size', 'text-domain' );
	return $posts_columns;
}
add_action( 'manage_media_custom_column', 'td_media_custom_column_filesize', 10, 2 );
/**
 * Display File Size custom column in the Media list table.
 *
 * @param string $column_name Name of the custom column.
 * @param int    $post_id Current Attachment ID.
 */
function td_media_custom_column_filesize( $column_name, $post_id ) {
	if ( 'filesize' !== $column_name ) {
		return;
	}
	$bytes = filesize( get_attached_file( $post_id ) );
	echo size_format( $bytes, 2 );
}
add_action( 'admin_print_styles-upload.php', 'td_filesize_column_filesize' );
/**
 * Adjust File Size column on Media Library page in WP admin
 */
function td_filesize_column_filesize() {
	echo
	'<style>
		.fixed .column-filesize {
			width: 10%;
		}
	</style>';
}

Resizing Images

Option 1: Resizing Images Within WordPress

Go to the MEDIA area in your WordPress admin
Hover over the image you want to edit and click the EDIT link
Click the EDIT IMAGE button under the image
Enter the maximum width or height in the Scale Image box (we typically suggest about 1200px as a max width – but this will vary based on your website needs)
Click Scale
Go to the page or post in WordPress admin that has the image
Replace the image on the page with the one you just resized.

You can even crop your images in this area if you want more control. Just click the crop tool, drag the lines to your crop area and hit the crop tool again. If it looks good hit save.

Option 2: Resize The Image Elsewhere And Re-upload

Click the link for the URL of Image in the spreadsheet to open the image in a browser
Save the image to your computer
Use Photoshop or an online tool like ResizeImage.net (instructions below) to resize it
Go to the page the image is on and find the image that is too large
Delete that image and replace it with your new image.

Using ResizeImage.net

This is our tool of choice that we use when we do not feel like firing up Photoshop.

https://resizeimage.net/

Here are the basics of how we use it to resize and optimize our image:

1. Upload your image using the Upload an Image button
2. If you need to – you can use the crop tool otherwise skip to 3
3. Rotate your image if it is needed otherwise skip to 4
4. In Resize Your Image in section 4 you will set your image size – we typically use 1200px as the width and then check the Keep Aspect Ratio box. You can also set a specific size if you prefer.
5. You probably won’t need this
6. Select JPG as the Output Image Format
7. Select Normal Compression then set image quality to about 75% or so (you can adjust based on the size of the image) –
8. Click RESIZE IMAGE
9. Now you should see the original image size and compressed/resized image so you can see the difference in size.

Below is a sample of an image I uploaded to ResizeImage.net – if you look at the bottom of the image you can see the original image was 2.6MB and after resizing and compressing with this tool it is just 41KB in size.

Resizing Images Summary

Just a few final thoughts on WordPress Image Resizing.

1. Shoot for under 100kb in size
2. Unless you have huge images on your website for artistic reasons (photographer, artist) – 1200px should be MORE than fine in most cases
3. Use JPGs – gif and png files are too large
4. After resizing you will need to change your images in your post or pages to show the newly resized image
5. When inserting images in a post or page choose an appropriate size! – do not use a large size then scale it down in the editor. When you insert an image block in Gutenberg – you will see image size options – use those!

How WordPress 5.3 Handles Images

Your existing WordPress images are NOT affected by this new feature.
It only impacts images that you will be uploading in the future.

If you are updated to the latest version of WordPress 5.3, below outlines exactly what happens when you upload an image. For this example we are using a huge image that came right out of the camera so you can see how the latest version of WordPress handles the resizing for you.

The quick list of what happens is:

1. You upload your image and if it is over 2560 pixels in height or width (you can change this setting) – WordPress will scale it down for you to 2560 pixels.
2. WordPress will store the original upload, the scaled down version, some new responsive images and all other sizes your theme calls for in your uploads folder.
3. WordPress will display the appropriately uploaded size in the various locations on your website.

Below we will address each of these items in more detail and will also outline some tips for properly using images throughout your website.

Example WordPress Upload Process

I uploaded an image named cleo.jpg to my website which measured 5616 x 3744 and is 5.9MB in size.

In the image below you can see what WordPress did to that image to scale it down. You can see the new file name is now cleo-scaled.jpg, the image now measures 2560 x 1707 and is 439KB in size.

That is a HUGE savings right off the bat and we actually are big fans of this new addition to WordPress for those that do not properly optimize their images before uploading them.

Wordpress scaled down my full size image.

All other images that our website creates are also stored in the uploads folder on our server as you can see below.

cleo.jpg is my original upload (you will not see this image available in WordPress anywhere, it is stored on the server only. You can use code to pull it into your theme if you need to)
cleo-scaled.jpg is what WordPress scaled it to as a max usage size
cleo-300×300.jpg is WordPress media setting thumbnail
cleo-450×300.jpg is WordPress media setting medium
cleo-900×600.jpg is WordPress media settings large

Additional Sizes New In 5.3
cleo-768×512.jpg is WordPress created medium_large size
cleo-2048×1365.jpg is WordPress created
cleo-1536×1024.jpg is WordPress created

WordPress Core Media Settings

The new images being added are in addition to the images your website media settings is set to which you can see by going to SETTINGS > MEDIA in your WordPress admin.

Here you will see image size options for the following:

Thumbnails – typically set to 150px square
Medium – typically set to 300px maximum size (width or height)
Large – typically set to 1024px maximum size (width or height)

Below are the settings that are in my media settings for 2 Dogs Media.

Then you also have your theme images that are being called as well which are noted in your functions file.

So now, with the addition of WordPress 5.3 you have a lot of images being created! Depending on what your theme is calling for will depend on what size image your website will use.

Why Visual Brands Need To Take Note!

If you are a photographer, architect, artist or other business that depends on large images to display your work – if you have not updated to 5.3 yet you may find it frustrating when you do! If you have always showed original size images on your website (that are over 2560 pixels ) – you will now not be able to unless you add the deactivate WordPress scaling functionality below.

Because this new version will only display the maximize size set by big_image_size_threshold – you will either need to adjust or or remove it entirely.

There is a new filter as well that will allow you to pull the original file into your theme if that is a preferred option for you.

Why You Should Still Resize Images Before Uploading

Yes, you may be excited that WordPress does resizing for you now – but we still 100% recommend you upload resized images and not depend on WordPress to do it for you.

One simple reason.

By allowing WordPress to handle it – you are storing HUGE images on your server and in many cases your server may have storage limitations which you will quickly use up with super large images.

Resizing images before you upload them is something we still highly recommend!

Current PNG Issues

This new version of WordPress also has some known images with PNG files. If you are uploading PNG-8 files, they will be upsizes to a PNG-24 which greatly increases the file size.

While we always recommend uploading jpg files due to size anyway, in the rare instance you may need to upload a PNG for transparency purposes you may have size issues. This is something that is being worked on by WordPress to try and find a solution for.

Deactivating WordPress Scaling

If you are perfectly happy with the way your website handles images and do not want the scaling feature you can easily deactivate it by adding the below line of code to your functions file in your child theme.

Adding this will prevent the scaled version from being created – all the other sizes will still be created.

add_filter( 'big_image_size_threshold', '__return_false' );

There is also a plugin available called Disable “Big Image” Threshold – but we always recommend limiting plugins when you can.

Changing The Size Of The Scaled Image

If 2560 pixels is not big enough for your needs, there is a filter you can add to your functions file to create a larger scaled size of the image.

Copy the below function into your functions.php file and it will modify your image size to adjust to 4096 pixels instead of the default 2560 pixels.

Just change the 4096 pixels to whatever size you want the scaled version to be – you can make it smaller too!

function td_big_image_size_threshold( $threshold, $imagesize, $file, $attachment_id ) {
    return 4096;
}
add_filter( 'big_image_size_threshold', 'td_big_image_size_threshold', 10, 4 );

You can see in the image below our scaled image is now 4096 pixels instead of the default 2560 pixels.

Function to change big image size in WordPress 5.3 results

WordPress Conversations & Resources

While this post breaks down the most important parts of what you should know about image handling in WordPress 5.3, we understand some of you may want to know even more (and good for you if you do!).

Below are a few links talking about these new image features with some great conversation!

Introducing Handling of Big Images WordPress 5.3

Updates to Image Processing in WordPress 5.3

Keep America Beautiful Launch: Gutenberg Galore

We are beyond thrilled to announce the launch of the new and improved Keep America Beautiful (KAB) website!

2 Dogs Media was incredibly honored to have been part of this project since they do such amazing work and have a mission that we believe in! They are an amazing organization working very hard to help us have a more beautiful place to call home – so please, give them a peak and see what they are about – and get involved if you can!

On to the project!

About The Project

Keep America Beautiful was previously on an outdated version of Drupal and had a design and hierarchy that did not offer a good user experience or align with their brand.

A complete redesign was done and 2 Dogs Media was hired on as the development team to rebuild the website using WordPress.

Below is what the website looked like before the redesign. A hidden navigation in a mobile toggle, disjointed navigation, no cohesive color scheme and lack of clear call to actions were just some of the immediate issues they had.

The Features & Functionality

There are a whole lot – and we loved every minute of making it all happen!

The site was completely rebuilt on WordPress using ACF Pro and Gutenberg to allow the client the easiest management of content possible. We are looking forward to the WordPress 5.3 update to even have more improvements to have some fun with!

We migrated all the content from Drupal to WordPress including an affiliate database of almost 700 members. All of this data was then reformatted to work in the new design.

Below we will talk about the best parts of the development.

Easy Content Management

Content management was critical to the team as they wanted the ability easily add or update content but also have some flexibility to create pages in unique ways. Using Gutenberg with ACF Pro gave them exactly what they needed!

Most of the pages are pre-formatted so the client can easily update them, but as they grow familiar with the website they have the option to prepare more creative pages for the various programs they offer using standard Gutenberg blocks or Kioken Blocks which we have included for them.

The home page of the website was all done with Kioken Blocks and a few of the custom Gutenberg blocks we are showcasing below.

Custom Gutenberg Block Area

This is the part we are most excited about – we pimped out some Gutenberg blocks!

We really worked with what Gutenberg has made available to provide the client some flexible content blocks that will allow them to promote various pieces of their organization wherever they want!

The first thing we did was create a unique block category called “KAB Custom Blocks“, this will allow the client to easily pick and choose the blocks they want without digging around! You can see below that they have a whole separate area where the blocks they use most often reside for easy access!

My only gripe is that I was not able to find a way to have this group of blocks show at the TOP of the dropdown of blocks – so if anyone has any ideas, please let me know!

Custom block category just for the clients custom Gutenberg blocks

Event Call To Action Block

We actually created this block as a standard block they can insert and edit as needed to promote a certain event – as well as a reusable block so they can showcase a specific event (like their annual meeting) throughout the website giving them the ultimate in flexibility.

So they enter their content in the block fields which is shown below.

The result on the front end of the website is what you see below.

Cool right?

So now they have a block they can put on a specific page to promote a singular event for one of their programs – or they can use the reusable event block to showcase an event on multiple pages but change the content easily on all of the instances of the block via the reusable block area.

3 Block Grid

This is a unique grid that features 2 horizontal blocks and 1 vertical block which creates a great landing page design. The client can have the vertical block on the left or right allowing them to create an engaging page with a little bit of variation on each row.

They can choose the colors for the blocks, add text and a link as well as an image.

The Gutenberg block fields are shown below and the resulting front end block area is below that.

3 Block Gutenberg Grid block on the front end.

Image Text Block

This is the block they are using the most as we are using it to create “landing” pages for parent menu items to help users navigate the site in a more aesthetically pleasing way.

The block contains a text area with an image and the client can select a color accent for each block. The text background color dropdown is populated with their brand colors so that the team does not stray from those colors, but you can also use a color picker in this area as well.

Donation Block

This block is also a default block they can use anywhere they way and can be customized to a specific page or they can choose the one from the reusable block area.

So if the are doing a special program for the fall – they can use a donation block to customize the promotional text for that campaign.

The blue box above the dollar amounts are all customized text that shows the impact that each donation amount makes which helps donors see how their donation is making an impact!

The image, background text color and all text is completely changeable by the client just by filling in the fields below.

Donation block text fields — Text fields in custom donation block that populates the text area of the donation block.

Donation block donation amount text fields — Text fields for the donation values on the donation module bar that will help users see the impact their donations can make.

Finished donation block after all fields are populated

Affiliate Search Block

This one is a little different in that the client cannot edit anything in the block – but they can place the block wherever they need to.

Because the Keep America Beautiful affiliates are such a crucial part of their success – they needed to make sure they had a way to promote their search driven affiliate database. This block was custom coded so that when a zip code is entered, it will take you to the affiliate search page where it will show you the KAB affiliates closest to you.

This is useful on so many pages – and it can easily be inserted anywhere they need it to be!

Custom Gutenberg block to search for nearest KAB affiliates

Post List Block

Another important piece of the structure was for the client to have the ability to share content and news throughout the website based on category and tags as well as their mission types.

So we created a custom Gutenberg block that allows them to select a number of posts and from every option in terms of categories and tags they have available! These posts will show as a grid of blocks in 3 columns anywhere they choose to place them.

This is great for their various programs and initiatives allowing them to feature the posts relevant to those specific items.

This block is modeled after our WordPress related posts tutorial.

Three post grid from Gutenberg block post

Other Features

The affiliate search page is a custom coded functionality that allows visitors to find a KAB affiliate near them so they can get involved in the various efforts happening in they community. The list or map options allows visitors to view how they are most comfortable and the search allows them to filter by radius.

Finally – we are working on building out an administrative area that will be filled with reporting functionality for the affiliates so they can track their efforts in making the world a more beautiful place. These reports will integrate with Salesforce so the client has all the data they need for reporting at a different level.

We are incredibly proud of this website – which will be ongoing for us as the KAB team looks to grow and improve the site in 2020! Have questions about anything in this post – leave a comment below and we will be glad to answer!

Jill Caren

SmarterQueue Review: Social Media Scheduling Made Easy!

If you are in the market for a social scheduling software that is not only easy, flexible and affordable – SmarterQueue may be what you are looking for!

Price

Affordable for even the smallest business owner.

Ease of Use

An easy platform that is intuitive and user friendly.

Usefulness

So many features to keep your social media profiles filled with content.

Call me a tool snob – but it is incredibly rare that I find a tool that I will actually subscribe to for a full year. But SmarterQueue was a tool that I fell in love with at first try – so let me share why!

I tried Hootsuite.

I tried Buffer.

I tried MeetEdgar.

While they are great – they were not great for me. I am not a social media fan – so I really wanted something that would make the entire process of posting easy and intuitive and keep me out of it as much as possible.

That is why I am writing this SmarterQueue review.

Because this is the tool that for me – checks all the boxes!

I load it – and I go away.

I check it once a month and go away.

I love it.

Contents

What Is SmarterQueue?

SmarterQueue is a social media management tool that offers the ability for you to schedule, categorize, analyze and curate content in one easy to use interface.

You can recycle evergreen posts, schedule seasonal posts that will automatically stop posting when you want them to and more!

So let’s get into the fun stuff below!

What Social Platforms Does It Work With?

Facebook – pages and groups
Instagram
Twitter
LinkedIn – profile and company
Pinterest

What Are Some Cool Things It Does?

Below is a list of the things we love the most – we will outline a few of these further below so you can get more details on what we think you will use the most in the tool!

Posting Planner allows you to completely pimp out your schedule by social profile and category. This includes setting time frames for special events, holidays or promotions.

Categories help you do a better job of organizing your social content!

Analytics helps you see your top performing posts so you can better understand what is resonating with your followers so you can create similar content.

Scheduling Content is a breeze – from recycling content to be delivered at specific intervals or dates to single sharing, SmarterQueue manages it all and makes it easy.

Add Content with their tools to help you find relevant content from a variety of sources including RSS feeds, searching on Twitter and so much more.

Some of these features are relevant to the level of package you choose – so you will see more options in all of the above at the higher pricing levels. But even the base level offers all of these features – just less options in them!

SmarterQueue Categories

The categories will help you organize your content with ease! Depending on the level subscription you have will depend on how many categories you can create, but they can be color coded, scheduled for certain time frames and can be assigned to specific social profiles.

As an example if you are a lifestyle blogger, you can create categories for Christmas, Easter and Summer – then add content to those categories and have them be automatically shared during a specific time period.

If you are a pet blogger you can add posts for specific monthly events like pitbull awareness month in October or adopt a senior month in November and only have posts specific to those events shared more during these time frames.

If you have a business you can add posts offering special deals or promotions for specific time period.

Categories are extremely flexible and a great way to keep your post schedule organized!

How will categories help you?

So for Christmas – you can load 30 Christmas related posts to be “re-queued” within a specific time frame like November 1 – December 25th.

Example Category Usage

In the image below you can see I have a category called Christmas. I have a red color to designate it easily in my planner and I have 4 social profiles that I will use this category in.

The area called Seasonal Category is where you can choose to have your content be shared all year round or for a specific time period. I have my Christmas category set to be shared from 10/13/19 through 12/31/19 – at which time the category will deactivate and all sharing of posts in it will cease.

On the left are my current categories — the items that have the arrow are active categories and those with the 2 lines are paused.

I would not want any posts in my Easter category going out now and SmarterQueue takes care of it for me!

Posting Plan

The posting plan is where your scheduling magic will happen! This is where you will create a calendar of times you want specific content to be shared.

Below is a screenshot of how the posting plan looks in SmarterQueue. You can see on the left I can choose a category from the dropdown, assign a specific profile I want to add to my planner and simply drag and drop it into the schedule.

The right shows a weekly schedule of posts I have scheduled – I can easily see the social profile – category and day/time of the week I want it shared.

At the bottom of the screen below the weekly overview you also have a great visual of the number of posts you have shared each day as well as a grid that will show you the number of posts you have scheduled by social profile AND category!

This is one of my favorite parts of the tool.

How SmarterQueue saves your ass!

See those red blocks below?

That is SmarterQueue protecting my butt from being seen as spammer. Basically it is telling me that I have 17 posts scheduled to go out on my Pinterest page for the week but I do not have enough content to share without it looking spammy.

Same with my Twitter page – I have 7 posts scheduled for the week – but in my current queue of posts I do not have enough to space them out enough.

When this happens you can either decrease your number of time slots – or just add more content!

Finding & Creating Content

Adding content in SmarterQueue could not be easier! There are a few different ways you can pull in content with this social media management tool as noted below.

Please note some options are based on the level of subscriber you are!

1. Add a post right through the interface by adding a link
2. Use the ch
3. Find content allows you to literally find content using hashtags, from Pinterest boards and more!
4. Import posts from an RSS feed (I have my own personal RSS feeds setup so I can easily share right from the dashboard and find old content to re-share if I need to)
5. Import posts from a CSV feed

Finding Content

Below is the find content screen in SmarterQueue – you can see in the right there are so many different resources for finding content. I can try a username which will pull from Twitter – I can use my Pinterest boards from my profiles – and so much more.

You will never run out of content again!

Using the Browser Extension

SmarterQueue also has a browser extension you can use to share content as you move around the web.

Adding A Post

Easy peasy lemon squeezy! In simple terms the steps to adding post are as follows.

1. Click the add post link
2. Select the category you want to post to
3. Choose the profile(s) you want to post to
4. Add you post link into the editing box
5. Add you text / emojies / hashtags
6. If you do not like the image it selected – add a new one in the media options
7. Choose your post options
8. Click save!

Additional Post Options

There are several options when you create a new post that are pretty cool. You can see some of them in the video, but we are noting them below too.

1. Under Evergreen Post Recycling you can set your post to just go out once in the category – or if you want it to be requeued.
2. If you choose post once you can choose to put it at the top of you posting plan list – at the bottom, or even set a specific date and time!
3. If you choose to requeue the post you can just add to to the queue and it will be shared in the queue you set up in your posting planner for the category and social profile. You can also expire it after a set date or number of times it has been posted.
4. Add text variations is to allow you to change the text completely if you want to requeue your post. This means no duplicate social shares! I have setup 4 variations on one post with 4 different images using the vary media feature.

Below you can see what the add a post screen looks like with 2 variations setup using the same image.

You can see I have selected for my post to be shared on Twitter and Pinterest and in the right you can see the preview of how it will look. In the right you can also click the arrows near Variations 1 and 2 to see the different versions if you added multiples!

Adding Media

Adding media to a post is awesome – see the screenshot below to see all the images to add media in SMarterQueue.

2 SmarterQueue Negatives

One thing we do not like about the post feature is that if you are adding posts to Pinterest – you can only do 1 board at a time. So for a post that you may want to put in 3 boards – you would need to either add it manually or you can go to your queue and duplicate it and change the board.

Given how much I use Pinterest – this was a small hiccup but given everything else this tool does – it is still well worth it!

The only other thing we would love to see them add is the ability to easily share social media posts from our actual social media accounts – something like Buffer!

But both of these are minor issues – the positives are very much stronger than the negatives!

Posting Queue

Now that you have your categories in place and your posting plan in place and added some posts – you can take a peak at your queue to see what is scheduled to go out!

The posting queue gives you the following:

1. An overview of all of your posts scheduled to go out
2. Which social platform it is set to go out on
3. The date and time it is scheduled next
4. If you are using the requeue feature you will be able to easily see when each requeue is scheduled to go out
5. Filter by category or social network to get a better handle on a per category or social basis
6. Warnings if posts cannot go out due to “spam” possibilities
7. Viewing options for week, month or in a list (the image below is in list mode)

You can see I am being warned I have a couple of posts that are not being posted because I do not have enough posts in the category I have it set to go to. I love that they just stop it for me!

I will add more content to the category and then it will be put back into the queue for sharing.

The SmarterQueue Video

If you really want to see what this tool looks like, take a peak at our video that will give you a first hand look at the features we love the most. This tool offers so many options we could not fit them all into this video – which is already longer than we hoped – but we wanted to give you enough to make an informed decision!

SmarterQueue Analytics

The final piece of this amazing puzzle – the analytics! Most other social media tools like this one charge a lot more for the analytics – but this tool has some type of analytics available at all pricing levels.

From seeing your best performing posts to viewing clicks and other data you will have an arsenal of data to help you create content that resonates with your readers!

SmarterQueue Pricing – Get 2 Months Free

Like I mentioned earlier – we have tried a whole slew of tools to automate our social posting – the only other one we had ever purchased for a year was Buffer – but it still did not give us what we wanted in terms of ease and flexibility – and analytics!

The pricing for SmarterQueue we feel is what sets it apart!

You can view their pricing here.

The lowest priced package is 19.99 a month (less if you pay annually).

The button above will give you a chance to try SmarterQueue for 2 months free. 2 Dogs Media does not receive compensation – they reward us by giving us a free month – but we are giving that free month back to YOU so you can see how awesome this tool is for automating your social presence without it looking automated!

Jill Caren

WordPress Related Posts Without A Plugin

Showing WordPress related posts by categories are not the best way to show related content.

Neither is showing them by tag – or randomly.

But that is what most of the more common related posts plugins for WordPress offer!

Imagine having the ability to pick and choose the EXACT posts you want to show as related to an existing post!

It can be done – and with limited resource load and code – and we are going to show you how!

WordPress Related Posts are a great way to show visitors additional content that you may have on your website that is related to a post they are reading.

For example if you are a food blogger and you have a post about “Honey Baked Chicken” – you can then choose a specific post like a side dish and beverage to show them a “completed meal” idea – or you can show them 2 other “Honey Dinner Recipes”.

How you use it is totally up to you – but using it will help you provide a better user experience which in turn will help with rank and repeat visitors!

Yoast has an internal linking tool that will do something similar to this tutorial but it is a paid plugin – this tutorial is free! We have never used it and are not familiar with it, but it is an option if you are interested!

But, imagine having a way to show WordPress RELATED POSTS that you pick and choose – for free and is easy to use. Image no more showcasing by category or tag – but manually selected the exact posts you want to show – for free!

Now you can do that – and with this tutorial we will show you how!

As with all of our WordPress tutorials, like our Custom Gutenberg Block tutorial – we are pretty confident that what we outline below will work in most environments, but without knowing your specific WordPress development setup – there may be some conflicts.

Please do a backup before trying this tutorial – or any tutorial for that matter! Good habits = less stress!

Contents

What You Will Need For This WordPress Tutorial

Install the Advanced Custom Field plugin (this is a goldmine of a plugin for free and we will do future tutorials using this plugin – so you will have a chance to use it more in the future.)
Make sure you have access to your single.php file to add some code
Make sure you have access to your stylesheet to add some styling options

How Many Steps Are there In This Tutorial?

Less than you may think! WordPress and Related Posts are as easy as pie to do with this simple guide.

Here is the exact steps for the tutorial.

1. Create your custom “related posts” field group
2. Add 2 custom fields to your group – 1 for a title and 1 for the posts.
3. Add the provided PHP code to your single post template file
4. Add the provided CSS code to your stylesheet
5. Go to your post and add some posts!

What The WordPress Related Posts Will Look Like

We wanted to show you what we will be creating today!

This Related Posts tutorial will offer you 2 options to show your related posts as shown below.

Note: the links for these examples are highlighted in blue because that is how they are on our website, we did not include the code for this and the links will show by default as links are on your website.

3 Column Grid With Images

Wordpress related posts sample with 3 across

Horizontal List With No Image

Horizontal WordPress related posts example

Setting Up Your Advanced Custom Fields

Once you install Advanced Custom Fields you will do the following steps to get your fields in place.

Creating A Field Group

A field group with ACF is a “group” of fields that are specific to a post or page. So we will need to create a field group for “related” posts which will then have 2 fields inside it.

To create your Related Posts field group:

1. Go to CUSTOM FIELDS
2. Click ADD NEW
3. For the title you can enter RELATED POST
4. Now you can go to Field 1 instructions below to add your Related Post Title Title

Field 1 – Related Posts Title

This field provides a text box where you can enter a Related Post Title above your posts. In the images above you can see we are using the text “More Gutenberg News” since our posts are all Gutenberg related – which is relaying that the related posts are directly related to the post they are on.

Adding your Related Posts Title field:

1. Click ADD FIELD
2. For field Label you can enter Related Post Title
3. Click the Field Name box so it auto populates – (it should say related_post_title this is important!)
4. For Field Type select TEXT
5. Now you can go to Field 2 instructions below to add a field to add your Related Posts

Below is an image of how your field should look when it is done.

Wordpress related posts ACF post title field

Field 2 – Related Posts

This field provides a box where you can add multiple related posts to show on your post.

Adding your Related Posts field:

1. Click ADD FIELD
2. For field Label you can enter Related Post
3. Click the Field Name box so it auto populates – (it should say related_post this is important!)
4. For Field Type select POST OBJECT
5. Filter by Post Type – select the POST option
6. Select Multiple Values – select YES
7. Return Format should be set to Post Object
5. Now you can go to Field 2 instructions below to add a field to add your Related Posts

Below is an image of how your field should look when it is done.

Final Field Steps

1. Under LOCATION show this field group should be set to POST TYPE then IS EQUAL TO then POST as shown in the image below.
2. Click UPDATE and now your field is created

Adding The ACF Code

Now that we created the field for your related post information, we need to tell the website how and where to display it.

This part of the tutorial will be dependent on your theme so this is the part that you may have a little difficulty with.

Below we are providing code for implementing these fields in a Studiopress theme and a standard WordPress theme like TwentyNineteen.

General Theme Integration

This code is standard for most WordPress themes and was tested in the content-single.php file in the Twenty Nineteen theme as well as a standard single.php file and worked perfectly.

<?php 	
    $post_objects = get_field('related_post');
    if( $post_objects ): ?>
		
<div class="relatedposts"><h3><?php the_field('related_post_title'); ?></h3>
    
    <ul class="related">
        <?php foreach( $post_objects as $post_object): ?>
        <li>
            <?php echo get_the_post_thumbnail( $post_object->ID, 'thumbnail' ); ?><br />
            <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
        </li>
        <?php endforeach; ?>
    </ul>
    
    </div>
    <?php endif; ?>

StudioPress Theme Integration

For those on Genesis/Studiopress which is what we primarily work with, you will want to modify your single.php file in your child theme to get the WordPress Related Posts working.

Below is the full code for our Single.php file that you can copy and paste into your own – this code is ONLY IF YOU DO NOT have a currently customized single.php file.

If you already have a single.php file with code in it then skip to the next code section.

<?php
/**
 * Child theme single post template.
 */
 
add_filter( 'body_class', 'single_posts_body_class' );
function single_posts_body_class( $classes ) {
   $classes[] = 'custom-single';
   return $classes;
}
add_filter( 'genesis_site_layout', '__genesis_return_content_sidebar' );
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );
add_action( 'genesis_entry_content', 'related', 20 );
function related() {
    $post_objects = get_field('related_post');
    if( $post_objects ): ?>
    
    <div class="relatedposts"><h3><?php the_field('related_post_title'); ?></h3>
    
    <ul class="related">
        <?php foreach( $post_objects as $post_object): ?>
        <li>
            <?php echo get_the_post_thumbnail( $post_object->ID, 'thumbnail' ); ?><br />
            <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
        </li>
        <?php endforeach; ?>
    </ul>
    
    </div>
    
<?php endif;
}
genesis();

If you already have some custom code in your single.php file then you will want to add the code below to your existing code. The line add_action with the 20 at the end may need to be adjust to ensure that the related posts sit at the bottom of the post.

add_action( 'genesis_entry_content', 'td_related', 20 );
function td_related() {
    $post_objects = get_field('related_post');
    if( $post_objects ): ?>
    
    <div class="relatedposts"><h3><?php the_field('related_post_title'); ?></h3>
    
    <ul class="related">
        <?php foreach( $post_objects as $post_object): ?>
        <li>
            <?php echo get_the_post_thumbnail( $post_object->ID, 'thumbnail' ); ?><br />
            <a href="<?php echo get_permalink($post_object->ID); ?>"><?php echo get_the_title($post_object->ID); ?></a>
        </li>
        <?php endforeach; ?>
    </ul>
    
    </div>
    
<?php endif;
}

Adding The Styling

The code below is what we are using to style the layout of the WordPress related posts as shown in the images above.

You can choose the option to display 3 across or to display them horizontally with no image by simply copying the one of the following CSS snippets into wherever you add custom CSS. (Some add it in their editor area – others add it right into their style.css file)

3 Column Related Post Grid CSS

.relatedposts{padding:50px 0}
.relatedposts h3{text-align:center;margin-bottom:20px}
.entry-content ul.related{display:flex;margin-left:0}
ul.related li{width:33%;display:block;text-align:center;margin-right:12px;line-height:1.5em}
ul.related li:last-of-type{margin-right:0}
@media only screen and (max-width: 768px) {
  .entry-content ul.related{display:block}
  ul.related li{width:100%;margin-right:0;margin-bottom:20px}
}

Horizontal Related Post Grid With No Image CSS

.entry-content ul.related{display:block}
ul.related li{display:flex;width:100%;margin-bottom:20px;padding:20px;background:#f8f8f8}
ul.related li img{display:none}

Adding Related Posts To A Post

Now you can go to any post and if you will see a new section called Related Posts where you can enter your custom Related Posts Title and select the posts you want to show.

Simply click in the Related Post field and start typing and the dropdown will populate with related posts to the words you are typing. Select as many posts as you would like!

Why This Is A Great Related Posts Option

Basically it is the most lightweight option out there for creating Related Posts in WordPress and by doing it with custom code you can easily modify it as you grow and change your look and feel or require different needs.

This code can be used to show posts on pages if you are creating landing pages for example – there is a lot of flexibility as to how you use this code.

The best part is the total custom ability to choose the exact posts you want to use!

Too Afraid To Go It Alone?

While we tried to make this WordPress Related Posts tutorial as easy as possible – we understand some are just too darn scared to do it on their own. If that is the case we will be glad to implement this for you.

Installation includes the following:

Installation of Advanced Custom Fields
Creation of field group and fields
Addition of code to your child themes single.php code
Addition of CSS to your stylesheet
Modifications of CSS to your preferred look and feel

Cost: $50 & completed within 2 business days.

Jill Caren

Building Custom Gutenberg Resource Blocks With Lazy Blocks

Although there may have been a time I was not thrilled about it – Gutenberg is growing on me! While there is still reasons we will custom code websites, we are starting to implement Gutenberg more often where it makes sense. The real fun for us is in creating custom blocks in Gutenberg which gives our clients even more creative freedom while allowing them to still easily update their website.

Creating custom blocks is one of the best – and easiest ways to manage your page formatting! Custom blocks in Gutenberg can help you create a block that is custom to your unique needs and can be formatted to layout exactly as you wish.

There are several ways to create Custom Gutenberg Blocks, but for this tutorial we are going to try and showcase the easiest way we found so far using 1 plugin called Lazy Blocks. This is NOT an in-depth Lazy Blocks Tutorial – just a tutorial to create the sample resource block and page we noted below.

What Are Custom Gutenberg Blocks?

Custom Gutenberg Blocks allow you to completely rethink how you display your content! While there are a lot of really great add-on plugins for Gutenberg like Kadence or Kioken that have some great features like accordions, tables and more – there are still going to be times you want something more custom.

While in some cases you may be able to make existing blocks work, we have found creating custom fields to just be easier!

Why Do I Need Custom Blocks?

Well – just like most things in life you do not “need” custom blocks, but if you like clean code, less plugins, faster websites and the ability to really create blocks that are unique to you – then custom Gutenberg blocks is the way to go.

There are a lot of Gutenberg plugins out there that have a ton of block options – yet even I found them overwhelming. I knew what I needed for a project – but there was no plugin that did it easily without me building out layers and things.

So I created it – and many more since then.

Custom blocks are great because they are custom for your site – and you do not have to have plugins with a lot of code and resources that you will never use loading down your website or overwhelming you with options.

What Is The Lazy Blocks Plugin?

Lazy Blocks is what is called a “visual constructor” that allows you to easily add fields as needed to create a block that you can use in your page or post. The drag and drop editor makes it very easy to use.

We are not going to cover everything this plugin does for this tutorial – only exactly what you need to create the blocks specific to this tutorial blocks.

Be sure to install the free Lazy Blocks Plugin before you get started on the tutorial below!

What We Are Going To Create Using Custom Blocks?

We will be providing the exact steps and code for the following:

Horizontal row block
Vertical column bock

You can see both examples of what we are creating below!

The tutorial code below is setup so you can use EITHER option at any time! You do not need to add 2 separate code lines to get this to work either vertically or horizontally.

Horizontal Row Block

Horizontal row of custom Gutenberg blocks.

Vertical Row Block

Tutorial For Adding A New Custom Block

1. Adding A New Block

Go to LAZY BLOCKS then click ADD NEW. Make sure your editor is set to block editor or you will not see the fields you need to see. You should see the screenshot shown below if Lazy Blocks is ready to use.

2. Creating Your New Block Fields

Now you are ready to roll – while for this example we know what fields we need, you need to think carefully before you start creating a custom block about the exact fields you will need. I suggest sketching out your vision so you have a clear plan.

For example below is the block we are going to create and I have noted exactly what fields we need. There are 5 total fields needed – 1 is an image field and the others are all text fields.

The Block Fields You Need To Enter

Below are the exact steps needed to create a custom block with the 5 fields shown above.

You ONLY NEED TO ADD what is noted below.

There are a lot of other fields – but you do not need to worry about anything other than what is below for now!

So for the 5 fields, each field will have a Label, Name and Type entry.

1. LOGO FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Logo
Name: Will auto populate based on the text from the label field – make sure it is resource_logo
Type: Image

2. TITLE FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Title
Name: Will auto populate based on the text from the label field- make sure it is resource_title
Type: Text

3. DESCRIPTION FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Description
Name: Will auto populate based on the text from the label field- make sure it is resource_description
Type: Text Area

4. LINK FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Link
Name: Will auto populate based on the text from the label field- make sure it is resource_link
Type: URL

5. BUTTON TEXT FIELD
Click ADD CONTROL – in the right you will see fields that need to be completed as follows:
Label: Resource Link Text
Name: Will auto populate based on the text from the label field- make sure it is resource_link_text
Type: Text

Now your page should look like the below image.

3. Creating A Block Name

When you are done adding fields, click the BLOCK tab to the left of the CONTROL tab you have been working in and do the following:

TITLE: Enter Resource Block
SLUG: Enter resource-block
ICON: Choose any icon, I just chose a post icon for this block.
CATEGORY: Common Blocks

4. Click Publish

In the upper right you can click the publish button to make the block active!

Now your block is created and you can add it to a post or page – but we still have to do one more thing to have it show on the front end.

5. The Frontend HTML Code

This is the part that many people are afraid of – but don’t be! I am going to try and make it simple.

At the bottom of the Controls area where you added your field there is a block called FRONTEND HTML – this is where you are going to put the code to display your block.

Yes – this does require some HTML/CSS knowledge, but you can hire someone to help with this – or keep an eye out for more tutorials that we will provide where you can just copy and paste the code right where we tell you.

So we need to tell the front end of your website HOW to display your new fields. Because we wanted to have this block be flexible enough to be vertical or horizontal we wrote the code to allow us to do that.

Below is the HTML CODE to make the content layout the way we want it. Just copy and paste it into the Lazy Blocks area noted below.

<div class="resource">
	<div class="column one">
	<img src="{{resource_logo.url}}" alt="{{resource_logo.alt}}" />
	</div>
		        
	<div class="column two">
	<h3>{{resource_title}}</h3>
	{{resource_description}}
	</div>
			
	<div class="column three">
	<button class="linkbutton">
	<a href="{{resource_link}}" target="_blank" rel="nofollow">
	{{resource_link_text}}</a>
	</button>
	</div>
</div>

Below is a screenshot of where you add the code above.

6. The CSS Code

Below is the CSS code to make the horizontal rows look the way they do in our sample above including the code for the responsive formatting. This code will be added wherever you normally add your CSS.

Please note: while we are confident this could should work – we cannot guarantee it on all websites. Results may vary based on your code and styling!

Copy the CSS code as it is below exactly!

.resource{display:flex;flex-direction: row;border:2px double #c8c8c8;font-size:16px;margin:20px 0;}
.resource .column.two{flex-basis:100%;flex:3;padding:0 20px 30px 20px}
.resource h3{margin-bottom:0}
.resource .column.one,.resource .column.three{flex-basis:100%;flex:1;display: flex;align-items: center;justify-content: center;padding:12px}
.resource .column.three{background:#f8f8f8;}
.resource button.linkbutton{background:#ff9900;padding:12px}
.resource button.linkbutton a{color:#fff}
@media only screen and (max-width: 768px) {
 .resource{display:flex;flex-direction: column}
}

7. Adding the Block To A Page or Post

Now you can head on over to your page or post and click the add new block icon and search for your block. Insert it into your page, add your content and you are ready to roll!

Click to where you want to add a new resource block and click the ADD BLOCK button as shown below. Then you can search for your block.

Once you add the resource block you can now just enter your information in the fields. When you are done click UPDATE and your block should now be properly formatted and have the right content on the front end of your website.

Making Resource Blocks Display Vertically In a Row

To make your blocks be vertical instead of horizontal is easy! There are just a couple of different things you need to do to make this happen.

1. Go To Your Page And Add A Column Block

2. Change The Column Block To The Number Of Columns You Want

You can set 2, 3 or even 4 columns! We would recommend 2 or 3 at the most or it may get too squished. You may also need to adjust the CSS a bit to ensure the content fits properly.

You do have to hover to the left of the new column area to see the columns change indicator in the right. It can be a little tricky – but just hover to the left and when you see the whole row outlines you should be able to change the columns.

You can see in the image below how it should look when you can change the columns.

3. Add A CSS Class On The Row

In the row image above you can see an ADVANCED dropdown, click that and enter the following text in there.

resource-row

4. Add Additional CSS

There are just 2 additional lines of CSS to add to the CSS you have added above for the horizontal styling. You can place this right in there!

.resource-row .resource{display:block}
.resource-row .column.two{height:275px}

Yep – that is it! You now should have a pretty flexible option for building out resource pages.

The Tutorial Video!

Just a simple video that will walk through the above with just a touch more detail.

Questions? Concerns?

While we tested this in a variety of scenarios and had it working perfectly – we know this code may not work on your site. If you need help we are glad to jump in and take a peak to get it working for a small fee.

If you just need a quick eyeball – leave a comment and we will see if we can help for small issues you may be having!

Jill Caren

Ever get tired of your page not ranking? Sick of seeing competitors on page 1 while you are stuck on page 2 or 3? Surfer SEO may be the miracle you need!

Feel like your content is great but you are not sure what keywords and phrases you should be targeting to improve traffic?

Whether you are optimizing a blog post or a service page, the Surfer SEO tool might be the serp tool that can help you make some dramatic improvements. It did for us and we are writing this review and recommending it because we believe in that much!

Price

Plans from $29+ make it affordable for everyone.

Ease of Use

Easy interface makes optimization easy.

Usefulness

We use it and we have had a lot of success!

Contents

What Is Surfer SEO?

Surfer SEO is a tool that will help you improve your on-page optimization with their data driven analysis. It is the newest one of the many SEO tools we use to grow our websites as well as client websites.

Data driven analysis gives you an edge up because it is providing you a comparison based on your unique keyword or phrase and the top pages ranking for that keyword.

Every keyword or phrase you want to optimize for may require different optimization techniques – and Surfer accounts for that.

No more are the days of optimizing every page the same way – pages are now optimized based on the query that is being made by a user.

Below are 2 examples of what we mean by “different optimization techniques” based on keyword.

Keyword 1 Example

Keyword 1 may have the top 10 ranking pages with approximately 2,500 words on each of those pages, so it would be expected you have roughly the same.

They may have 20 exact keywords in that content that are italic or bolded, so it would be expected you have the same.

Surfer will tell you all of this.

Keyword 2 Example

Keyword 2 may have the top 10 ranking pages with only 500 words on a page but have a lot more images on the pages.

These top pages may also have structured data for something specific that you should also have, like a recipe – and Surfer will tell you this too!

The goal of Surfer is to have you be competitive with the top ranking pages based on what those top ranking pages actually having going on on their pages!

Simple concept – and one that many of us have been doing manually for years with spreadsheets!

But no more – because that is where Surfer SEO comes in. It does all that manual labor for you – an experience that has saved us hours of audit work!

This cloud-based tool allows you to compare your own pages against the top ranking pages for any keyword and provides and easy to read format to find out where your page needs to improve.

It also offers a content editor feature that will helps enable you to write better optimized content based on factors that the top ranking pages are using.

Surfer Keyword Analyzer Overview

This is their original tool that helps you understand how you can improve your content based on the top results for a keyword.

It features a few sections that will provide important details about how important a specific item is to your optimization, a great graph for easy visuals, an audit tool and more.

Below is the SERP Analyzer tool where all the magic begins.

Enter the keyword/phrase you want to optimize for.
Select your country.
Do you want mobile or desktop results? Check your analytics data to see where you get more traffic from!
NLP is an option that even gives you more information – but it does cost a bit more. You do not need it but it will help you. You can select 3 levels of NLP results.
You can choose to see a screenshot in your results, but we usually leave this off to save on processing time.
Click create query.

Once the Surfer analysis is done you will be taken to the analysis screen where you will find the following to review.

Left Area Features

This area features the following sections:

Search visibility shows an estimated number of keywords and traffic that the top pages have and you can select whether to show site wide or just for a specific URL. This is still in beta at the time of this writing and while it may be a “guide” based on analysis compared with other tools it is not truly accurate.

Backlinks shows the estimated number of backlinks a specific page or domain has. This is another beta item and we are not confident on the accuracy of them. Again – they are useful as a guide – but not for exact data.

Structure is where the real magic happens and what you will want to dig into a bit to find where you can improve the content! This section covers everything from word count to page length to headings and alt tags.

You can compare your page against the competitors – find where you are missing comparable items and also see the relevance of that item to ranking higher. There are also little graphs that are what is called a correlation meter that will show you the level of importance that factor has on ranking – the higher the bar (or green) – the more value that item has on how well you rank.

Quality covers page speed and structured data – so if your page is slower than the top 10 pages for example, you will want to improve. If you are missing structured data that other pages have – you will want to add it.

Media shows the number of images a page has on it.

Correlation meter in Surfer SEO — Surfer SEO Correlation Graph Example

Right Area Features

The right area is filled with an overwhelming number of items. Some we use some we do not and in speaking with SurferSEO it sounds like a newer version may exclude some of the items so we are only going to talk about the areas we use and that we understand are staying.

Graph area is where you can get an overview of your page compared with the number of pages you want to analyze. By clicking the left area menu items you can chart various items to get a great visual of where you need to improve.

Tabbed area below the graph includes several resources to help you improve your content. The first tab shows you the top competitors for the term you have entered and if you do not rank – you can add your own URL to allow it to be seen on the graph above. The other tabs focus on related keywords, questions and phrases that other pages have that you do not.

Surferseo Keyword Analyzer Tool — Left Area and Right Area of Surfer Analysis Tool

Surfer SEO Audit Tool

This is the part of the Surfer SEO tool I use most often.

It takes all of the items mentioned above and puts them into an even easier to digest format.

You can see below it tells me right away I have 5 errors and 4 warnings that should be addressed if I want to rank for the phrase “fundraising ideas”. In each section you can click the “show details” button to get more detailed suggestions for each area.

They could not have made optimizing your content easier! (But rumor is they will in the future with some new features coming to the tool.)

We feel the audit features are pretty self explanatory so we will not go into detail but we do highly recommend you use as much of the provided recommendations you can and shoot for a whole lot of green to ensure you optimized to what Surfer SEO is recommending!

We have tried it on several affiliate posts with FANTASTIC results when everything was green! Just sayin’.

Surfer Content Editor Tool

This post was written in the Surfer Content Editor and then moved over to WordPress when it said it was perfectly optimized for the term “surfer seo”. This post was published on September 3, 2019 and we will update it below in the test area when we find out where we rank.

What is the Surfer SEO Content Editor?

The Surfer Content Editor uses data driven analysis of the core keyword you enter to determine what you need to do to better optimize your content and uses real time content creation to help you optimize better as you type.

Surfer SEO will help you write the best blog post or page to help you be in line with the top ranking pages for the term you entered by offering the following suggestions for your content:

Number of words
Number of headings
Number of paragraphs
Number of bolded words
Number of images
Important terms to use (recommended to include as directed)
Other relevant terms (inspirational terms you can use)
Questions and Answers

How To Use The Surfer SEO Content Editor

When you go to the Content Editor tool for the first time you can enter the keyword/phrase you want to optimize a post for, the country to target and then hit enter.

When the analysis is done click on the keyword/phrase you just entered to access the content editor and you will be taken to a page that looks like the one below. On this page you can do the following:

Pages to Include: Review the Pages to Include area to ensure the most relatable content is used to provide you the optimization ideas. (for example if Twitter is in the top 10 – you would want to exclude that as they are not a competitor for your post).
Content Structure: Review the content structure to determine the number of words or character you would like to include. The tool will give you an estimated range of words or characters to use if you hover over the input box to help guide you.
Terms To Use In The Content: This area offers ideas in regards to primary, secondary and prominent terms and allows you to exclude terms you think are not relevant – and allows you to add additional secondary terms.
Topics and Questions To Answer: Finding additional questions and content ideas is a breeze! If available there will be a dropdown of questions or topics you can click on and select to add to your recommendations list.
Notes: This area is perfect for writing instructions or additional details for an assistant or writer that you are using to write your content.
When you are done click Finalize Customization

Now you can move on to the actual content editor to begin editing/adding your content and see in real time the changes and optimization updates.

If this is a new post – you can write directly in the editor (which is what we did with this post).

Or if you have an existing post – you can copy and paste the text into the editor and re-optimize it then copy and post back to your website.

Below you can see the content editor on the left and the recommendations on the right. As I continue to write – the items in the right will reflect those changes, so I will keep writing until I see I meet my word recommendations and important terms to use etc.

Use A Writer Or Assistant?
One of the coolest things is you ca simply click the COPY LINK TO SHARE link and then you will have a draft URL you can send to someone else so they can optimize the page for you – without accessing your Surfer account! All the changes they make will be reflected in your account when you access the keyword/phrase in your account.

Surfer Video Overview

See the goods live with this walk-through and general tutorial to help you get started using Surfer!

After watching it – if you have specific questions just let me know and I will see if I can find a way to help you!

Surfer Pricing

This is part of what makes it great – the cost!

There are plans starting at $29 a month which is perfect for bloggers and smaller business owners. They also offer a 7 day free trial for $1 – so i highly recommend giving it a try, I am pretty sure you will fall in love!

Putting Surfer To The Test

We have already done some testing with Surfer on a lower level by implementing some parts they gave us to optimize (like just increasing body content or changing header tags) and loved the results we were seeing, which is why we wanted to share them.

But we wanted to do a full test on 2 different posts and follow the instructions Surfer gives us exactly to see how the posts do.

For these tests we are leaving backlinks OUT of the test. We want to solely test the onsite optimization piece to see how much improvement we can see if we do everything Surfer tells us to.

Test 1

On October 3, 2019 I ran Surfer SEO for a high shopping user intent keyword for a post I launched in July. The post was climbing for a bit then stayed flat for a bit before starting to fall in September.

I ran it through Surfer – implemented changes as recommended on the audit page and we are finally on an upswing again.

Test 2

This was a much more competitive term than the one above that we are trying really hard to gain footage with. We implemented the Surfer SEO recommendations on September 26, 2019 and you can see where we are now.

In both cases we only did “some” of the edits Surfer gave us as we wanted to be able to monitor the changes in steps. We will go back to both posts and optimize them again with more information from Surfer SEO to see if it can help push it to page 1!

Test 3

Summary: In one week went from #5 to #1 utilizing the audit feature tool in Surfer SEO and 1 internal link.

I went from #1 to #4 for one of my main keywords and thought – hell no. Below is the rank drop as shown in Ahrefs.

I jumped into SurferSEO and ran an audit to see how I can get back to position 1. Below are the exact steps I took and I will then share the outcome.

Entered my keyword into Surfer SEO and selected desktop (that is where most of my traffic is from)
Selected the NLP option and only selected NLP entities then clicked create a query
Deselected all the competing pages from the chart and only selected those that were directly relevant as my competition
Click the audit tool
Followed EXACTLY what the audit told me – I made sure everything was green (except for the backlinks) – and that anything in the key phrases/single words with a relevance of over 50% was All Good
Submitted the post to Google Search Console

4 days later I checked where I was and I was at position 2!

But of course my goal was #1.

That same day I add an exact match keyword internal link from one of my top pages and the next day I jumped back to #1.

Final Surfer SEO Thoughts

As with every tool we use here at 2 Dogs Media – we only recommend the ones that we would use ourselves – and this one we definitely are keeping our subscription to.

This review is unbiased, and although we do have an affiliate link – it is because WE USE IT and love it. We are seeing results with only minimal changes – and recently tested several posts to match the optimization recommendations exactly.

With a $1 dollar trial for 7 days – it is worth it to give it a run!

Pagespeed Insights: What You Need To Know!

Everywhere I am these days I am seeing everyone freaking out because their Google PageSpeed Insights scores are way too low.

While we do obsess over website page speed, we do not obsess over our Google Pagespeed Insight scores!

The obsession for the perfect 100 in Google Page Speed is giving website owners false hope that you will get some kind of rank boost and that your page speed will be faster.

This is not necessarily the case.

Your PageSpeed Insights score does not really matter!

I puppy promise that this is true – and puppies never lie right?

PageSpeed Insights Is Not A Page Speed Tool

You can disagree, but as an SEO agency we care very much about site speed and PageSpeed Insights is not a tool we use (nor do many others) to determine page speed for our clients. While we do include the PageSpeed information in our website audit analysis – and provide feedback for how to improve it – we only care about your ACTUAL website speed, as should you!

PageSpeed Insights does not even measure page speed!

So what is the Google PageSpeed Insights tool then?

It is a tool that will help you find technical issues that might be impacting page speed and your users experience – but it does not provide any indication of what your site speed is.

It is a performance tool that will help you see if your front end is properly optimized to bring you the best performing website to keep users engaged and moving around quickly.

Again – there is NO page speed testing involved when you run this tool.

Is page speed really all that important for ranking?

Yes – and No.

Whether we are doing an audit, SEO campaign or launching a website – we do our best to get clients to have a page speed of 3 seconds or less. That is what we recommend as a page speed target.

If you are loading in 4 or 5 seconds or even higher – it is not the end of the world – and Google will not prevent you from ranking high.

While page speed is definitely a factor in ranking it is 1 of over 200 ranking factors.

Think about that – there are over 200 RANKING FACTORS.

Google is not going to look at your post – and say wow, this article has everything the searcher is looking for, but hey it loads in 7 seconds so we will not rank it.

So while you should absolutely make your website as fast as you can – especially for your users, it is not the ultimate factor in whether you rank highly or not.

Backlinks and great content will ultimately help you more as we will prove below.

PageSpeed Insights Analysis

Below are a few sites we just randomly picked in a variety of niches where we tested their website in PageSpeed Insights as well as WebPageTest (our preferred page speed tester) – so we can see the correlation between 3 factors: WebPageTest Page Speed, PageSpeed Insights and rank.

Each of these websites was built on WordPress which is important to note.

Some are raving about great PageSpeed scores and fast load times, but they are not built on WordPress and that can have an impact.

I am in NO WAY condoning not caring about your website speed by analyzing these websites, but am just proving that it should not be an obsession that you put far ahead of writing awesome content, doing proper keyword analysis and earning backlinks.

It should be a piece of the whole SEO puzzle.

I did not add the blog names to protect the guilty! I do not want to call out those that may have less than optimal experiences and we do not want to make them feel bad!

Website #1 – Food Blog

Absolutely horrible load time, horrible Insight scores and still has massive exposure in the search engines.

Ranks for an estimated 186,000 keywords (4,700 are in the top 5 positions)
1,000+ backlinks
PageSpeed Insights Scores are 17 mobile and 32 desktop
WebPageTest load time is 14 seconds to document complete load

I added this blog because it is a blog that is loading slow, has horrible insight scores but it still killing it in search. Their backlink profile is strong and their content is well optimized and well researched for keywords which is what puts it ahead of the pack – even with horrible page speed.

Website #2 – Pet Blog

Slow load time, miserable Insight scores but still killing it in search.

Ranks for an estimated 101,000 keywords (2,900 are in the top 5 positions)
900+ backlinks
PageSpeed Insights Scores are 18 mobile and 40 desktop
WebPageTest load time is 7 seconds to document complete load

Another blog that is loading slow, has horrible insight scores but it is still killing it in the search results. Their backlink profile is strong and their content is well optimized and well researched for keyword optimization which is what helps it be strong at the top of the search engines.

Website #3 – Marketing Website & Blog

Great page speed with not so great mobile Insights score.

Ranks for an estimated 1 Million keywords (2,900 are in the top 5 positions)
66K+ backlinks
PageSpeed Insights Scores are 65 mobile and 97 desktop
WebPageTest load time is 2.7 seconds fully loaded

This one is a good example because you can see that the mobile PageSpeed Score is on the lower side of average but yet the page speed is 2.7 seconds which is perfectly acceptable!

Here are just a few of the items that the website is showing are issues on mobile and why they may not even be fixable.

1. Under eliminate render-blocking resources there are some CSS and JS files that could probably be redone to be deferred or asynced, but he did not bother – that estimated .14s in savings is probably not worth the work.

2. Ensure text remains visible is one of the bigger issues being reported but this is not something that most people are dealing with since many pull their fonts from Google and right now there is not way to address this issue with the Google font library. (Although they have announced a solution is coming).

The only way to fix this specific issue is to add the fonts directly to your website or use something called webfont.js – both of these will require a developer.

3. Under serve static assets with efficient cache there a number of files that are stating the cache settings are too low. These are from places like Google, Webfont and other 3rd party sources that the website owner has no control over. Nothing you can do here so this is an issue that will bring your score down with no way for you to fix it.

So, in a nutshell – most of these items that are lowering his mobile score he has no control over. Since he is loading in 2-3 seconds, they are not even really worth worrying about as it would take more time to try and fix these for little impact on the outcome for those fixes.

Website #4 – SEO Company

Low Insight scores and slower than expected load times.

Ranks for an estimated 13K (423 are in the top 5 positions)
4K+ backlinks
PageSpeed Insights Scores are 25 mobile and 58 desktop
WebPageTest load time is 6.5 seconds to document complete load

An SEO company – with horrible PageSpeed scores? Oh no!

But yet – they rank very well for most basic SEO terms in Google. Their slow page speed score and Insights score is clearly not impacting their ranking all that much.

Website #5 – Conversion Testing Software

Miserable Insight scores but fairly fast loading.

Ranks for an estimated 44K (1,500 are in the top 5 positions)
13K+ backlinks
PageSpeed Insights Scores are 7 mobile and 48 desktop
WebPageTest load time is 4 seconds to document complete load

This is one my favorite examples as this website has a dismal score of 7 on PageSpeed Insights – but yet, their website loads in 4 seconds.

Website #6 – Lifestyle Over 40 Blogger

Very slow loading, poor Insight scores but still ranks incredibly well.

Ranks for an estimated 52K (3,700 are in the top 5 positions)
1K+ backlinks
PageSpeed Insights Scores are 16 mobile and 45 desktop
WebPageTest load time is 14 seconds to document complete load

Website #7 – Mommy Blogger

Load time is fair but Insights scores are horrible yet site gets a whole lot of visitors and is growing in organic rank.

Ranks for an estimated 1 Million (28,400 are in the top 5 positions)
16K+ backlinks
PageSpeed Insights Scores are 30 mobile and 29 desktop
WebPageTest load time is 5 seconds to document complete load

By far the best example is this one. You can see the PageSpeed ratings are horrible – but yet their page speed is about 5 seconds, which is acceptable for a blog with a lot going on. When I loaded the page on my phone it was a good experience too! The site is growing in organic rank too.

Website #8 – Hosting Company (WP Engine)

This one we added solely to drive the point home that even hosts that sell their services based on page speed do not score well in PageSpeed Insights.

They have a 34 mobile and 72 desktop in Insights.

Their time to document complete is 4.8 seconds.

Website #9 – Hosting Company (GetFlywheel)

Yep another hosting company – that has great reviews and promotes site speed in their marketing.

They have a 21 mobile and 68 desktop in Insights.

Their time to document complete is 6.2 seconds.

If the above examples do not convince you that PageSpeed Insights is not a valid tool to obsess over, I do not know what will!

So you still don’t believe your PageSpeed score is not that important?

I get it – you do not know me.

I am not some super popular SEO you have heard of – I am just some schmuck writing a post you probably question up and down.

For the record – I have been doing SEO for over 12 years. I have spoken about it, I have taught about it and I have made lots of money with it. But I am not a good marketer as I prefer to stay behind the scenes.

But if you choose to still not believe me – then maybe you will believe these guys.

WP Rocket – yeah, you know the company that optimizes for speed. They don’t want you stressing over PageSpeed Insights either. You can read their article on “Why You Should Not Care About Google PageSpeed Insights“.

One of the biggest page speed issues.

Hosting! Hosting! Hosting!

This is the number one related issue that will cause low scores with PageSpeed Insights as well as tools like GTMetrix or WebPageTest.

It does not matter how many other things you fix, if your hosting is bad your score will always be low. Changing hosting companies is typically the first recommendation we have regarding clients who are suffering major speed issues.

STORY: We recently helped a client migrate their existing website to a new host because they were having major issues with site speed and could not figure out why. When they reached out to me they had load times that were always over 15 seconds. We moved them to LiquidWeb – and although they chose this host after doing their own research it is our preferred host as well.

Once moved – their load times were at 1 second.

NOTHING else was done to this website other than a migration. They already had a low page size and minimal requests as you can see below which is why we told them to just move to a new host.

They did. Now they are happy!

What PageSpeed Insights is good for!

A whole lot of things!

While we do not encourage you use it to look at those meaningless scores – we do encourage you to review it to see areas in which you can improve your website.

Below is a rough outline of the things it will give you scores for and just a rough idea of how you can deal with them.

We will be doing a more in-depth post soon about each of these items.

Eliminate render-blocking resources – this is your files like CSS and JS that are blocking your page from loading fast. Recommendation is to defer them to the footer and in most cases this will be enough.
Remove unused CSS – this one is tricky and if you do not handle this correctly it can break your website. Basically it is telling you that there is CSS being called that is not used on the page or is being called too early in the page load. Like footer specific CSS. To handle this you would need to separate out your CSS into different files and have them served up differently.
Reduce server response times (TTFB) is how fast your server is sending a response for Google to deliver the page. This can be affected by your code, host, plugins and so much more.
Serve images in next-gen formats – this is a new and most are not even familiar with it yet. There are a few plugins that do this – but it is not mainstream yet.
Efficiently encode images are images that can just be reduced in size with better optimization or compressions.
Ensure text remains visible during webfont load is something new and since most use Google fonts for fonts there is not much you can yet. Google fonts is changing some things so this standard can be met but it is not ready yet. The only way to handle this specific issue is to host the fonts on your own website and call them in a way you can load them to display on load.
Serve static assets with efficient cache policy is one of the hardest ones to meet the requirements for since many of the files they show as not being cached are pulled in from 3rd party websites – which we have no control over the cache for. Like Analytics or ads and even some plugins that pull in JS from other websites.

There is so much more – but we will follow up in the future with another post and video to help you be able to handle most of this yourself.

What is a good page speed for a website?

As a guide we suggest 2-3 seconds should be your target. Also remember to to test NOT just your home page – but some of your inner pages.

At what speed does Google penalize websites for speed?

There is no exact page speed that is a “trigger” for you to lose rank or even visitors. Google released the “Speed Update” that started in July of 2018 and focused on mobile was instilled to get website owners to offer better mobile experiences.

In their own words they clearly state they will still deliver a slow page if it is relevant to the search query.

The “Speed Update,” as we’re calling it, will only affect pages that deliver the slowest experience to users and will only affect a small percentage of queries. It applies the same standard to all pages, regardless of the technology used to build the page. The intent of the search query is still a very strong signal, so a slow page may still rank highly if it has great, relevant content.
Google 2018

Are you convinced yet?

Has this post helped you understand that this tool is just a guide to help you improve your website but not a make or break analysis for your future success?

Bark at us and let us know!

Jill Caren

Meta Description Example + Writing Guide

Confused by what a meta description is and how you should be using it? Well, this guide will help clear up your confusion and show you how to create a great meta description.

Contents

What Is A Meta Description?

A meta description is a short summary, usually 160 characters or less, that is shown in the search results and gives a searcher an idea of what your page content is about. One part of our organic SEO services is to write meta descriptions that improve conversions – as well as title tags since they go hand in hand.

Below is an example of what a meta description will look like in the search results:

Sample descriptions in the search results.

In the code of your website your meta description will look like the below:

<meta name=”description” content=”Looking for a new website for your Non Profit or small business? Look no further than NJ based 2 Dogs Media. 10+ years of experience doing what we love!“/>

Do I have to have a meta description?

Simply stated – YES! You need to have a meta description! While it does not impact SEO directly – there are so many other benefits to having meta descriptions and there is a belief it has some type of indirect impact on organic search ranking.

Do Meta Descriptions affect my rank?

It has pretty much been clarified by several sources that a meta description is not a direct ranking factor but may offer a better user experience. It will not improve your website ranking in the Google search results but it may help with your click-through rate which in turn might help you rank higher because Google will see it as a highly relevant result.

Meta tags may have some direct rank affect in other search engines though (like Bing or Duck Duck Go for example) so we do highly recommend always writing a well optimized meta description that includes a keyword for every page of your website.

Will they always use the meta description I write?

No, the search engines will not always use the meta description you write and may pull it from your page content instead.

Below we show an example of how sometimes Google will actually pull content from your page as opposed to the actual meta description you write.

We did a search for “how to stop my dog from barking”.

One of the meta description results was for the Humane Society and you can see their pulled meta description highlighted in yellow in the image below. But if you read it – it is a bit confusing right?

This is not what the website intended to be the meta description – it is what Google pulled.

Sample of Google pulling content as the description.

Below is the meta description as shown in their source code – the one that they WANT Google to use, but you can see that what is entered below is clearly different than what is being returned in the image above.

So, why was this description meta not used by Google?

It has the keyword “stop your dog from barking” – it talks about the website content and appeals to me as a searcher, it makes sense for it to be a meta name description.

The ONLY thing we can possibly see as an issue is the fact that is is using 233 characters as opposed to a recommended amount of less than 160 characters. We do not know for sure of course, but it seems plausible – if this was our website we would change the meta description to be shorter and see if Google picks it up in the future.

You can also see a bit more about this in a meta description case study by Ahrefs which talks more about how often Google changes the meta description.

Is there anything I can do if my preferred description is not being used?

If Google is pulling a different meta description, then there is probably SOMETHING they feel isn’t properly representative of your actual page topic or it does not fit the query.

There are no definitive things you can do unfortunately – but you can try the following.

Make sure the meta description you have written is not a duplicate for another page.
Rewrite the meta description completely to be better aligned to your content.
Make sure you do not have multiple meta descriptions being generated on your website. Sometimes multiple SEO related plugins can cause issues and duplicates.
If your meta description is shorter than say 125 characters or longer than 160 characters – rewrite it to fit under the 160 characters range and see if it gets pulled.

Simple tips to write meta descriptions that engage and convert.

Keep the meta description length to approximately 135-160 characters. There is no longer a true magic number since Google will choose to show as much or little as they would like, but this has been a good character number overall – and writing more than that can result in truncation or the possibility that Google may pull different text entirely.
When you write your meta descriptions include a call to action! Give them a REASON to come to your website. “Imagine spying on your competitors without them knowing. Try our software for free today.” is just 1 example of a great meta description with great action statement to improve you click-through rate.
When you create your meta description – matching the page topic is critical. Make sure whatever your meta description says – emulates what your post is about since that will make a difference in the search results.
While some may say it is not relevant, we do recommend including your main keyword in your meta description. It may improve the chance Google will use your preferred meta description and some search engines also highlight relevant keywords improving the chance of being clicked on.
Make it conversational! Imagine how you would tell a person about your page and work with that for your meta description.

Meta Description Examples That Rock!

Meta descriptions that entertain, have a call to action and tell us clearly what the page is about are hard to write – but these meta description examples do it well! A good meta description like these – usually show really well in the search engines when written in conjunction with amazing user-intent driven content.

If you can write meta descriptions as good as these your search result will be a lot stronger than your competitors!

PrimeWomen

This is a good meta description because it clearly defines the demographic they are targeting and the issues that the demographic faces with maturing skin. Tells me clearly how I can look radiant and fresh!

Outside The box

A local company that creates handcrafted tables from locally salvaged wood. The meta description does a great showing exactly where they are located and what you can expect to find on the website.

Mailchimp

When Mailchimp realized people did not always get their name right – they did what any creative marketer would do an embraced it by creating a page about it. This is one of our favorite meta descriptions examples – it makes us laugh and makes us curious about what the page has on it.

Chipotle Mexican Grill

Plain, simple and to the point is what makes this a great meta description! You want Chipotle, then this is the place to go. It speaks to their users and appeals to their simple side!

Ruffles

These guys were a no brainer is a contender for our meta description examples list and hopefully you can see why! It makes us laugh and appeals to our lighter side – and like any meta description tag should – makes us want to click.

DogTime

This dog blog did a great job writing a meta description for their post about litter boxes for dog. Starting with a question gets your curiosity up and then following up with how the product can help a certain demographic is a perfect way to get people to click to read more.

Taco Bell

Reaching out to users by showing they understand you are unique – and offer options for you at their restaurant is a great way to build a sense of “understanding” of their consumers. They also managed to squeeze in a recommendation to sign up for offers in their meta description which is a really great idea!

Live Science

We did a double take on this one because it did not seem real at first, but it is and it is funny as all heck. Do not be afraid to be funny! This is another good meta description with so much personality and a great title tag as well.

Lonely Planet

The Lonely Planet meta description reaches out to you by asking a question first – then clearly defines everything they do to help you plan your travel. It is personal. descriptive and perfectly fits the recommended character amount.

Scary Mommy

This meta description is super engaging for a specific blog post about raising teenagers. It appeals to me as the mom of a teenager in wanting to see her experiences and it is witty and sarcastic (of course not everyone responds to sarcasm but it works here because her blog is sarcasm based) – and she shares her credentials too which is important these days. This meta description would definitely make me want to see more about what the web page has for me.

Unique Vintage

Right off the bat we see the Free Shipping deal and know that they have vintage pieces for all occasions – so they are clearly showing searchers what they offer. This meta description example also shows how a shopper can get free shipping which is a great way to get a user to click through.

Pig Placement Network

This is a great example for a nonprofit. They first ask about me and what I want – then tell me how they are going to help me and even recommend what I should read first. Just a great use of space!

Roasty Coffee

Love this meta description as it addresses a problem with a little creativity. When is the last time you heard the word “kaput”? But it tells me exactly what the post is about in a fun way. It immediately catches the eye when scanning the page.

Puffins Cereal

Puffins understands what their customers want! It is clear in the description that while kids will love the sweet cinnamon taste – moms will love the high fiber and low sugar content. This is a perfect example of writing for your perfect customer to get their interest.

Brooklinen

Simple and to the point! They clearly state what they do and how they do it in few short words. The addition of the word luxury immediately tells potential customers they can expect nothing but the best!

Blue Door Boutique

This meta description features a perfect combination of informational and engaging to encourage clicks is what makes this example awesome.

Gimme Some Oven

When we see recipes in the search results we often see descriptions that are pulled from the recipe ingredients or instructions which is a poor user experience. This website did a great job of telling me that this recipe is easy to make, tastes yummy and includes freezing directions!

Good Housekeeping

We love that they are sharing the different type of people that can benefit from the heated gloves they are talking about as well as how they will be “appreciated”.

Test Your Meta Descriptions & Page Titles

Before you post your meta descriptions -TEST THEM!

Make sure all meta descriptions look good and sound good. Read them out loud!

This free tool is a great way to do a quick meta description test: https://totheweb.com/learning_center/tool-test-google-title-meta-description-lengths/

Another highly recommended thing to do is A/B Testing your meta descriptions. We have just started working with A/B Rankings and are very happy with their platform so far.

You can get a 14 day free trial to test it out here.

If you prefer the free way of testing meta descriptions then you can do the following, which is how we have been doing it for years.

Dig into the Search Console to find keywords that rank well and get a lot of impressions but low click thru rates.
Create a spreadsheet with columns for date, meta description before and after and any other notes you would like to take.
Change your description to a new version but make sure you put the old version in your spreadsheet.
Wait about 30-60 days to see if the CTR for that post or page has improved. If so, keep the new one you created.
If the page or post has dropped in CTR – then put the old meta description back or try a new version.

Complete guide to meta description writing for search engines.

Jill Caren

ThemeForest: A Cautionary Buying Guide

We are going to start off saying we never recommend Themeforest WordPress themes and do not work on any websites that use them.

But we know people are going to use them so we wanted to outline how to properly vet a theme and why we highly recommend you actually choose another option for creating a website.

There was time back in 2018 that we had seen 3 issues with different website owners that have utilized a ThemeForest WordPress theme purchased from Envato market within a 1 week period.

Each issue was unique – but the common factor with all the issues was the theme they were using – they were all purchased from ThemeForest on Envato market.

This was about the same time we decided to no longer work on any websites that had a Themeforest theme installed.

We believe WordPress consultants and agencies have an obligation to provide clean, well coded WordPress themes to their customers – but when it comes to ThemeForest, this is not always what you are getting.

That is what prompted us to write this post – to help you see the side of ThemeForest no one talks about!

We are not bashing every theme on ThemeForest — we are sure there are some good ones on there, actually the one we profile in this post is not that horrible — but to have to sift through all the bad ones to find them is a chore.

Because it is so easy to start selling on ThemeForest it makes it more vulnerable to web design themes that may not be as good you hoped. While the standards for selling on the marketplace have been tighter in recent years, there is still a risk that you will take when purchasing one.

Then there is also the fact that most non-techies will not know what to look for to determine whether a theme is good or bad. This is where we come in!

Contents

What Is ThemeForest?

If you do not already know, ThemeForest is a huge marketplace of pre-made themes for sale for a variety of CMS platforms as well as HTML websites. ThemeForest is owned by Envato which has several different websites under its brand like CodeCanyon, AudioJungle, GraphicRiver and more.

They are a leader in the marketplace – but those that typically purchase themes from them are not aware of the dangers that are lurking in many of the themes that are made available on the site. The WordPress theme you may be eyeing up may look all pretty – but behind the scenes may be something scary.

There are themes for ecommerce, businesses, portfolios – everything you can image! No matter what your business or niche is, there is probably a theme that may seem perfect for you.

My Experience With ThemeForest

Yes, I personally have had many themes purchased over the years from ThemeForest…..I have never used them for website clients and never will – but for my own personal use they were fine for what I needed. I have purchased photography themes and blog themes mostly – so I know first hand the good and the bad.

2 Dogs Media has also helped several people who had ThemeForest themes that just stopped working – mostly due to lack of updates and compatibility issues with plugins. Some of these were ecommerce websites which had issues with the latest Woocommerce plugin version so those were much more complicated to resolve.

In period from about 2017-2018 or so I have personally seen some level of improvement, but am still leery of using them for anything other than personal use.

Why Is It So Popular?

It is simple – the themes are a hell of a lot more affordable than a custom developed website and by gosh most of the themes on there are well — damn pretty to look at.

The theme creators do a great job at marketing WordPress themes by making them look gorgeous and flexible for a variety of uses (a multipurpose theme they call it), but that is part of where the trouble comes.

There is a thing called having “too much”!

They have themes for any niche — and come with all the bells and whistles you can ever need. All this for the low low price of oh let’s say $68 or so.

To unsuspecting website owners – they get a great looking website with lots of great features for one low price.

What is not to love?

Well, we are going to tell you.

And just like a friend….we are going to hopefully help you see why you should not consider ThemeForest if your business is important to you!

THE GOOD: What To Like About Themeforest

Of course affordability for what looks to be an amazing website design is why most people are drawn to Themeforest. You can get a killer design with all the modern bells and whistles at a fraction of the cost of a custom designed website, and of course we see the appeal of that as an option!

Typically the designs are gorgeous and are filled with wonderful imagery and font use and “modern” touches like moving parts that really drawn you in.

If you are looking for simple website for a business as a “place on the” web to visit like a restaurant or band or other business that has a following and just needs a quick website to promote your latest updates, Themeforest is a great option.

Envato market also has a large global community that can really help you in terms of support with managing, creating and updating your theme.

If you have a business that you are looking to grow long term and will need to grow with you – then for the reasons below we cannot recommend it.

THE BAD: 6 Reasons To Avoid Themeforest

1. Branding Concerns

When it comes to a website – no two should really be alike. Every business or blog has its own unique personality, target market and goals. In our opinion – using a template that looks like hundreds of other websites is doing your business a disservice.

For example, one of the biggest sellers on ThemeForest is Avada with over 300K themes sold. While you can customize it quite a bit – most do not because it is not as easy as they make it seem, so many websites using this theme all look the same. Just some food for thought.

2. Code Bloat

One of the largest issues with many ThemeForest themes is all of the plugins that are needed to run the theme. In the past a lot of theme developers used to actually not even separate the plugins from the theme code – but thankfully that has changed.

But many themes still require you to download several plugins to have the theme working properly – many of these plugins are from CodeCanyon and run off the theme authors development license. This means you have to rely on the theme creator to do all plugin updates as well as theme updates since you will not be able to access the plugins personally.

Here are some examples:

Some have custom plugins written by the theme developer which may not work with any other theme — so in essence if you change your theme in the future, whatever functionality that plugin is offering may become obsolete. See screenshot below which shows the “Goodlayer” plugins that are required. Those are author written plugins and will not work on other themes.
Visual Composer — it is a bulky plugin that requires a lot of memory to run and has had its fair share of complaints for speed and lock up issues. It is also a plugin that inserts “short codes” into your content when you use the creative layouts. So if you do remove it at some point and want to use the default WordPress editor – you will be left with a lot of short code to remove.
Layer Slider and Revolution Slider are 2 others that are often included – both of which we are not fans of either for coding and load times. There was even an issue several years ago with Revolution Slider having a big security vulnerability – and if you had one of these themes, you would have to wait for an update the theme in order for your site to be secure. When a vulnerability like this happens in a plugin you want to be sure YOU can control how fast it gets fixed and not have to wait on a third party.
Many of the themes include WooCommerce and BuddyPress — most will never need these, but the code is there whether you need it or not in turn affecting site speed and number of files required.

Here is a peak at the plugins that were required for our test theme we used for this article – this is actually not too bad, but the plugins are custom from the theme developer – which like we mentioned may cause issues if you move to a new theme or custom built.

You can see they also REQUIRE Contact Form 7 — which may not be the contact form you want to use. While you do not necessarily HAVE to install this plugin…the nagging notice below will probably never go away.

Another common coding issue in ThemeForest themes include custom post types. For example if you have a limo website you can have a “cars” post type -if you have a business website you can have an “employee” post type. But often the authors of themes will code these post types right into the code – when you change themes then these post types will disappear and you will need to do them over in your new website.

A better scenario is for you to use a plugin to create these post types like Advanced Custom Fields – or even a custom plugin with your post types that you can easily move to a new website. Hardcoding them into the code is a bad idea!

To put things into perspective – Slobodan Mani, a WordPress guru who is very familiar with the WordPress Review Team guidelines and has contributed to that team a couple time has made this statement about some ThemeForest themes:

There’s no way around it, some of the stuff sold at ThemeForest would never, ever make it into WordPress.org repository of free WordPress themes. Let me say that again: Some of the themes sold at Envato are not good enough to be given away for free.

Then there are the hundreds of included fonts, color changers and other backend tools that just bog down your website. Styling should be done through your stylesheet — not with extra code to allow you to push a button.

JQUERY and JS scripts are also a common problem and can directly affect various plugins that you may install in addition to the theme – but these are more advanced issues that most website owners are not aware to look for!

3. Lacking In Updates

WordPress releases many updates throughout the year to keep your website secure, address bugs and to provide new features. When WordPress does an update – then the ThemeForest author needs to do an update to ensure that their theme works flawlessly with the latest WordPress version.

This does not always happen.

4. Difficult Setup

This is a pretty common question across the board – “Why does my ThemeForest theme not look like the sample when I install it?” Most themes are so complex that it will take a lot of work to get it to look like the same you may see on the sales page!

Even as web developers – we have found many of the themes to be pretty confusing to setup. From complex page templates to scattered admin areas and widgets – sometimes you just do not know where to start.

Sometimes the instruction that are included are also less then helpful — some we have seen were not even updated to the latest theme version in the interface so what we would see in the admin does not match the images in the PDF help file. Others you could tell English was not their native language and could be difficult to understand.

Below is a related article about how difficult it can be to achieve the look of the demo website you may have fell in love with!

https://www.quora.com/How-can-I-make-my-wordpress-website-look-just-like-the-theme-I-bought-on-themeforest

5. Theme Removals

Did you know a theme can just be be removed from Themeforest with no notice? Well, it can!

In the screenshot below you can see 3 that are in my personal account where the theme has been removed for whatever reason. Items can be removed by the author or the Envato staff for any reason — and even if you did NOT download it right away, they owe you nothing. So if I purchased Raindrop — and did not download it right away – it can still be removed and I would be out the money.

You can of course try contact the author to see if you can get the theme sent to you of course – and then there is the fact that you should DOWNLOAD the whole theme package immediately after purchase! But not everyone does – and not every theme author will respond to you if you request it be sent —– so it is something to be aware of.

So how does the removal of a theme affect you?
It means no more updates – no more support and if your theme has an issue you would have to hire someone to help you figure it out.

One thing I can say from experience very few real web developers will look at a ThemeForest theme and try to fix an issue — they will probably tell you to scrap it and start over! Some of them are just coded that badly.

6. Speed Analysis – GTMetrix

Below we are going to show you with images why we highly suggest you stay away from the ThemeForest and Envato market for your WordPress templates. Hopefully these images and small notations we add will be enough to help you see the issues clearly!

Of course this will also be affected by the WordPress Hosting you have – hosts like GoDaddy do not do as well with templates from here as some higher end hosts.

NOTE: We just chose a random premium WordPress theme we had in our Envato account – again, this is not saying every theme on ThemeForest is bad – but an overview of why you should use caution and do your due-diligence. This theme actually is a little better than some we have seen and read about in terms of code and speed, but still has some issues. Because we knew what to look for in finding themes we found one that we knew would not be that bad — but it still doubles download time and file loads!

TESTING DETAILS:

The site we are running these tests off of is a brand new site – there is no content on it and no images uploaded
No plugins at all are installed outside of what comes packaged with either theme tested
We ran the test on GTMetrix
The website being tested is hosted on a dedicated server with Liquid Web – results would probably quite different on a shared hosting company like GoDaddy, Bluehost etc.

THEME TEST 1: Genesis Framework with child theme

Load time: 1.2s (how quickly the site loads)
Page size: 156kb (how many bytes are on the content of the page)
Requests: 21 (how many files, images and scripts need to be download for the site to render)

THEME TEST 2: ThemeForest LimoKing theme

Load time: 2.5s (how quickly the site loads)
Page size: 785kb (how many bytes are on the content of the page)
Requests: 41 (how many files, images and scripts need to be download for the site to render)

GT Metrix Results Overview

So as you can see by ONLY adding in a ThemeForest theme we are adding 1.3s to the load time and and extra 20 requests for different pages of code. We have not even added any content, images or plugins that our website may need. This is a pretty dramatic increase.

While the speed itself in this specific test is not horrible — the increase in files and page size are not a good way to start off your new website.

THE UGLY: Themeforest Around The Web

Here are a few articles – that you can take a look at that will offer even more insight. Many have a rating that will put Themeforest well below where we would want to see a theme be rated.

Be sure to always read the comments as well – some good stuff hiding in there!

Trustpilot Reviews – 2.5 stars

https://www.mttr.io/blog/website-design/buy-theme-themeforest/

Why I No Longer Use Themeforest

What Other WordPress Theme Options Are There?

In a call I had the other day with someone – they asked this specific question! I did not realize that many website owners are not aware that ThemeForest is NOT the only place to get themes! Of course our recommendation is always to go with a custom developed theme by a reliable WordPress Web Design agency, but we do understand that cost may be a factor!

Below is a list of other recommended themes you can choose that are better coded, typically have a great rating and have a large following behind them. If we are personally using them, we have included an affiliate link. We would NEVER use an affiliate link on any service or product we do not use ourself. (Which is why any ThemeForest link does not have an affiliate codes).

StudioPress – this is what 2 Dogs Media builds all of its client websites on.
Theme Foundry Make

What If I Really Love A ThemeForest Theme?

Then by all means – buy the theme that you love – but check the rating for the theme!

We are not saying do not buy a theme from them but that we cannot recommend it and encourage you to be cautious when you do!

Here are some things to make sure you look at before handing over the money:

Research the theme developer – check what their rating averages look like
How long have they been selling on ThemeForest
Take a peak at all the themes they offer
Review the themes and see the amount of reviews they have
Look at the reviews carefully – sort by lowest first, newest etc. so you get the full scope of the reviews
Check the number of sales and how recent the sales are – the more sales and more recent sales is a decent sign
Do a rating check on the internet by typing things like “themename theme sucks” or “do not but themename” – this will help you see what people are saying
Check on Reddit and Quora – do a search for the theme name and see what pops up

Jill Caren

A Page Audit Case Study Using Website Auditor!

You have heard this a million times before – content matters!

Seriously, it does. Bad content or low quality content can ruin your website.

Thankfully there are so many tools out there to help you assess how your content stacks up and to help you better optimize things.

One I often mention because we love it and use it here at 2 Dogs Media for every website audit and SEO project we do is Website Auditor by Link Assistant.

So, we decided to put a piece of the tool through a test with two of our posts to see if it can really help you improve your rank! This test will solely be focusing on their content analysis tools – so let’s get testing!

DISCLAIMER: We understand that this is just a 2 post test but we think this will help determine if the tool does offer some value. We will add more tests as we optimize more pages.

Contents

Post 1 Test

The page we will be using for this case study is focused on how to remove outdated website content and was originally written on April 6, 2016. When I originally wrote the post it was specifically for our clients, we were not focused on using our blog as anything other than a resource for our clients.

You can view the post we are testing by copying the URL below. We did not want to directly link to the post and have any chance of altering the results of the test.

https://www.2dogsdesign.com/cleaning-website-content

This specific post I did update in December 2018 and you can see in the below image that I did manage to get some organic ranking but traffic still sucked.

Clearly there is something more I need to do so I figure why not use this as a chance to do a case study and see how the Page Audit tool in Website Auditor stacks up to really help improve rank.

The Keyword We Are Targeting

You can see above that we have seen an increase in keywords ranking from the update I did late last year but not enough to bring us organic traffic.

My goal for this post is to get a core keyword ranking in position 1-3 that will bring us organic traffic. The keyword I am focusing on is:

Remove Outdated Content

According to Ahrefs we are ranking at position 30 for that term at the start of this test on May 13, 2019 – this was also confirmed in the search results as well.

But let’s see if the Website Auditor recommendations can get us to the top!

While this may not be a perfect intent keyword for this post since there is a tool by this name, we still wanted to give it a shot and see what the users say!

Reviewing the Page Audit tool in Website Auditor

The above shows where we are ranking based on Ahref’s while the below shows you where we have been ranking for our target keyword for the last 6 months.

You can see we never got much higher than 30 in the last 6 months.

Rank status for test keyword for last 6 months.

The Website Auditor Content Analysis Results

So, now I know what page we are optimizing.

I also know the keyword we want to rank for.

I will head on over to Website Auditor and let it boss me around a bit and tell me what to do.

Once I get to the Auditor I will fire up my website and then go to the Page Audit area of the tool. I then click Add Page and select the page I want to optimize, then I am presented a box where I can enter the keyword(s) I want to rank for and click finish.

In just a minute or so I will be provided a screen like the one below with a whole bunch of fun stuff to get through to help me kick but in the rankings.

Important things to take note of below.

My overall optimization score is 26.2% for this specific page with the term “remove outdated content”. This is pretty bad.
You can see the red X circles telling me where I am hurting the most, the yellow triangles tell me there might be something I want to change that may be important, the blue are informational warnings about items that you may want to address and green means I am good.
You can see in the right area under keyword count that I am not using the keyword anywhere – so of course that is an issue!

Clearly I have quite a bit of work to do – and this is just an overview of the initial components I need to fix.

How to use website page audit tool to increase ranking.

TF-IDF Analysis

The next part we will focus on is the TF-IDF analysis report which is an amazing tool that will allow you to compare your website content along with those of your top ranking competitors.

TF-IDF is a pretty in-depth mathematical equation and we are not going to go all math nerd here – but if you want to learn more about TF-IDF you can go here.

Some do not think TF-IDF is a thing that helps rank, others swear by it – so this test will be a bit interesting since we will be using it to test this post.

The top section of the report below shows a list of keywords – these are keywords that my competitors are using in addition to the main keyword we are targeting.

Each column is giving me an idea of how many of my competitors are using those specific terms as well as a personal recommendation for what I should do with my own post.

The bottom section shows the top 10 competitors ranking for the keyword I want to rank for along with the word count of the page and the TF-IDF ranking so I can make sure my own content is within an average of where everyone else.

Let’s talk about the columns in more detail.

You can see in the screenshot I have the keyword we are targeting highlighted in the top section.

In the first column to the right of the keyword we have # of competitors and it says (10) – that means 10 of my top 10 competitors are using that term.
The second column is TF-IDF for may page which is 0, because I am not currently using this exact phrase anywhere on my page.
Third column is TF-IDF (min) and the fourth column is TF-IDF (max) which are telling me the minimum and maximum frequency of that keyword being used in the top 10 results.
The fifth column is TF-IDF (avg) which is the average frequency of the keyword. This is what our goal is to optimize for. So currently I am at 0, but I want to target about 30 to be in sync with the top 10 listings.
The sixth column is Keyword Count (your page) which tells me how many times I am using the keyword on my page. I have a big fat 0.
The seventh column is what Website Auditor is recommending I do – which of course is to add the term to my content.
The last column is Keyword Count (avg) which is telling me the average number of times the top 10 competitors are using this term in their content.

Now if you jump down to the bottom you can see the top 10 competitors and it will also tell you how many times each competitor is using the keyword, what their TF-IDF is and the total word count of the page.

Important Note About Word Count!

The total word count is inclusive of all content so it can have sidebar text and things as well – so this is not a perfect number, but a guide for you!

As an example – the tool tells me I have 2,771 words in the body but my word count in my editor is 1,953 – so clearly it is probably counting comments and maybe other items as well.

Important Note About Recommendations!

Just like the word count issue – the recommendations column for the TF-IDF section uses keywords from all over the page. So it might tell you to use a specific keyword less – but that keyword may be a category or tag you are using and you cannot really delete those.

So use the tool in a way that makes sense!

Changes I Made To The Post

So below is a complete list of every change I made to this post.

Every one of these was a suggestion from Website Auditor.

Post Title was Deleting Outdated & Low Quality Website Content changed it to Remove Outdated Content From Your Website For Quick SEO Wins
Changed Title Tag from Deleting Outdated & Low Quality Website Content to Remove Outdated Content & See What Happens [Hint: It is Good!]
Changed Meta Description from Website or blog content feeling outdated? See how you can handle your content to keep your website healthy and relevant. to What really happens if you remove outdated content from your website? Check out how deleting over 3,000 posts helped improved our rank.
Added main keyword to alt text on 1 image
Added main keyword to body 1 time
Made other edits as outlined in Web Auditor to add or remove keywords and phrases to get “OK” in the recommendation column.
Fixed RSS page not found issue that showed in the technical factor (this will have no effect on the page, but want to be clear on EVERY change that was made).
Used the URL Inspection tool in the search console to request indexing of the page after all changes were made.

I made no other changes outside of what is listed above.

Also, there were a few changes that were recommended that I did not make. For example, it told me I should use the terms “search engine optimization” and “engine optimization” less in my post. But those terms are not in my post and those items are being pulled from our categories so of course we cannot remove those.

I also did not do any work on the other technical items like site speed or W3C validation errors at this time. I will work on those in the future after I see what the above changes bring.

We started at 26.2% optimized and at the end we were at 93.7%.

Now, we wait. I will add to this post in about 30 days to give an update so we can see how well the page auditor tool did for us!

Final page audit tool results for case study.

Results Were Immediate For This Keyword!

Sometimes the awesomeness that happens in the search results even amazes us and this is what happened today when I took a quick look to see if the post moved at all – and boy did it.

Only 24 hours later and we are on page 1.

Yep – really!

In one of the screenshots above that shows the top 10 competitors – you can see that we are clearly not there – at all.

But check THIS out! There we are at position 3 in the report below.

I searched for the target keyword in Google incognito and there I was – on page 1. I made friends test too to make sure I was not going crazy!

Below is our analytics for this page where you can see the uptick in traffic for May 13th compared to the last month and a half.

Keep in mind the post was not done until about 4pm EST so this is not even a full day.

Where Do We Go From Here?

We are going to monitor this post daily at this point!

Google will sometimes “test” posts to see if users like it, so it could be a temporary placement just to see if users are interested in it, so it is our job to make sure they do!

We will check for traffic and CTR to see if we can stick on the first page! Because we know this keyword may not be a perfect user intent keyword we may have to work a bit on the post to get it to stay put.

I will report back in about 1 month and then 6 months to let you know where we are and any other changes we made.

Update June 25, 2019

Since I know many are going to ask where we are now with the keyword, I figured we would show you! We did drop a bit – but like we mentioned above we knew going in that term is not 100% relevant since most who would type in “remove outdated content” are looking for the Google tool – not a post!

Below is a screenshot from our Search Console – you can see the purple where we jumped up in average position for the term and how immediately after that jump there was an increase in impressions as well.

Of course are click throughs are low because of the reason we mentioned above. Today we are going to revise the Title Tag and Meta Description to see if we can capture more clicks which in turn will probably help us get back to the higher positions we had!

Improved Search Console stats for target keyword.

Update June 4, 2019

As of today we are at #7 for the term “remove outdated content”. We had bounced around a bit but seem to have settled into positions 5-7 over the last few weeks. You can see below our impressions have risen and we are getting more clicks than we were.

We clearly need to test various page titles and meta descriptions though to improve our click through rate which in turn should push us closer to the top positions!

Post 2 Test

May 15, 2019 I started a second test for a much more competitive term:

What Is Bounce Rate

Rank average for the last 6 months is in the below image. 53 is the highest we have hit for this term and as of today we are at position 89.

It averages 5,200 searches a month and has a difficulty level of 71, so it is a hard term to compete with.

The Website Auditor page audit tool shows us at 37.4% optimized for this specific term before doing any work.

Website Auditor before optimization result,

Changes Made To The Post

Below are the changes I made to the post – every one of these changes were suggested by Website Auditor.

Changed post title (h1) from Why Your Bounce Rate Is Too High! to What Is Bounce Rate & Why It Can Be Misleading!
Changed title tag from Your Google Analytics Bounce Rate Is Probably Wrong! to What Is Bounce Rate? A Guide To Better Understanding This Metric
Changed meta description from If you are stressing over a high bounce rate – STOP! Find out why that bounce rate in Google Analytics is not accurate & how you can fix it. to What is bounce rate & why does it really matter? Learn more about this metric, why it can be misunderstood and how you can improve yours.
Made changes based on the TF-IDF report for keyword related terms that showed I needed more or less of. (I did not worry about keywords like privacy policy or terms that were not 100% relevant to our topic).
The TF-IDF is telling me I am over-optimized for the key term, but we are leaving it alone for now.
Submitted new updated post via the URL Inspection Tool to tell Google it is updated
Now we wait.

Below is a screenshot showing the Page Audit after our changes were made. We are now at 91.2% optimized.

Below is how the page looked in the search results on May 15, 2019. We noticed it did not show the meta description we had written, so it will be interesting to see what happens!

UPDATED JUNE 4, 2019: as of today we have gained rank and are at 62. It has been a slow climb but at least it is going up. So the test on the more competitive terms are proving a bit more difficult. We are going to rerun the auditor in a few more days to see if we can use what the auditor tells us to push it higher!

UPDATED JUNE 12, 2019: so we noticed quite a jump in the last few days and are at position 48 as of today. You can see rank positions since we redid the post below.

What is important to remember – this is a VERY competitive term, so we will probably need to do some more like get a few backlinks to help boost it to page 1. But since we are up over 20 positions in just a month we are happy with the result of this test.

Test Summary

So we figured some just wanted to see the results without all the how and why – so here you go!

Test 1

Keyword trying to rank for: Remove Outdated Content (low competition)
URL optimizing: https://www.2dogsdesign.com/cleaning-website-content

May 13, 2019 ranked 30
May 14, 2019 ranked 3
May 22, 2019 ranked 7
June 4, 2019 ranked 7
June 12, 2019 ranked 6

Test 2

Keyword trying to rank for: What is Bounce Rate (extremely competitive)
URL optimizing: https://www.2dogsdesign.com/google-analytics-bounce-rate

May 15, 2019 ranked 89
May 22, 2019 ranked 74
June 4, 2019 ranked 62
June 12, 2019 ranked 48

Final Thoughts

While this is just a 2 post test (and we will add more) – we feel confident that Website Auditor can help you get some quick wins in the search results. While onsite optimization is just a small part of the whole SEO puzzle, this tool can help you make sure you are in the best competitive position to rank well!

Website Auditor Review
Rank Tracker Overview
SEO Powersuite Overview

Jill Caren

Using Google Search Console To Boost SEO Efforts

Knowing your website ranking in the search engines is critical to understanding how well your content is doing and seeing where you can improve it.

Using the Google Search Console you can get some great insight into your estimated Google keyword ranking for your website as well as click thru rates (CTR) which can help you understand where you need to work to improve your content.

While there are other ranking tools that will give you some of this data – they are typically too pricey for most website owners. We typically utilize Ahrefs.com and RankTracker to grab this kind of information for our clients, but wanted to share a free option that will help you on the road to ranking success!

The methods outlined below are just 1 of our strategies we use to help our clients improve in the search engines, but before we dig into the how to, there are a few important things you should now about the Google Search Console.

What is Google Search Console?

The Search Console – formerly called Webmaster Tools shows you how Google is crawling your website as well as allows you to get average positions for keyword rank and see click thru rates for content. All of these will help you better understand how you are doing in the search results and provide you a guide for improving your content.

Here is a beginners guide to setting it up if you have not done so yet!

Here is a list of some of the data/services you can get out of the Search Console:

1) Check your indexing status
2) Find websites that link to you
3) Get alerts if there any issues with your website like a hack, indexation issues and more
4) Fetch as Google tool to submit new pages faster
5) Get keywords and positions

….these are just some of the more common uses, there are many more great things you can do with this toolset.

Why your website ranking being shown in the Search Console is not exact!

Before we jump into the how-to stuff, we want to talk about 1 important thing, keyword position. The keyword position that is being shown in the Search Console is not where you currently rank – but an average of where you have ranked over the time you have filtered your reports for.

So if you left it at 3 months, the position is an average of where you were in those 3 months.

You MIGHT actually be in the position that it shows – but if not there are a few reasons why.

These are a few of the variables that can affect your keyword rank position:

1) Where the person is doing a search from (country, state, county etc)
2) Whether they are logged in or or out of Google
3) Have they visited your website before
4) The browser being used
5) Google algorithm changes
6) Device the searcher is using
7) Your result may be in images, snippets, video carousels and more

There are rumors of many other things that can affect these variations in rank as well – so as you can see it would be impossible to say “you rank #4 for “this keyword”.

Here is a great example of a keyword we rank #1 for!

You can see below for our Meta Description post it is showing we rank for the term “photo description example” in position 1 – but when I look in the search results for that term, I am as of today at 18.

But, when I clicked on over to the images results in Google – bam, there we were #1!

So you may have to do a little digging sometimes to see where you may be ranking if it not obvious.

We do know is that Google takes an AVERAGE among ALL QUERIES where your site appeared. So if your keyword returns a result in Organic, Local, Knowledge Graph or on mobile or desktop – all of these things are averaged together.

You can read more about position values as written by Google to help you better understand these calculations.

Search Console Overview

Below are the steps to getting to the Search Console and an overview of what you are seeing on the landing page.

1) Go to the Google Search Console
2) In the left menu bar click SEARCH RESULTS under the performance area – you will then see a page that looks like the below.

What is all this exactly? Let’s do a quick review!

Total clicks is how many clicks to the website there has been in the time frame you are filtering for. (default is 3 months)
Total impressions is roughly how many people laid eyes on your links the search engines for the time frame you are filtering for. (default is 3 months)
Average CTR is how many of the total impressions were a click to the website for the time period you are filtering for. (default is 3 months)
Average position is the average of all your keywords that rank over the period of time you are filtering for. (default is 3 months)

None of the above are EXACT! They are averages based on more variables than you can imagine.

Below that you will then see a table of your keywords and that is where the magic is. By default only the Total clicks and impressions filter options are applied as seen below with the blue highlighted boxes.

We recommend you also click the Average CTR and Average Position buttons so you have that data as well.

You can also change the type of search you want the data for (web, image or video) and then set dates or compare dates to analyze your data for a specific time frame.

Search Console Table

The table area of the Search Results features tabbed areas that include:

Queries which is the listing of all the keywords your website ranks for
Pages which is a listing of all of your pages that have keywords ranking
Countries which is showing you a list of the countries sending you traffic
Devices tells you if you get more mobile, desktop or tablet traffic
Search Appearance shows you an special items you may rank for

The Queries Tab

Now that you know how to view the list of keywords your website ranks for – we will cover what to look for.

Analyzing the Queries

When you click the Queries tab you will see the list of all the keywords Google shows you ranking for. You can sort by CTR, Position, Clicks, Queries or Impressions to better analyze your data.

Most will want to start by filtering by position so they can see what queries they rank highest for. But we like to use the filter tool to further refine what we see so we can quickly find what we call “low hanging fruits” to gain more organic traffic and clicks.

In the below screenshot you can see 3 lines with the word filter rows beneath it, this allows you to filter the queries by an array of options. For this example we clicked Queries, then sorted them by Position and then created a filter to show only those keywords that are in position 5 or higher.

We want to see if there are opportunities to quickly improve rank for a keyword! Moving a keyword from position 5 to even position 2 can greatly affect your traffic!

Example 1

Below we see “meta tag description example” which gets about 260 searches a month. We currently are averaging position 5 and have a click through rate of 2.2%. That is not a click through rate we are happy with at position 5 – and we are also not happy being at position 5, so this is definitely a phrase we will want to do better with.

But before we make ANY changes we will want to double check how the term has been doing more recently. So we will click on it and get more data – we talk a little bit more about this below.

Example 2

Now, let’s take our term “meta tags example” as shown in the screenshot below.

It looks like we received 19 clicks in the last 3 months from results returned for that term and that our average position is 7.7.

We are not thrilled about a 1.5% CTR when we are at position 7 so that is something we will want to look at.

So when we type that term into Google the first thing we notice is that for this term we are actually result #12 (we are logged in to Google and using Chrome) your results may vary if you search for that keyword.

But this would make me feel better about a 1.5% click through rate since I know most people rarely get to page 2.

From the screen above we can click the term “meta tags example” and then you will see a screen that looks like the below. Now we are analyzing details just about this specific term. If you look at the purple line you can see that the term “meta tags example” with an average position of 7.7 has fluctuated a bit over the last 3 months. It looks like we ranked as high as 5 at one point and as low as 13 at another, which is how they get the average of 7.

You can also see the other lines as well for clicks, impressions and CTR and how you did over the last 3 months.

RECOMMENDATIONS: So for this keyword we see there is an estimated search volume of 1,000 – and the term is 100% relevant to our article so I would definitely want to update this post to try and get it to rank higher so we can grab more of those clicks!

The Pages Tab

This is one of our favorite parts of the tool and the one we use the most.

In the tabbed area you will see a tab called PAGES – if you click this option instead of queries you will receive a list of all of your website pages that have received impressions and then you can view the clicks, impressions, CTR and position on a per PAGE basis!

This is important for determining your most popular pages and where you can find room for improvement.

In the below screenshot – you can see we checked CLICKS, IMPRESSIONS, CTR and POSITION in the top filter area.

Then we selected PAGES and chose a date range of 3 months to get the results below.

We sorted our data by clicks so we can see what pages are receiving the most clicks in the search results.

Our winning page as seen below is about Meta Descriptions as it delivers the most traffic to our website.

Viewing all the keywords a page ranks for.

So I now know that my Meta Description post is the most popular but I want to see all the words or phrases it ranks for and see if I can find some I can improve on.

I just click the page url in the page above, the select the Queries tab and I will see a screen that looks like the below.

You will see the following information:

Total clicks to the Meta Description page for the last 3 months is 6.500K
Total impressions for the last 3 months is 247K
Average CTR for the last 3 months is 2.7%
The average keyword position is 27

Below that data you will see the list of queries that the page ranks for and you can see “meta description example” is the top keyword for the page delivering 1,347 clicks to the website in a 3 month period.

From here I will review the list of all the keywords that appear to see if I can find keywords that are ranking but not getting a good click through rate, or maybe find new keywords that I can further optimize my post for!

The Countries Tab

This tab shows you the countries that refer the most traffic to your website. Since we are based in the US we would expect that highest amount of traffic to come from the US – and it does!

The Devices Tab

This tabs shows the devices and how much traffic you get from them. In our case we get the most traffic from users on desktop by a very large margin. This is important to keep an eye on so you can ensure your user experience is perfect for the device that sends the most traffic your way!

Search Appearance Tab

This is a newer tool that will allow you to see different types of search results you may have like snippets or AMP pages.

Search Console Video Tutorial

Final Thoughts

Remember, this is just an overview of the data relevant to your website. Nothing in these reports are EXACT given all the variables – but this data can help you tremendously. There is a lot more to review in the Search Console and we will do future posts to help you further refine your data.

Once you have this data – you can download it for use in other tools you may use and to analyze the data in other ways. There is a download button at the bottom of every page of data so you can get an Excel or Google spreadsheet. Doing a monthly review and downloading the data can help you evaluate progress and future work that needs to be done.

Jill Caren

What Is Yandex Metrica & Should You Try It?

Not sure where this has been hiding all my life, but I am glad it found me. I am a data nerd, I have to be to do SEO and make sure I am helping my clients get where they want to be. We use a lot of tools here at 2 Dogs Media to do research and analysis – but now we have a new one that we may add to our arsenal.

We still have a lot of data analysis, research and testing to do with it before we will add it to our recommended WordPress tools list – but it is looking very good so far so we wanted to share it.

Contents

What Is Yandex Metrica?

Yandex Metrica is a free tool (and I am shocked it is free for all that it offers) – that gives so much amazing data about your website visitors that you can use to improve everything from your content to website structure.

It is basically Google Analytics on steroids.

Apparently it has been around since 2009 but I only recently heard about it and tried it out. The short time I have been using it – I have fallen in love.

This post will cover how to install Yandex Metrica and show you some great information you can get from it.

Creating A Yandex Metrica Tag

While there is a plugin to install Yandex Metrica we always encourage website owners to limit plugins and install things without them when you can and that is what you will find below!

Create a Yandex account here
Once you have created your account, you will need to create a TAG that you can place on your website and you can start that here when you are logged in to your Yandex account. See screenshot below.
Tag name: This is what will show in the admin – usually can just be your website name – ours is 2 Dogs Media
Website Address: Enter your URL but do not put http:// or https:// in the field just your domain like 2dogsdesign.com
Time Zone: Select your time zone
Session replay, scroll map, form analysis: I highly recommend turning this on so you can see how users interact with your website.
Click the create tag button

Installing Yandex Metrica Code

Once the above is done you will be directed to a page that has the code you will need to install on your website as shown below. There are a few different places you may need to place this code depending on your theme setup.

If you are on Genesis – go to GENESIS > THEME SETTINGS and place the code in your header script block
If you use a standard WordPress theme that has a header.php file you can place it in that file before the closing </body> tag
If you have another theme you will have to look through the documents for it to see how to add it
Click Start when you are done

You will also see a “configure goals” link next to the start button which is a whole other level of awesome!

Once you click Start – Yandex will begin processing your website to get the data it needs.

The Data

Once you are all installed and setup – the data will start pulling into your account and you will soon see some amazing metrics. For you data nerds out there this will be heaven!

There are several sections to the dashboard and below we are outlining what you will find in each.

Reports

Just like any other reports there is a whole lot of data you can pull from the Metrica tool. There is a collection of premade standard reports like:

Traffic
Conversions (if you set any up)
Sources
Content
Technology
…and more

But you can also add your own custom made reports and even tag them as favorites for easy access later.

Maps

Map data will only be provided to those that allow their websites to be show in an iframe. If you have included code to disable this feature then the maps data will not be collected for you.

Click Map – this will show you how uses are clicking on your website – whether there is a link there or not.
Link Map – this will show you the popularity of links on a page and will show the number of clicks and the percentage of clicks out of the total for the page.
Scroll Map – shows where users are paying extra attention to a page with a color coded guide
Form Analysis – shows form conversion rates and how forms are being filled out so you can see how many people view and submit the form as well as how many leave the page and how much time is spent interacting with fields.

Session Replay

This is the part we found magical!

Session Replay actually records how people are using your website. So you can see exactly how users are scrolling and clicking through your website content.

In doing our own session replay we learned that people are clicking on the images on our home page – but they are not links. So, now we know to go make them links since the user expects them to be.

This is one of the main reasons to use this tool! To see exactly how visitors are going through your content will help you tremendously in writing better content and formatting your pages to fit how users are using them.

Goals & Filters

Goals and filters are all part of the tool as well. Goals you can set up when you create the tag and you can set filters to remove content that you do not want to report. Like sessions from you or your team members can be filtered out.

The Video

We hope this video will give you a good overview of the tool so you can see if it is a good fit for your organization.

Have You Used Yandex Metrica?

Have you heard of it or use it? We would love to hear your thoughts!

We are looking forward to diving deeper into this tool and hope to get some tutorials coming your way!

Ahrefs & SEMRush Dashboard Overview

We have been getting asked more and more about which is better Ahrefs or SEMRush – and while both are fantastic we are die hard Ahrefs users and will remain that way for the foreseeable future.

The video below is just a very low level review of both tools so you can see the dashboards of each and get a feel for the data it delivers.

They both do a lot of the same things including:

Keyword Tracking
Backlink Analysis
Keyword Research
Website Audit Tool

But everything they do – they do very – very differently.

Keyword Research Comparison

One of the main reasons we use tools is to do keyword research, so it is important to have a tool that can deliver. While they both deliver – one is pretty much heads above the other.

In each tool I used “dog bowl” as a keyword idea to research.

In the SEMrush Keyword Magic tool – there were 12,658 keyword ideas.

In the Keyword Explorer in Ahrefs – there were 21,057 keyword ideas.

Which would you prefer? Me – I want the one that gives me more options to beat my competitors!

I also incredibly love that Ahrefs makes my research easy with their SERP listing functionality where I can see the top 10 ranking websites for a phrase and easily see how competitive those pages are. SEMrush does have a SERP button as well but it only takes you to the search engine results page – there is no outline of great information like what you see below.

This alone is a huge selling point!

Backlink Comparison

While SEMrush and Ahrefs both do backlink reports so you can see who is linking to you, we find Ahrefs to be much more accurate and has a bigger index to pull from.

In a study done by Robbie Richards their were 65 votes for Ahrefs as best backlink checker while there were just 17 votes for SEMrush.

The Costs

Both are costly – that is a given for what they do. You can also have one user logged in at a time if you get a plan that only includes 1 user. If you want to “share” with friends (which is probably against their terms of service so you may want to check) – you should know 1 person will get kicked out if another logs in.

SEMrush offers 3 plans: $99.95, $199.95 and $399.95 (these prices are reduced a bit if you pay annually instead of monthly)

Ahrefs offers 3 plans: $99, $179 and $399 (these prices are reduced 20% if you pay annually instead of monthly) – they also offer a 7 day trial for $7. So if you have a week coming up that you can invest more time exploring Ahrefs and getting some great ideas from the tool – this can be the best $7 you have ever spent!

It is hard to compare apples to apples with the tools because they each offer some things the other does not. SEMrush for example has some social tools where you can monitor social activity and even post – but Ahrefs does not have that.

The Video

The video is not meant to be a tutorial – but a quick overview of the 2 tools so you can see what tool is more in line with your needs and visualizations. Some love the interface of SEMrush – while others find Ahrefs better, so we hope this compiled with some of my comparisons will help you decide!

Jill Caren

How To Use WebPageTest To Improve Site Speed

One of the most important tools we use to help our clients is WebPageTest.org. There are several other options for page speed testing, but this is the one we use the most!

What is WebPageTest.org?

Webpagetest is a free tool that can help you identify why your WordPress website is slow and help you fine tune it to be as fast as possible. It offers a variety of options to help you understand where you have bottlenecks in your speed and what visitors are experiencing on their first visit as well as repeat visits.

Importance of Page Speed!

You should always be concerned with the speed of your website because it directly affects your user experience which in turn can affect your ranking. Google has also announced that they use site speed as a ranking factor. This has been disputed by some – but whether it is a direct ranking factor or not – it is IMPORTANT!

Keeping Things Simple

As you can imagine this is a topic that we can go on for hours about! We are ONLY giving you an overview of everything we think you should know and will focus deeper on ONLY the areas we think it is necessary.

This is a very technical topic – but we promise to do our best to make it as easy to understand as possible.

Why We Love WebPageTest.org

Webpagetest.org is our go to for speed test because of its flexibility and custom settings that allow you more accurate results. For this post we are primarily working with the default settings with just a couple of tweaks.

The other thing that sets it apart is that you can take multiple speed samples from your website – so for example if you take a 3 test run you will receive a 1st, 2nd and 3rd run. Then the results summary will provide an average of those 3 tests. In a perfect world your 3rd run should be faster than your third because some of your content will be cached on that 3rd test – if you find your 3rd is slower than your 1st you may have some other issues going on.

Running WebPageTest

To run a test go to webpagetest.org and enter your details as outline below:

Enter your website URL – make sure you enter your URL exactly how the default URL is. If you are https – then make sure you use that so you get the most accurate information. If you use www, then make sure you use that as well
Test Location – choose the area that is closest to where your visitors may come from. We are in NJ so we typically use New York, NY. Dulles, VA is the default option so you can use that one – sometimes there are too many tests waiting for other areas – Dulles seems to be the fastest in most cases.
Select A Browser – different test locations may have different browser options available – we typically stick with Chrome as our browser choice but IE is also a common option. Dulles, VA is their default test location and that has options for all the browsers Webpagetest works with so choose Dulles if you want all the options that are available.
Advanced Settings – this is OPTIONAL, but we like to run 3 tests and then see the First View and Repeat View – you can uncheck capture video for now too just to speed things up a bit.
Connection – this emulates the type of internet connection your visitor may have. You can play around with this option, but we typically keep it set to Cable since that is pretty standard.
Keep Test Private – this just keeps it from showing on the webpagetest.org website as a “recently tested website” – we usually keep this checked.
Click Start Test

You will see many other tabs and options – but we are not going to address those here since they are very technical. What we have outlined above is enough for a general overview of your website.

Reading the WebPageTest.org Results

THE A, B’s & C’s

Once the test is done you will be taken to a screen that has a variety of results for you to review. For this post we are only concentrating on the top area which shows letter grades and then a table with Performance Results.

Below is the top of the results page with the letters grades, let’s dig a little deeper to understand what this means.

The A, B and C’s – truth is, we do not even look at these, but if you are one who needs to have all A’s — then you can take a peak and then work on your page to improve it. Your goal is to make your website fast – not get pretty green A’s!

Here is what each of those alphabetic items mean:

First Byte Time – the time it takes for the server to respond to a user navigating the page, this is most commonly the backend time needed to build the page and often hosting plays a big part in this being too slow.

Keep Alive Enabled – in simple terms it is a communication that happens between the web server and browser that says “hey, you can grab more than one file at a time” – this allows multiple files to be retrieved at once otherwise one file would be downloaded at a time which would make it even longer.

Compress Transfer – basically this is a signal as to how big/small your file sizes are. If you have GZIP compression enables you should be good.

Compress Images – images are one of the biggest issues on most websites and by compressing them you are making the website smaller and removing image meta data which can greatly improve speed.

Cache Static Content – content on your website that does not change often – like images, javascript files etc. can be configured to that the browser that the USER is using can store them so when they come back to your website they can just use the copy stored in their cache instead of waiting for your website to load it. This is incredibly helpful on return visits.

Effective Use of CDN – if your website is using a CDN (Content Distribution Network) it will be reflected here.

Understanding Your Performance Results

Performance Results (Media Run)
This table gives you the AVERAGE load times of the 3 tests we ran and returns the averages for the First View and Repeat View.

First View is emulating a test of a person visiting your website with a browser that has its cache and cookies cleared out, it is basically a person visiting your website for the very first time.
Repeat View is done right after the first view and represents what someone would see and how fast it would load for someone who came to your site – left and came right back. The repeat view SHOULD be faster than the first!

Understanding the speed performance metrics above:

Load Time or Document Complete Time: First View: 3.468s / Repeat View 1.252s
The point at which enough is loaded to have some sort of interaction with the page – most images and code is loaded and users can scroll and interact with the page.

This page took 3.468 seconds to load all the content it needed to render the page including CSS files, images, Javascript files, 3rd party scripts etc. on the first visit and 1.252 seconds on the repeat visit. The lower time on the second visit is what we want to see!

First Byte: First View: 1.250s / Repeat View .9777s
This is the time taken on the server side to display your web page. This has nothing to do with your files on your website – it is strictly a server related result. You would want this to be no more then 200-400s

Request: First View: 32 / Repeat View 2
This is the number of images, JS and CSS files and other elements that the server needs to pull in to display the website. While there is no right or wrong number – typically the lower the better.

You can see on the repeat view only 2 request were made – this is because of “caching” where most of the content is stored in the users browser.

Start Render:First View: 3.191s / Repeat View .874s
How long it takes for the browser to start to pull and display the content of the page or the point where a white page is not longer showing.

Fully Loaded: First View: 3.562s / Repeat View 1.252s
The full loading time of the page. This includes all tracking code, ads etc.

Speed Index: First View: 3381 / Repeat View 1122
How fast your site is – a lower score is better – this is not a metric we focus on too much but we have seen that a target goal is under 1000.

Target Page Speed

As a GENERAL GUIDE you would like to see a website load time of no more than 2 seconds and a first byte time of less than 500ms – but 200ms is recommended by Google.

What Is A Waterfall Diagram?

The waterfall diagram on any page speed testing tool gives you an easy to read view of every resource on your website in a list format, in the order in which those resources were loaded along with the time it took to load each resource.

It is critical to analyze this information to ensure your website is running at top speed and finding the reason(s) it isn’t.

As you can imagine this is a COMPLEX and very TECHNICAL tool – we can get really deep into the who, what, where, when and why – but because we focus on writing easy to understand tutorials we won’t be doing that.

We are ONLY going to tell you what you need to understand to read the waterfall.

We will do future posts that outline how to fix items. But for now we just want you to understand what the waterfall is telling you!

Accessing The Waterfall

Run your page speed test as outlined above.
The waterfall results will load under the performance results table. Click on any FIRST VIEW waterfall result that is returned on the page after the page speed test is complete. FYI, We typically look at the waterfall of the slowest loading view time.
The resulting page will show several items including waterfall view, connection view, request details and request headers. For this post we are only focusing on the waterfall view.

Below is a screenshot of a piece of a waterfall.

What is shown above is OVERWHELMING! We get it. So we will do our best to make it as easy as possible.

Basically the waterfall is a cascading chart of each resource loaded by a browser – and in a nutshell the shorter the horizontal lines are the better!

Understanding The Colors

As you can see in the image below everything is color coded and every color has a significance.

DARK GREEN – DNS: In order for the browser to deliver your website, it has to lookup your DNS to be able to deliver the IP address properly to let the website be seen.

ORANGE – CONNECT: A TCP connection must be created before the browser can deliver your website – this should only appear on the first few rows of the waterfall.

DARK PURPLE – SSL: Any resources that are loading from a secure website will need to be processed as such – the purple will signify how long it is taking to connect to that SSL item.

The above are items that are a little more complex and may require more technical resources to fix.

The OTHER colors that appear above the actual waterfall – blue, orange, green, purple, green, red and gray are all reflective of the type of content on your website.

For example, if you see a red line in a row – you will know that is a font file being loaded, if you see a green – then you know it is a CSS file that is being loaded.

Reducing Waterfall Line Widths

For each line item in your waterfall you want it to be as low in width as possible – simply put, the less wide the waterfall is, the faster your website will load.

In viewing a portion of a waterfall for the website Playful Kitty – who we would like to thank for being a “subject” for us – we can see some really short rows – and some really long ones.

Playful Kitty is actually using Cloudflare with her website which makes things a bit more interesting! There is a lot of complexities to Cloudflare or any CDN since the content is delivered based on location so results of visits to her website will range based on location. Because this is a beginners guide, we are keeping things simple and will not go into too much detail on that – just wanted to make you aware!

Let’s review what we are seeing here:

Light colors versus Dark colors: The lighter time is the time from when the browser sends the request out on the web until the first byte comes back and makes a connection. The darker color is the time it takes to download the resource.

ISSUE #1 – First time to byte is almost 4 seconds! This is one of the more common issues which should actually could get a post of its own. But typically it is a server related issue if you are seeing the blue as it is shown here.

ISSUE #2 – You can see a lot of purple in her waterfall – lots of light purple and then small dark purples at the end. The light purple as noted above is the website calling to deliver the image – the dark is how long it took to download the image.

THE GOOD: On the good side her waterfall is left aligned – all the bars start pretty close to the left side of the waterfall which means all the resources are being loaded concurrently as opposed to waiting for one resource to load and then starting a new load.

Red and Yellow Highlights

You may see a HIGHLIGHTED row in your waterfall – and it can be yellow or red as shown in the below image.

RED lines usually reflect a 404 as seen in the example above and simply means your website is calling something that does not exist. The best thing to do is to remove the call for the element that is missing if it is not something that is needed – or add the item back to your website if it is needed.

YELLOW lines are signs of redirect issues and are commonly shown as 301 or 302 redirects. This means you are calling the resource at one URL (maybe http://thiswebsite.com) – but the resource has moved to a new URL (maybe https://thiswebsite.com). With more sites moving to https this is becoming a more prominent issue for page speed.

Both of these can greatly impact page performance, so these should be addressed as quickly as possible.

Checking Out Your Image Sizes

One of our favorite tools that we recommend to help website owners is the “View All Images” tool. This link is at the bottom of your waterfall as seen in the image below.

You can simply click on that link and you will see all of the images that are in your waterfall — but as actual images with the sizes that are reflected on the website as well as the size it could be if compressed.

This is a great way to easily see which images you need to resize or compress for faster download.

View All Image Webpage Test — View all images link below the waterfall

Video Tutorial

And because there is just so much to this I wanted to put together a brief video outlining the above as well as reviewing the PlayfulKitty website at a base level so you can see everything and understand everything in post 1 and 2 about the WebPageTest tool!

Not the shortest video – and I know a little small so we will redo it soon so it is easier to see!

Blogging & Barking

Blogging + Barking

Improvements To The Block Editor

Introduction Of New Blocks

Social Media Icons

Buttons Block

Fullscreen Mode

Welcome Guide

Inline Text Color Options

Latest Posts Block

What Is A WordPress Reusable Block?

Creating Reusable Blocks In WordPress

Adding A New Reusable Block In A Post

Accessing WordPress Reusable Blocks Area

Adding A New Block In The Blocks Area

Editing Reusable Blocks

Converting Reusable Blocks To Regular Blocks

Exporting Reusable Blocks

Importing Reusable Blocks

Reusable Block Examples

Donation Block

Affiliate Block

The Video

Keep Core WordPress Updated

Schedule WordPress Backups

Important Backup Tip

Update Your Plugins

Change Your Username & Password

Choose Secure Hosting

WP-Config.php File

Personal Computer

Use A WordPress Security Plugin

Database Prefix

Protect Your Admin Area From Unwanted Access

Final Thoughts

Jill Caren

Best Nonprofit Websites List!

NATIONAL TRUST FOR HISTORIC PRESERVATION

ROYAL CONSERVANCY

HUMANE RESCUE ALLIANCE

DOGS ON DEPLOYMENT

THAT’S NOT COOL

CYSTIC FIBROSIS FOUNDATION

PLANT CHICAGO

ONE

DIFFA

LAST MILE HEALTH

NOBEL WOMENS INITIATIVE

WORLD MONUMENTS FUND

ALLEY CAT ALLIES

GALAPAGOS

UPSTREAM

HABITAT FOR HUMANITY – FOX CITY

MEMPHIS ZOO

TEAM RUBICON

TO WRITE LOVE ON HER ARMS

THE GESUNDHEIT! INSTITUTE

LOVE146

RAW FOUNDATION

SHARING AMERICA’S MARROW

JUST ACTIONS

INTERPARES

GLOBAL FUND FOR WOMEN

VINTAGE HOPE

Planning your nonprofit website.

LOOKING FOR A NONPROFIT WEBSITE DESIGN AGENCY THAT CARES?

Well, you found us!

What Is Diib?

Signing Up With Diib

Site Dashboard

Objectives

Alerts

SEO Reporting

Keywords

Backlinks

Search Engine Indexing

Social Analytics Reporting

Take A Walk Through Diib

The Emails

Diib Pricing