Custom JSON-LD script to add Schema.org structured data to a WordPress site. After testing 4 highly ranked plugins I opted to write my own script to allow for complete customisation especially for custom post types like Events

**insta-embed-video**

View in Instagram ⇒

Writing a lightweight related content function for WordPress using tags to match content

Strangely, WordPress doesn’t ship with it’s own related content feature so there are a number available to download and use from the plugin directory. However, in my experience, most of these are quite resource-hungry, largely due to the fact that they build up the list of related content by string matching. This is a very expensive process and depending on the number of posts the script has to match against can lead to a slowdown in the database.

I’ve opted to write my own related content plugin using WordPress tags. Generally, a post should not have more than 5 tags attached to it. This makes the matching process much faster and less intensive on the database as tags are only ever matched against other tags attached to posts and never against the content of the posts themselves which could be lengthy.

Now this has the potential to get out of hand as tags can be easily entered by post authors leading to duplicates and unnecessary tagging which can then lead to poor relative matching. However, any professional organisation will have a publishing process and part of that should be for authors to avoid adding tags before checking if a suitable one already exists in the system.

View in Instagram ⇒

Setting up a canonical url filter to prevent search engines from indexing non-https site pages as secure resulting in the “Not secure” content flag in browsers which can negatively impact on brand reputation. This filter specifically targets the popular Yoast SEO plugin for WordPress

View in Instagram ⇒

Responsive Screen Layout Using JavaScript & CSS

Working on a new version of the website for The Corporate IT Forum, it became obvious that an adaptive/responsive screen layout would be beneficial for our site users. Usage stats confirmed that a number of different screen resolutions were in use in accessing the site and of course newer devices too i.e. tablets & pads.

CSS Fluid Layout

The new site layout required three columns with the left & right columns at a fixed width and the center column fluid. To adhere to SEO best practice, it was important that the center column, which houses the main content, appear above the two side columns for when the search engine spiders came to visit.

We also wanted to be sure that it was a robust CSS layout – to that end, the 3-column liquid layout by Matthew James Taylor came to the rescue.

Screen Resolution Breakpoints

The site is quite modular and we wanted to be smart with the presentation of multiple content modules in the center column i.e. three modules to a row if the screen resolution is ‘x’ or drop to two wider modules if the resolution is ‘y’.
The modules are styled to float left so they line up in a row across the screen, with a right-margin to set them apart from one another.
So, the next step was to identify the different screen resolution breakpoints – what resolution would require a change to the layout – and came up with the following:

  1. less than 1024
  2. between 1024  & 1366
  3. between 1366  & 1400
  4. between 1400  & 1440
  5. between 1440  & 1600
  6. between 1600  & 1680
  7. more than 1680

The JavaScript

Now that we had the breakpoints, it was time to assign each module with a suitable width on the fly, based on the user’s screen resolution, so that there would be as little space wasted as possible.

To use the DOM’s getElementById method, we had to assign each module a unique id. So each module was assigned the value “dynamicWidthModule” appended with a number as the unique identifier, so the first module was “dynamicWidthModule0”, the second “dynamicWidthModule1″ and so on.
We did this so ‘n’ number of modules can be generated, e.g. when using a CMS, where there is no opportunity to assign identifiers manually, and they can all be adjusted.

First then, before applying any function, we have to detect the user’s screen resolution which easily be done using

[codesyntax lang=”javascript” title=”Detect screen width” blockstate=”expanded”]

var clientWidth = screen.width;

[/codesyntax]

Next, based on the screen width breakpoints, set the module width and determine the number of modules per row (as explained earlier, because we’re using CSS float and margin to site the modules in a row, it is important to set the margin-right of the right-most module to zero)

[codesyntax lang=”javascript” title=”Determine module width & number of columns” blockstate=”expanded”]

if(clientWidth < 1024) { var setWidth = "350px"; } 
	else if (clientWidth >= 1024 && clientWidth < 1366) { var setWidth = "350px"; var col = 2; } 
	else if (clientWidth >= 1366 && clientWidth < 1400) { var setWidth = "393px"; var col = 2; } 
	else if (clientWidth >= 1400 && clientWidth < 1440) { var setWidth = "410px"; var col = 2; } 
	else if (clientWidth >= 1440 && clientWidth < 1600) { var setWidth = "430px"; var col = 3; } 
	else if (clientWidth >= 1600 && clientWidth < 1680) { var setWidth = "336px"; var col = 3; } 
	else if (clientWidth >= 1680) { var setWidth = "363px"; var col = 3;}

[/codesyntax]

Now, for each of the modules with the correct id, set the width and based on the number of modules per row, work out which modules should have a zero right margin.

[codesyntax lang=”javascript” title=”Set each module width & adjust right-margin if needed” blockstate=”expanded”]

