Showing posts with label Others. Show all posts
Tuesday, 7 March 2017
HTML5 Microdata And Rich Snippets
HTML5 Microdata And Rich Snippets
In HTML5, you can use microdata to provide context to your raw data. How are search engines supposed to know who the author of the content is, where your business is located, etc.? All search engines see is raw text because it has no context, but Google is paving the way with rich snippets. Rich Snippets are new HTML5 attribute that wrap around some text that has a unique importance to the user. Most often you will use these rich snippets as an attribute for the span tag, but sometimes you will have an entire block of text that has a unique relevance to the user, like an author's information, where you would use a div tag. Let's look at one normal block of text first and then we will convert it to a snippet.
1
2
3
| <div> My name is Jared Drake and I write tutorials for PHPJabbers.com.</div> |
To search engines, they just see this text as is. Sure, they might be able to connect "Jared Drake" together as some type of keyword, but they don't really know what it is. The same applies for "PHPJabbers.com" and almost every other word in the text. However, we can shape the way search engines see the information by providing context to specific words. Let's look at a real rich snippet:
1
2
3
| <div> My name is <span itemprop="name">Jared Drake</span> and I write tutorials for <span itemprop="affiliation">PHPJabbers.com</span>.</div> |
With the html5 microdata, the search engines know that "Jared Drake" is definitely connected and it is a name. So, search engines can connect my name with articles that I have written or other events that are related to me. This is slowly paving the way for a semantic web. You might have already seen Google attempting this with locations when it shows a map on the right side when you search for a business. I promise you that these rich snippets are going to catch on and search engines are going to embrace these more in the next few years.
The itemprop="affiliation" shows that PHPJabbers.com is a place. It might seem obvious that url are distinct based on the .com or .something syntax, but the affiliation gives some more context. To search engines, it now thinks that I am someway related to PHPJabbers.com. Before rich snippets, search engines would depend on the closeness of the words, but in our example, my name is far away from my affiliation where a search engine might guess we were connected. However, rich snippets strengthen this relationship and less is left to chance.
provides more attributes and html5 microdata schemes that you can use to highlight your data. Currently, these microdata attributes focus on location, people, and a few other things. But, I honestly expect them to incorporate things like news, articles, and main topics. Twitter is kind of paving the path on specific keywords with the #, but I expect more associations with search engines as Twitter doesn't correlate keywords in too much detail.
JQuery Ajax Form
JQuery Ajax Form
If your website has some forms, you should consider using Ajax. Ajax allows the user to receive immediate feedback when the submit they form without ever leaving the page. Using Ajax can clutter your JavaScript, so I highly recommend using jQuery's Ajax function, which means you will need the jQuery library. The jQuery Ajax function has massive amount of useful features that you can use to customize your Ajax calls for your users. Using jQuery, you will not have to flood your Ajax function with a mountain of if statements as they are built into the function for you.
One possible form that you might consider using Ajax is a comment form. Users love to see their comments immediately posted without having the page reloaded for them. Ajax is still somewhat confusing for users, which means you need to build in a few strong feedback mechanisms. First, let's build a really simple contact form with just a username field, comment field, and a submit button.
1
2
3
4
5
6
7
8
9
10
| <div>Comments</div><form id="commentForm" action="comment-post.php" method="POST"> <input id="commentUsername" type="text" name="username" /><span id="commentUsernameError">sdfasdf</span> <textarea id="commentComment" name="comment"></textarea><span id="commentCommentError">sdfdsfa</span> <input type="submit" id="commentSubmit" name="action" value="Submit" onclick="return false;" /> <div id="commentFeedback" style="display:none;"><img src="loading.gif" /></div></form> |
The important thing about the previous form is to see the build in feedback spans and div. Each form element has a span associated with it, so that when a user creates an error in that field, you can show them where the error occurred. Our submit button has an "onclick" attribute set to "return false", which means to not submit the form. The beauty of placing that JavaScript inside the form is that the form will work even if JavaScript is not enabled. Finally, we have the "commentFeedback" div with a "loading.gif" inside. This is a feedback mechanism that shows the user that the website is processing their data. Now we can move onto the meat of this tutorial, the jQuery Ajax.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script type="text/javascript"> $("#commentSubmit").click(function() { var passValue = 0; var formJSON = $("#commentForm").serialize(); $("#commentSubmit").attr('disabled','disabled'); if ($("#commentUsername").val() != "") { $("#commentUsernameError").html(''); passValue++; } else { $("#commentUsernameError").html('Please enter your username'); } if ($("#commentComment").val() != "") { $("#commentCommentError").html(''); passValue++; } else { $("#commentCommentError").html('Please enter a comment'); } if (passValue == 2) { $("#commentFeedback").html('<img src="loading.gif" />'); $("#commentFeedback").show(); $.ajax({ type: "POST", url: "comment-post.php", data: formJSON, success: function(){ $("#commentFeedback").html('Comment posted'); }, error:function(){ $("#commentFeedback").html('Could not post your comment'); } }); } $("#commentSubmit").removeAttr('disabled'); }); </script> |
The majority of this example is validation. We set up a "passValue" variable that tells us that if both fields have valid data, we can submit the form. This allows our server to relax while the browser does all of the validation before sending the data (You should ALWAYS validate the data on the server side as well). After creating our "passValue" variable, we serialize our form data so that we can access it easily later in the function. Next, we disable the submit button so that the user will not keep trying to submit.
We follow that up with a series of validation tests to finally arrive at our "if (passValue == 2)" statement. First, we show our "loading.gif" so the user knows the website is processing. Next, we launch the Ajax function that can take some properties like type, url, data, datatype, and a series of feedback functions. Our type is "POST" because it is a form that is submitting data to the server. The url is the same as the form's action url. The data is the form data that we serialized in the second statement. Then comes the awesome success and error functions. Success is when the request completes successfully, so we want to tell the user that the comment was posted. Error tells the user that something messed up.
At the end of our JavaScript, we enable our submit button in case the user wants to add additional comments. That covers how to use jQuery's Ajax function to create more useful form elements, while allowing those without JavaScript to also be happy. You can easily implement this code by changing the code inside the "success" and "error" functions. Go out there and create some Ajax compatible forms!
Subscribe to:
Posts
(
Atom
)
