Social Platforms and the Importance of SEO: A Focus on How Facebook and Twitter Award Good SEO Practitioners

If you're a web developer, who develops websites or applications, then I'm pretty sure you've heard of the term SEO. Just in case you have not, SEO is an acronym for Search Engine Optimization.

Up until before Social Websites, such as Facebook and Twitter and another myriad, were popular, SEO was mainly used to determine how well your website, websites' content ranks in Search Results. Developers were to use the unique <title> tags to set meaningful titles for different pages. This was very essential if you wanted for example "My Site is Cool | Learn How To Be Cool" to show up in the search results instead of just the url "http://learntobecool.com". They also had to put in the Meta Description, which was taken up by the crawlers as the description that appears in the search results.

In all honesty, either by using a CMS or developing from scratch, it becomes pretty easy to do this once you get into the habit of doing it. It's really unfortunate that sometimes our education doesn't teach us about SEO. I mean, they tell us about the meta and title tags, but they just don't show it in action. Sometimes, they just don't tell us that good SEO will help us. Anyhow, if you're a developer, and you've not been doing proper SEO, know that there are benefits of doing so.

The first most basic benefit is ranking high in search results. This is not a guide on how to do SEO and should not be used as a guide at all. You can find better sources of SEO online. However, I'll mention the basics, which I think are important for this article:

• Use the <title> tag to identify each page differently. Make it a meaningful title, if possible, something you think someone will search for. What would you search for? If you're making a Swahili music sheet site such as SwahiliMusicNotes.com, your Home Page Title might be something like <title>Swahili Music Sheets | Swahili Songs</title>. Swahili Songs is something that probably a lot of people search for. So use it. This is an example, do a research to learn more. IMPORTANT: This title should be unique for different pages.
• Use the Meta Description Tag ( <meta name = 'description' content ='description goes here'> ). The Meta description tag has a certain length, and this is the text that will appear on your search results. This text is important, because it's what will entice people, to click. If you don't have a meta description, who knows what the search engines will pull. Learn More about Meta Descriptions.
• There is much more to learn about SEO. Such as internal linking (linking content on your webiste that relates to another content on your website). Using title attributes for <a> tags and alt attributes for images. Internal SEO also requires that the title of your article page be at least enforced on your page. Get link exchanges to raise the popularity of your site, but also have INTERESTING CONTENT. More importantly, never have the exact same content on different pages. NOT GOOD FOR SEO. Please read more about SEO. 

Post Social Platforms, things have changed (Social SEO).
With the introduction of Social Platforms, things have changed. I shall focus this part of the article on Facebook and a little on Twitter. As if good search results wasn't bonus enough for Good SEO Practice, now you also benefit when you post your articles on Facebook and hopefully soon on Twitter.

Facebook:
Simply put, when you share your page of Facebook, by providing the URL, it draws from your site the title (<title>) of the page, and Meta Description (<meta name = 'description' content ='description goes here'>) if available. If the  Meta Description  is not defined, then Facebook will look for the first paragraph tag <p>. It will take that content and generate the preview. Now, if you didn't care to put the Meta Description or at least didn't bother to make sure that the first paragraph contained some important details about the page, then people may see conflicting stuff. I've faced this myself, and here's an example of that below.  The title is great, exactly what I wanted, the description however, was wrong. I haven't added any description to that page or others on of such kind on the website yet (No Time since it involves CMS editing and updates), but I've made a mental note to do so. But you may ask, where is that description coming from??? Well, the first <p> tag that appears on my website for this page is an advertisement about Musical Keyboards, and Technics SX-U60 is an example of one of them.

Now, of course I can remove the preview as you can see, but why not do it the right way??? It can get a little embarrassing if you don't notice till very late that the wrong description is showing. I'm still embarrassed about the above to this moment. I never noticed I could remove the preview until I started writing this article.

Here's an example of how SEO done right can help:

You may want to control what Facebook shows on it's preview for a link on your site. Facebook provides (will read) certain tags, they call them Open Graph Tags. Using these tags you can specify which text should appear as the title, description and even the image that you want to appear by default when sharing a link. Interested??? Well, I'll let you read on by yourself, trust me, it's pretty basic stuff.  I'll provide the links at the end of this article.

If you already shared your link and it was already cached by Facebook with the wrong info, and you want the correct info to show, you can let Facebook update itself after sometime, or you can go to the following link and paste your url to refresh the cache. I believe it'll work, haven't tried it myself > https://developers.facebook.com/tools/debug