var idMod = 0;
	while(document.getElementById(baseIdentifier + idMod)) 
	{
		document.getElementById(baseIdentifier + idMod).style.width = setWidth;

		if ( ( (col == 2 ) && (is_int((idMod + 1) / 2)) ) || ( (col == 3) && (is_int((idMod + 1) / 3)) ) ) {
			document.getElementById(baseIdentifier + idMod).style.marginRight = "0px";
		}

		idMod++;
	}

[/codesyntax]

Finally wrap it all up in a function and call it at the bottom of your page, or on DOMReady once all the elements are ready on the page

[codesyntax lang=”javascript” title=”The function & how to call it” blockstate=”expanded”]

function dynamicWidth(baseIdentifier) 
{
	var clientWidth = screen.width;

	if(clientWidth < 1024) { var setWidth = "350px"; } 
	else if (clientWidth >= 1024 && clientWidth < 1366) { var setWidth = "350px"; var col = 2; } 
	else if (clientWidth >= 1366 && clientWidth < 1400) { var setWidth = "393px"; var col = 2; } 
	else if (clientWidth >= 1400 && clientWidth < 1440) { var setWidth = "410px"; var col = 2; } 
	else if (clientWidth >= 1440 && clientWidth < 1600) { var setWidth = "430px"; var col = 3; } 
	else if (clientWidth >= 1600 && clientWidth < 1680) { var setWidth = "336px"; var col = 3; } 
	else if (clientWidth >= 1680) { var setWidth = "363px"; var col = 3;}

	var idMod = 0;
	while(document.getElementById(baseIdentifier + idMod)) 
	{
		document.getElementById(baseIdentifier + idMod).style.width = setWidth;

		if ( ( (col == 2 ) && (is_int((idMod + 1) / 2)) ) || ( (col == 3) && (is_int((idMod + 1) / 3)) ) ) {
			document.getElementById(baseIdentifier + idMod).style.marginRight = "0px";
		}

		idMod++;
	}
}

dynamicWidth("dynamicWidthModule");

[/codesyntax]

So, this little JavaScript & CSS combo allows the site to be viewed on most resolutions and the modules lay out accordingly.

Note : to determine the width of modules, you first need to calculate how many modules you want to fit in the center column, the width of which needs to be calculated by subtracting the total width of the fixed-width side columns as well as any padding.

SEO : Are you a ‘cool kid’?

Think back to your days in school – remember the ‘cool’ kids? How they were the most popular? Got the most attention? How everyone wanted to run with them? How your social ranking was based on who you knew and in what context?

Well, search engine optimisation is exactly the same. If your site is in the same circle as the top-ranking sites in your industry it will benefit from the association and rank well too; but if your site is not associated in any meaningful way with the industry leaders you will continue to struggle to get a better rank on the search engine results pages.

This is especially true after the now infamous ‘Panda’ update Google made to its algorithm in April 2011. This update reduced the clout of ‘content farm’ sites, sites that aggregate and list other sites based on industry or subject e.g. directory sites.

Such sites used to rank well (they were ‘cool’) and every website they listed or mentioned benefited from the high ranking as their link back counted as a quality inbound link for the destination site. But the moment Google downgraded the status of such sites, many sites listed that had no other ‘cool kid’ associations felt the pain of also falling in ranking.

So, in order to rank well in the search engine results pages, one of the most important items on your search engine optimisation checklist, now more than ever, must be to cultivate inbound links from high ranking sites in your industry.

If you’re not cool, you may not get noticed.

SEO : Marketing Silver Bullet or Long-Term Strategy?

Where Search Engine Optimisation is concerned too many businesses still believe that it is the “Silver Bullet” of online marketing and that once the web site has been optimized the job is done. However, just optimizing your site pages with context, keywords etc is not enough; these are internal factors you can directly control however there are at least a couple of external factors that require constant, long term attention :

Search Engine Algorithm Updates

It is getting harder to maintain a top 10 listing in the search engine results pages (SERPs). This is because the search engines are forever tweaking their algorithms, releasing a few hundred updates every year. With every new update, the chances are that the formula you use for achieving a good ranking for your website will need tweaking too.
And because rankings are relative whichever of your competition understands the changes and is able to update their mix accordingly is likely to achieve a better ranking post-update.

The Rise and Rise of Social

With the launch of Google+, the various new features Facebook releases every year and the waxing/waning popularity of the numerous social networks, the quality of inbound links, one of the prime ingredients of SEO, changes regularly. Every change in the social landscape and the amount of social activity that generates traffic has an impact on the ranking of your site.

Both of these factors are in constant flux and as such they require someone with knowledge and experience to keep up with them; This makes SEO an important part of your marketing mix.