Sum

cases (at least not if you need 5+ columns). I found this good example of a responsive table which inspired this resource: the list of features gets fixed on a side, allowing the user to horizontally scroll through the columns. Nice! Now why didn’t I use the HTML table structure, and instead went with unordered lists? It was difficult for me to make this resource responsive using proper table semantics (maybe an idea for a future resource). So I thought more about the UX side, and less about the code behind it. Yep, that’s my excuse.

Lorem

Content filters are particularly useful for big websites, where each pixel counts. Lets say you are showing the “last products” of your e-commerce. How about giving the users the option to switch to the “most popular” products without a page refresh? A good solution could be to hide the “most popular” items right behind the “last products”, then use the power of CSS3 3D Transforms to rotate the items when the user switches from one option to the other. The bounce effect is optional, but you get the idea! The rotation won’t work on older browsers like IE9, but the experience won’t be broken – just a display on/off with no transitions. Lets dive into the code!

Rel="author" must only appear on post page

Maile Ohye and MaAnna Stephenson wrote post about this clearly. We must not display rel="author" in homepage or pages or you'll penalize by Google as rich snippet spam. Rel="publisher" is allowed on entire page on your site, sorry not for the author tag. If this was true, it mean if most of blog author do wrong including myself. Take look at Google Webmaster Central. Someone ask about What kind of pages can be used with authorship?, i also think that is our problem. Maile replied
You can increase the likelihood that we show authorship for your site by only using authorship markup on pages that meet these criteria:

• The URL/page contains a single article (or subsequent versions of the article) or single piece of content, by the same author. This means that the page isn’t a list of articles or an updating feed. If the author frequently switches on the page, then the annotation is no longer helpful to searchers and is less likely to be featured.
• The URL/page consists primarily of content written by the author.
• Showing a clear byline on the page, stating the author wrote the article and using the same name as used on their Google+ profile.

Well, that is clear enough if rel author should only appear on post page. Unfortunately maile didn't tell the cons if we use rel="author" in every page, otherwise MaAnna Stephenson did. Taken from blogaid.net:

Unfortunately, a lot of folks simply applied some of the authorship special tags to everything on their site, including posts and pages. And now Google has a real indexing mess on its hands. It can’t tell posts from pages with just this much markup and doesn’t know how to properly credit authorship.
Google started telling site owners to fix this. But not enough people listened. Now Google has a new ally and is doing something about it.

Avoid Google rich snippet spam from now or someone read this will regret it. And please avoid this for better world.

Other bad news, Matt Cutts as Head of Google Webspam team also didn't apply this rule to his website or blog. What should i do?

Needed to make HTML5 valid website

Make a HTML5 valid website is never easy. But you better do this because HTML5 is the future, get with it. Most of us are distress to create one or fix the problems.  You'll know how now

A DOCTYPE and filled title tag

Believe or not, you can have HTML5 page with only both of them. Of course without body, html, or head. Prove it now with W3 validator tool. Other side is, i know you don't want to have a website only contains a DOCTYPE and title tag. This just let you know

Escaped characters

Other easy way to do is escape ... characters like '&', '<', and '>'. There are so many tools you can use freely to escape ... characters like htmlescape.net.

Type attribute for script and style

I found my friend's blog doesn't HTML5 valid due to this. My blog also don't have type attribute for style and script but still valid HTML5. I suggest you to add it to avoid unexpected errors. Your code should look like

<style type='text'css'></style>
<script type='text/javascript'></script>

Avoid old HTML attributes & tags

Avoid old HTML attribute like font tag and color attribute. They are craps! Throw them far far far away. Use CSS instead. Not just at font tag and color attribute. There are still many not HTML5 tags and attributes you no need to use.

Make a good and clean organized code

This is more important. Don't code like sh*t, don't catch youself put everything without rules. Organized like

<ul>
  <li></li>
</ul>

Easy right? only put li element inside ul don't break HTML5 rules!

Use schema.org correctly

Don't make a mistakes with schema.org or your website will never HTML5. Incorrect schema.org also affect you SEO score. Correct schema.org give you great benefits. Use itemprop attribute correctly based on your choosen schema.org category and also remember itemprop attribute must be filled.

Alt for img

Other problem that also affect SEO is this. Remember alt tag for all images, title tag also needed. I've write a post to help you add alt and title tag automagically for all images before, read here.

Don't use same ID for 2 or more elements

An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element). Use class instead.

Last words

Keep optimizing. Don't too imposing to achieve this. Who cares HTML5 or not, this just the optimized / standard HTML document.

Font you might don't know exist in Google fonts

I already know it about a year ago. But you might don't know yet. If Terminal Dosis Family actually exist in Google fonts directory but not displayed yet. Check this link, the fonts are usable. Try search "Terminal Dosis" in Google fonts. Upss no result. Why? I'm not too sure, Dosis replace them. They are twins. Holy crap! Impallari type also do same thing. Right now, Terminal Dosis is downloadable from other unofficial font provider.

Google lied about your ranking position

This make me very disappointed. If you get very good Ranking positing in Google don't to happy, that's a trap :v. Yes i guess you get good ranking position when you Log-in to Google account. How about not logged in user. Don't hope Google give you good position for your new blog. I don't know if Login to Google will help you to raise ranking position. The reason i think this happened is Logged user is more familiar with Google. That's it.

I tried to search "David Hosanna", my blog is showing up and the bonus my contact card also displayed in the right sidebar. Not Logged in user cannot see this. Google seems gathered more info about what you need their search engine, maybe looking for someone else? Location? Event?

What should i do?

Just keep optimizing your blog SEO to make this happen for not logged user. I just wanna tell you about this not explaining why

ID: Description berbeda setiap posting (fallback)

Featured for Kopizine

Melakukan pemasangan Keywords dan Descriptions berbeda disetiap posting di dibagikan diblog lain berbahaya besar bagi SEO anda. Silahkan anda coba trik mereka salah satunya disini. Oke memang berfungsi jika anda memang mau mengetiknya di posting editor blog. Percaya atau tidak bahwa jika teman teman tidak mengetik custom "Deskripsi Penelusuran" dihalaman post editor. Tidak ada meta descripsi pada halaman posting itu. Lhoo.. dimana fallbacknya, yg saya  ketik di settingnya kemana?

Nah itu dia permasalahannya. Kali ini saya datang membawa kedamaian dunia, agar negara api tidak menyerang lagi :v.

<b:if cond='data:blog.metaDescription == &quot;&quot;'><meta content='deskripsimu' name='description'/><b:else/><meta expr:content='data:blog.metaDescription' name='description'/></b:if>

Ganti saya "deskripsimu" jadi deskripsi ente. Jangan lupa juga, enable tag meta deskripsi di Setelan > Preferensi Penelusuran > Tag Meta. Klik edit dan aktifkan deskripsi penelusuran. Jangan lupa isi Meta deskripsi agan disana yg default / yg biasa agan pakai.

Fallback sudah lengkap. Keterangan: Jika Deskripsi Penelusuran kosong maka meta deskripsi yg dipakai adalah yg "deskripsimu" jika Deskripsi Penelusuran diketik / ada yg dipakai merupakan yg ente ketik. Nah itu fallback yg ga semua orang tawarkan, jadi jika agan repot repot buat posting lupa ketik Deskripsi Penelusuran ada alternatif Deskripsi yg biasa anda pakai.