Twitter:
Until this morning, I was only going to focus this article on Facebook. And then I saw something very very interesting on Twitter. I hadn't known about it earlier, because, it really is a new feature (Launched June 2012). This Feature, however, should be, or is in the process to be rolled out to everyone. If you frequently visit Twitter, then you should have noticed the Twitter View Summary option. It looks like the example below:

Which Opens to the one below when clicked:

Being able to do this, however, involves a lot more than SEO. Twitter provides certain tags that you can use. These are called Twitter Cards. Using Twitter Cards, which is really a group of <meta> tags, you can get to specify the URL, Title, description and even image for your expandable tweets. See resources below for links. But why am I mentioning it here, while it's not SEO? Because getting into the habit of doing things the SEO way, will help you easily transition into Cards and Open Graph Tags that Twitter and Facebook offer respectively.

Google Plus:
How can I forget Google Plus. No I've not. When I write about SEO, I mostly think I'm writing about Google. The main reason is because it's the most used search engine. Google Plus, Google's Social Network, also provides you the same benefits, with no extra tags (I believe, haven't researched, but it seems most likely that way). If you SEO right, the right description and titles will appear on Google Plus. If you don't have a meta description, Google Plus behaves the same as Google, it'll take the first text content it finds on the page. So while in the example above (Songs by John Mgandu), Facebook pulled the first <p> tag, Google Plus, pulled the first text content, which was in this case a drop down menu.


Resources:

To learn about Twitter's Expandable Tweets read here > http://blog.twitter.com/2012/06/experience-more-with-expanded-tweets.html

To learn about Twitter Cards (Tags), read here > https://dev.twitter.com/docs/cards

To learn more about Facebook Open Graph Tags, read here > http://developers.facebook.com/docs/reference/plugins/like/

Conclusion:
You've seen what you stand to win with SEO, so do SEO. I'm particularly indebted to my current boss, Kirk Gillis, the non-geek who taught me so much about SEO.

Making Animated GIFs using Photoshop (The simple trick many digital graphic artists I've met didn't know )

I have not met many digital graphic artists, but the two I've met, who are really good at what they do, didn't know this neat little trick for making quick Animated GIFs using Photoshop. In both occasions, I felt quite happy that I had influenced their digital art life.

Ok, you can go ahead and open Photoshop. For demo purposes, only create one text layer. The text should Read "I'm about to be wowed" or anything of your choice... lol. This is the text that will blink on our GIF.

Once you're done with that, go to Photoshop's "Window" Menu. Find "Animation" and click on it. You will immediately see a window appear at the bottom of your workspace. [I THINK CLICKING ON THE IMAGES WILL ENLARGE THEM]

Photoshop's Animation, has two modes you can work in:

• Timeline (Sort of Reminds you of Facebook, don't it)
• Frames

I've always had to do very simple animations, and Frames have always been enough for me. The timeline, I believe, gives you much more control as to when different graphics will enter and leave the animation. I've attempted to use it before, it's sweet. This post, however, will only focus on using Frames. You're free to explore the use of the Timeline on your own.

To use the Frames mode click on the Frames button as seen in the image below:

Because we want the text "I'm about to be wowed" to blink, go to the Animations Window, create a new frame. 

You should now see two frames (or more depending on how many you  created) in the Animations Window. Set the time that you want each frame to show. Then, Go to Photoshop's layers and while the second frame is selected  simply hide the text layer. You can test your animation with the play buttons at the bottom of the Animations Window. You can also set your animation to loop forever, or only do the animation once. You can also Tween, create in between animation frames that would make your animations look sleek. A vous (up to you, as the French say).

The final step is the easiest. To save your animation, go to File > Save for Web & Devices > Change the save as type to Gif > check that all is well, and then save. Your GIF is ready to "WoW" others.

Please drop me a question if this isn't very clear.

Web-optimize your images

If you're a web-developer, you probably know that a fast loading website is probably one of the most appreciated features of a website. Even more importantly to understand is that most of us (here in Tanzania) still depend on dongles for our personal computing and browsing, therefore, we don't really have that fast of an internet connection. But even for those with fast internet connection, a faster load is always appreciated.

Among the very many things that make a website load slow is the fact that some developers just don't web-optimize their images. Long ago I used to be one of those developers. I've changed now :). Simply put, if an image is going to fit in a content area of about 100 px by 100 px, then use Photoshop or Gimp or any other image editing software to resize the image to the needed size, and change that 300dpi or greater to 72 or 96dpi, which is more than enough for computer monitors. Some developers would use the img tag to resize the image, but guess what, if it was a 2MB file, then a 2MB file would be downloaded when that page loads. If you have 10 of those, that's 20 MB to download at page load. See where this is going??? 

The other thing you could do is web-optimize the image. In Photoshop, you've the option to save for web. It allows you to save an image at various qualities. Try to find an option that gives you great quality and the minimal file size, a 2MB file can easily be 10KB. Haven't you saved a lot?

Well, wishing you all the best.

Saving Midi Files on Capella or MuseScore

Tumsifu Yesu Kristu,

Midi 'files' ni ma-file madogo yanayochukua nafasi ndogo, ambayo hubeba tuni ya wimbo. Midi Files hutumia sauti ya vifaa mbalimbali, mfano, Organ au Piano n.k. Midi Files sio kama mp3, ambayo hutumia hata sauti halisi za watu wa kuimba.

IE is the best

If I was in one of those Geek Conventions, and I just announced the title of my presentation, I'd probably be booed. Some will walk away, and some will throw a tomato or an egg at me. But I'm sure some WISE geeks will stick around and listen to me.

We all know that IE has its flaws. And I will not in anyway try to downplay them. I, for sure, know that IE is slow. However, this is prejudiced to only the versions I've used, i.e. up to 8. I don't know the performance and security of >8 IE browsers.

Anyway, back to my post. I recently completed two apps. One for a client, one for myself. They were both tested thoroughly, with Chrome and Firefox. Everything was well, and since I wasn't doing anything that is known to have issues to IE, I figured my code would work.

Lo and behold. My partner went to present the project to a client. The client was using, yes you guessed it, IE. And when he did, something didn't work.... It was a jQuery ajax call. It just didn't work. I really didn't know what the problem was. However, since the ajax call took place via an onChange event of a form, I figured there was something wrong with the way IE handled the onChange event. I went around searching around the internet for solutions, when I realized I was searching for the wrong thing. I had used the onChange event earlier in the same project, and it had worked just fine.

So now, I went in search of a tool that would enable me to debug JavaScript on IE. I found this very useful tool, that I recommend. http://www.debugbar.com/ If you want to debug JS in IE, this is your tool. It saved my behind.

It was only when I used this tool, that I noticed there was a bug in the server side code that prevented my code from working in IE. Well, Chrome and Firefox ignored these, but IE didn't. IE must be saying "Who yo daddy???" lol! When I fixed the bug, it worked fine in IE.

I've also learnt, in my search for the onChange event, that of all browsers (there was no date in the post, so I don't know how recent it is), IE is the only browser that handles the onChange event as it is specified in the Specification.

