404 pages: Can you fix what’s already broken?

If you arrive at a webpage which has a message starting ‘Error 404’, you might wonder what it means. Simply, it means that the webpage you have visited either has the incorrect URL address or that the content that was previously there has been removed for some reason. Either way, it can be a little disconcerting for some people.

Used to illustrate a broken page or part of a site, you might think that little can be done with a 404 page, but that’s not the case at all. In recent years, therehas been a growing trend for 404 pages being changed almost beyond recognition. They have been made to be more informative, act as extra ad space or for more leftfield purposes.

A splash of colour

Previously, 404 pages were thought of as being nothing more than a blindingly obvious message surrounded by white space. However, they can be made to be far more colourful and easy on the eye with the addition of memes, cartoons or even something like a modified message that’s either humorous or slightly apologetic in tone.

Strange though it might seem, 404 pages can also be used in the search for missing persons. With so much space to use, it kind of makes sense to use these pages for more charitable ends, especially if they’re viewed by thousands of people. If they’re used in the right way, then 404 pages can be fixed to become something far more substantial.

Here are some creative uses of the 404 page


Dawdle, Mario, 404 page,
Dawdle
Dawdle created this great Mario inspired 404 page. 
Their Princess is in another castle.

South Park, 404 page,
South Park Studios
South park Studios created this 404 page which displays the 
series’ usual humour and reflects the brand.

Cats Who Code, 404 page,
Catswhocode
Where would we be without the internet’s favourite animal? 
This simple 404 page is funny and cute.

Virgin Cruises, 404 page
Virgin Cruises
This animated 404 page from Virgin Cruises is simple and informative. 
It allows the user to find what they are looking for from right on the page.

Rarview, Chuck Norris, 404 page
Rarview
Apparently Chuck Norris is all you need on a 404 page



For more interesting 404 Pages please see a similar article on Typecast.
This is a featured post. For more details please view my disclosure policy.

Customise Your Website Images On Facebook

facebook images, tutorial, geekalicious, think geek

Up until quite recently, when you shared a link on Facebook it would have been accompanied by a thumbnail image.  In September, Facebook rolled out an update which presented a larger image dragged from the shared article which hopefully encouraged increased engagement and looked 'more beautiful' on mobile apps.  In this post Facebook give details about the optimum og:image size for your blog posts and articles.  Here is an example of such a post from the Typecast Facebook page:

example of a facebook post


But, hang on... what does "og:image" mean?  How do we know if our images are optimised to take advantage of this feature?  Why does the wrong image sometimes show up on the link when you share it?  


"og" is a command for "Open Graph" which is an official procedure that enables any web page to become a rich object in a social graph (source: The Open Graph protocol).  Facebook uses this command in its development.  Using very basic metadata embedded into the <head> section of your website you can optimise the way in which your links and images are shared on Facebook.


If you have followed a previous Geekalicious tutorial which explained about meta tags then you will already have the following meta content embedded into the <head> area:
<meta content='VERY SHORT DESCRIPTION HERE' name='description'/>
<meta content='BLOG OR WEBSITE KEYWORDS HERE' name='keywords'/>

Firstly, remember to back up your blog!.
Next, open the HTML section of your blog and find the line that says </head>.  DIRECTLY ABOVE the </head> tag you need to add the information below:

<meta content='YOUR WEBSITE NAME' property='og:site_name'/>
<meta content='THE TITLE OF YOUR WEBSITE' property='og:title'/>
<meta content='A DESCRIPTION OF YOUR WEBSITE' property='og:description'/>
<meta content='YOUR URL' property='og:url'/>
<meta content='THE LINK TO A MAIN IMAGE' property='og:image'/>

SAVE your template and then test your website using the Facebook Debug tool.  If there are any changes to be made they will show up here.



Hints and Tips


  • This method will override the use of any images when sharing on Facebook which may not be so good for blogs with continuous updates - this may only work as a temporary fix.  However, using this metadata will be great for websites who want to feature a company logo and company information.
  • In the metadata code the title of your website should be no more than 90 characters in length.
  • In the metadata code the description of your website should be about 300 characters in length.
  • In the metadata code the URL should be the main URL of your website or blog.
  • The og:image should be a minimum of 200x200px.  This will be the over-ride image that is used if the image on the article or blog post isn't the optimum size (1200x630px with the absolute minimum being 600x315px).
  • Use PicMonkey to resize any of your images.  Use Photobucket to host your images.
  • Check your meta content is active by using the Facebook Debug tool.



Hat Tip to @Sara_Saza for a link to CypressNorth which helped me to get my head around all this and to @LittleRascalRev for linking me up to the Facebook Debug tool to test everything.

Male v Female: Battle of the sexes online

social media icons
We all use social media in different ways. It might be for getting in touch with friends, talking to relatives from far-off lands or simply letting the wider world know what our thoughts are on certain topics. The advent of social media has helped to transform the way in which we communicate, but do men and women differ in their use of such sites?

A survey by Ladbrokes Bingo showed how men and women use social media, and there were a few glaring differences in terms of site choice, what they used it for and how it affects them in day-to-day life. The most eye-popping statistic to come from the survey results was that men were four times more likely than women to stalk someone online, usually via social media channels.

The look of love?

Regarding the issue of online stalking, men are more likely to stalk a love interest. As for women, it seems that they’re far more likely to stalk either a love rival or, more disturbingly, a partner’s ex-lover.  Fortunately, that’s not all the net is used for these days. Social media is exceedingly popular among both genders, but each gender has their favourites.

Women are most likely to use Facebook, Pinterest and Instagram. By contrast, guys tend to choose LinkedIn, Google Plus and Twitter. The female choices are seen as more creative and geared towards artistic types, while the male social media channels of choice seem to be more straightforward and business-like, especially LinkedIn which is meant to help boost employment prospects.

Forgetting their netiquette?

As well as stalking, there are numerous other traps which people can fall into while online. Illegal downloading is one, but it seems that women in particular tend to turn it down – 80% said in the survey that they had never downloaded any files without prior permission. The percentage isn’t quite as high for men, but they are more likely to affect their career through use of social media.

When it comes to something less punitive but still rude, using your smartphone or tablet while watching TV can be a bit wasteful and ignorant, can’t it? Many use a second device to communicate while the telly’s on, but half of women do this. Perhaps this shows that the net could be partly responsible for a lack of communication between couples and families, but we don’t know for sure.

This is a featured post.  For more details please view my disclosure policy.

Disqus Shortname

geekaliciousuk