Is IE the worst browser?

Saving Capella Songs as PDFs

Karibu,

Wengi tunahitaji kusave nyimbo tulizotengeneza kwenye Capella Software kama PDF.

Baada ya mawasiliano na kaka Yudatadei na research kidogo ya hapa na pale, nadhani njia hii hapa chini itakuwa itasaidia.

Fuata hatua zifuatazo kwa ajili ya kuinstall software inayohitajika:

• Kwanza kabisa, utahitaji udownload software inayoitwa BullZip. Link ya kudownload ni hii hapa > http://www.bullzip.com/products/pdf/download.php
• Utakapofungua huo ukurasa, click kwenye link inayosema "Click here to start your download..."
• Download hiyo software, na fuata maelezo yote. Katikati ya installation, software itakuomba ruhusa kudownload plugins fulani, ACCEPT THAT. Hizo plugins ni essential ili software ziweze kufanya kazi.
• Baada ya kumaliza installation, utakuwa tayari kusave nyimbo kama PDF.

Kusave wimbo kama PDF fuata hatua zifuatazo:

• Tengeneza wimbo wako kwa kutumia capella
• Ukimaliza, nenda kwenye File Menu, Kisha nenda kwenye Print kama inavyooneshwa pichani

• Baada ya hapo, utaona popup box kama ifuatavyo. Please note the red arrow:

• Kama haijaandikwa System Printer (Bullzip PDF Printer). Then Bonyeza kwenye Customize Button as shown by the red arrow below:

• When the popup box opens. Select Bullzip PDF Printer as seen in the image below kisha click ok:

• Baada ya hapo, change the quality as seen in the picture below, kisha bonyeza ok ili usave PDF yako.