Categorie: Web

Google does not use the keywords meta tag in web ranking

Monday, September 21, 2009 at 10:00 AM

Recently we received some questions about how Google uses (or more accurately, doesn’t use) the “keywords” meta tag in ranking web search results. Suppose you have two website owners, Alice and Bob. Alice runs a company called AliceCo and Bob runs BobCo. One day while looking at Bob’s site, Alice notices that Bob has copied some of the words that she uses in her “keywords” meta tag. Even more interesting, Bob has added the words “AliceCo” to his “keywords” meta tag. Should Alice be concerned?

At least for Google’s web search results currently (September 2009), the answer is no. Google doesn’t use the “keywords” meta tag in our web search ranking. This video explains more, or see the questions below.

Q: Does Google ever use the “keywords” meta tag in its web search ranking?
A: In a word, no. Google does sell a Google Search Appliance, and that product has the ability to match meta tags, which could include the keywords meta tag. But that’s an enterprise search appliance that is completely separate from our main web search. Our web search (the well-known search at Google.com that hundreds of millions of people use each day) disregards keyword metatags completely. They simply don’t have any effect in our search ranking at present.

Q: Why doesn’t Google use the keywords meta tag?
A: About a decade ago, search engines judged pages only on the content of web pages, not any so-called “off-page” factors such as the links pointing to a web page. In those days, keyword meta tags quickly became an area where someone could stuff often-irrelevant keywords without typical visitors ever seeing those keywords. Because the keywords meta tag was so often abused, many years ago Google began disregarding the keywords meta tag.

Q: Does this mean that Google ignores all meta tags?
A: No, Google does support several other meta tags. This meta tags page documents more info on several meta tags that we do use. For example, we do sometimes use the “description” meta tag as the text for our search results snippets, as this screenshot shows:

Even though we sometimes use the description meta tag for the snippets we show, we still don’t use the description meta tag in our ranking.

Q: Does this mean that Google will always ignore the keywords meta tag?
A: It’s possible that Google could use this information in the future, but it’s unlikely. Google has ignored the keywords meta tag for years and currently we see no need to change that policy.

Source: http://googlewebmastercentral.blogspot.com/2009/09/google-does-not-use-keywords-meta-tag.html
Posted by Matt Cutts, Search Quality Team

Twitter Background Guidelines

Composition
Width and height varies. Twitter’s design is centred, and shifts left and right across the background image, depending on the size of the user’s display and their web browser’s window size.

The background design should support a wide variety of window dimensions.
Broadly speaking, there are four types of Twitter background designs: extended profile, big image, fade to color, and tiled (repeating):

Extended Profile
Extended profile designs allow the user to expand upon their biographical information, display a self-portrait, along with other useful (but non-clickable) links (eg. their Facebook profile, email address, etc). Extended profiles are also usually based on big image, or fade to color designs (see below).
Big Image
Whether it is an impressive photograph or a just a really large design, a big image design is great for big impact. Unfortunately, they don’t work well at all window sizes. Savvy designers can also include extended profiles and/or fade to color in a big image design.
Fade to Color
Fade to color designs add some visual interest, without the risk of ending in a harsh edge on larger displays. To achieve this, the image is blended at the edges into a single colour, which is then specified as the background color.

Tiled (repeating)
Tiled background designs produce a pattern-like effect. The main advantages of tiled designs is they work at any window size and are fast to load. However, the inherent repetition can be a drawback.

Optimal Dimensions
1280px is a common width to optimize for. Check with your contest holder.
This allows for two 250px wide columns either side of the main content area.

Minimum Dimensions
Small displays may obscure graphics placed to the left of the main content.
Most modern displays have resolutions greater than 1024 × 768px.

Maximum Dimensions
Larger displays may obscure graphics placed to the right of the main content.
1920 × 1200px should account for most display resolutions.
No more than 2560 × 1600px for expansive photographic-based designs.
This supports 30-inch cinema display resolutions!

Branding
ontwerps suggests 191 × 36px as optimal dimensions for branding (eg. a logo). The width is what is important here—not so much the height.
Add approximately 12px of padding from the top to neatly align with the top of Twitter’s logo.
A little padding along the left edge (20px to 40px) is nice and easy on the eye.
If text is incorporated into the background image then small font sizes should be used with caution (due to pixellation).

File Size
Twitter restricts images to a file size of 800 KB, or less.
Aim for 100 KB, or less.

File Types
Twitter accepts: GIF, JPG, and PNG file formats.

Color Palette
In Twitter, you can customize Twitter profile colors, under Settings › Design. Using hex codes, you can change the color of the background, text, links, sidebar, and sidebar border.

Download PSD Template

twitter

color – pattern – textures

Web-Based Invoicing Tools

Web-Based Invoicing Tools for Web Designers

phpBMS Project
http://phpbms.org/
phpBMS is web-based, open source, Business Management Software (BMS). The phpBMS package is based on the LAMP stack.
phpBMS is designed for small and mid-size enterprises looking for an integrated system to manage their business. A system that is capable of managing daily operations, creating and printing orders, tracking clients and prospects, and fulfilling accounts receivable needs.
Key Features :

* Simple Sales Order Entry
* Recurring invoices
* PDF Billing Documents
* Client/Prospect Mass E-mailing
* Accounts Recievable

Demo: http://phpbms.org/trial/
Screenshots: http://phpbms.org/wiki/PhpbmsScreenshots

BambooInvoice
http://bambooinvoice.org/
BambooInvoice is free Open Source invoicing software intended for small businesses and independent contractors. Our number one priorities are: ease of use, user-interface, and beautiful code.
It is meant to be sexy, both on top of, and under the hood. Go ahead, kick the tires. View source shows semantic, structured, meaningful XHTML. We use AJAX to keep things peppy and javascript to keep things functional.
Features:

* Self-hosted
* Easy to learn and operate interface
* XHTML, WAI, CSS, AJAX
* English, French, German, Dutch, Romanian, Spanish, Portugese, Bulgarian, Swedish, Italian.
* Invoices / Quotes / Customers / etc.

Demo: http://www.bambooinvoice.org/login
Screenshots: none, use demo.

CitrusDB
http://www.citrusdb.org/

* An open source customer care and billing solution that can be used in many different service industries, including internet service, subscriptions, consulting, and telecommunications.
* CitrusDB is a web based customer care and billing software solution (CC&B) that uses PHP and a database backend (MySQL) to keep track of customer information, operational CRM, services, products, billing invoices and credit cards, and support information.

Features: http://www.citrusdb.org/about.html
Screenshots: http://www.citrusdb.org/screenshots.html

SimpleInvoices
http://www.simpleinvoices.org
Simple Invoices is a web based application. This means once you set it up you can then access and use Simple Invoices from any PC using a web browser, nothing to install on clients PCs.
Features:

* Quick and nice looking invoices without having to set up to much. Install the software, enter a biller, a customer and go nuts creating invoices!
* Export to PDF, Microsoft Word, Excel or plain text
* Multiple invoice types (Total Invoices, Itemised Invoices, Consulting Invoices)
* Invoice Templates (Select different layouts etc)
* Invoice preferences, enables you to define and customise all the wordings on the invoices.
* A number of reports and layouts available for analysis.
* A simple, community developed, free/open source, web-based invoicing system.

Demo: http://www.simpleinvoices.org/demo
Screenshots: http://www.simpleinvoices.org/tour#easy_invoice_creation

NolaPro
http://nolapro.com/index-5.html
The NolaPro suite is a flexible world-class system designed for any size business. This suite includes complete web-based accounting services and allied business functionality. The NolaPro license is free.
Vertical Overview: Accounting + Business Software
Licence Cost: $0 / Freeware

FEATURES:
Complete Accounting

* Receivables/Billing
* Payables/Vendor Info
* Payroll/Employee Data

Business Management

* Inventory Tracking
* Order Entry/Shipping
* Administrative Control

Ecommerce Features

* B2B Web Portal
* Point-of-Sale (POS)
* Editable Shopping Cart

NolaPro Demo : https://demo.nolapro.com/index.php
Download NolaPro Linux : http://nolapro.com/download/?server=2&os=l
Download NolaPro Windows: http://nolapro.com/download/?server=2&os=w

PhreeBooks Accounting
http://www.phreebooks.com
Was developed as an open source ERP (Enterprise Resource Planning) web-based application written for the small business community. The goal is to provide a multi-language web-based end-to-end enterprise management tool. Written in the widely availalbe PHP scripting language with the robust mysql database engine, PhreeBooks goal is to provide a no-cost solution for small business concerns. Unlike most commercially available accounting packages that use proprietary software or require MS Windows operating system, PhreeBooks is platform independent, browser independent and easily translated into many languages. Highlights:

* Separate Customer and Vendor Account Information
* Full Inventory Management and Tracking
* Complete Financial General Ledger Accountability
* Banking Support, Including Check Writing, and Bank Account Reconciliation
* Flexible Import and Export Capabilities
* XML Interface To E-commerce Shopping Carts (currently Zen-Cart)
* Robust Reporting and Form Capability
* Expandable Shipping Manager
* User Level Security
* Context Sensitive Popup Help System (using PhreeHelp)

Demo: http://www.phreebooks.com/?q=demo
Download: http://sourceforge.net/project/showfiles.php?group_id=201914

phpCoin
http://phpcoin.com/

* phpCOIN is used by over thirty-five thousand people worldwide*, including web-hosts, designers, lawyers, accountants, and a school band.
* phpCOIN requires a webserver (apache, MS IIS, etc.), a MySQL v3.x.x or higher database, and php v4.1 or higher.
* Most questions about features are answered on the support forums, and several of our users are contributing to the online manual.
* phpCOIN v1.4.x is a major overhaul of the phpCOIN v1.x series code-base for readability, speed enhancements, and visual and operational consistency, and our first effort to ensure php v6 compatibility. It is also intended to be the last release prior to the launch of the commercial phpCOIN v2. You can login to a demo site of the current version (v1.4.4) as an admin or a client to see how the system works.

Clarifications:

* Price: phpCOIN version 1.x is 100% free of cost to use ~ although donations to help cover the time and expenses of running this site are appreciated.
* When it is available, phpCOIN v2 will be free to use for up to ten active clients, but more then ten active clients will require a fee.

Free Support:

* Support via the support forums or the online manual is free, although you must sign-up to post. Most questions are already answered there, plus our users sometimes answer questions quicker than we can.

Demo: http://cpdemo.phpcoin.com/
Screenshots: none, use demo

Workingpoint
http://www.workingpoint.com/

Invoice Your Customers
Manage Bills and Expenses
Double-Entry Bookkeeping
Manage Your Contacts
Manage Your Inventory
Financial and Tax Reporting
Cash Management
Online Company Profile
Business Dashboard

Pricing:
http://www.workingpoint.com/pricing-and-signup/

Invoicera
http://www.invoicera.com/

Invoicera is an online billing software which is specifically designed keeping simplicity and online invoicing convenience in mind, while at the same time offering the best of the breed invoicing features.

Features:http://www.invoicera.com/features.html
Pricing : http://www.invoicera.com/pricing.html
Tour: http://www.invoicera.com/tour.html

ALTERNATIVES

– http://www.lessaccounting.com

– http://www.billingorchard.com

– http://www.getcashboard.com

– https://www.freshbooks.com

– http://www.blinksale.com/home

– http://www.billmyclients.com

– http://www.invoicesmadeeasy.com

– http://www.invoiceplace.com/invoice

– http://www.invotrak.com

– http://www.simplybill.com

– http://www.simplyinvoices.com

– https://www.time59.com

– http://veetro.com

– http://invoicemachine.com

– http://www.net2invoice.com

– http://www.wphire.com

– http://www.fanuriotimetracking.com

– http://www.paypal.com

– http://billingmanager.intuit.com

– http://www.paysimple.com

– http://www.worketc.com/

– http://www.billingorchard.com/

– http://www.invoice2go.com/

– http://www.getcashboard.com/

– http://www.bill4time.com/

– http://www.vertex42.com/ExcelTemplates/excel-invoice-template.html

– http://www.spreadsheetstore.com/p-53-invoice-creator-for-excel.aspx

invoice

CSS Menu

Deze tutorial zal ik laten zien hoe je een css menu maakt..
We maken (un-typical) list menu met behulp van de position waarde.

Hier is een overzicht van het menu (je kunt het downloaden als rar bestand).

Achtergrond:

Open de Photoshop-bestand. Schakel alle layers uit behalve de achtergrond en logo en sla de achtergrond op als menu-bg.jpg.

Buttons:

Zet de achtergrond en logo layer uit en laat alleen de menu teksten zichtbaar.
Maak een rechthoekige selectie van de “home” knop, ga naar menu Edit > Copy Merged.

Maak een nieuw bestand en kijk naar de bestands dimensie (bxh), in mijn geval is “home” 82 x 40px.
Verdubbel de hoogte van het nieuwe bestand dus 82 x 80px.
Plak nu de afbeelding en plaats deze aan de onderkant. Dupliceer nu de laag en plaats dit aan de bovenkant.
Wis nu de omlijsting van de bovenste laag.

Herhaal deze stap voor de andere knoppen.

HTML code

We beginnen met het maken van een un-ordered list

tag (dit is om de Mouseover effect)

<ul id="menu">
	<li><a href="#" class="home">Home<span></span></a></li>
	<li><a href="#" class="over">About<span></span></a></li>
	<li><a href="#" class="diensten">Diensten<span></span></a></li>
	<li><a href="#" class="rss">RSS<span></span></a></li>
	<li><a href="#" class="mail">E-mail<span></span></a></li>
</ul>

#menu

Reset het menu met no padding, no margin en no list-style.
Geef de breedte en hoogte aan van de menu-bg.jpg. Voeg dan de menu background image toe.
Belangrijkste is om de position op relative te zetten.

#menu {
list-style: none;
padding: 0;
margin: 0;
width: 800px;
height: 180px;
background: url(images/menu-bg.jpg) no-repeat;
position: relative;
}

#menu span
Geef het span element de waarde display:none (zodat het default niet wordt weergegeven).
Zet position:absolute, zodat we het mouseover GIF bestand op een exacte positie kunne zetten.

#menu span {
display: none;
position: absolute;
}

#menu a
Het belangrijkste punt hier is de text-indent waarde.
We geven aan de text-indent een negatieve waarde (-900%), zodat de tekst wordt verborgen.

#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}

#menu a:hover

Wanneer de cursor over de link gaat, willen we een verschuiving van de achtergrond afbeelding van boven naar beneden.

#menu a:hover {
background-position: left bottom;
}

#menu a:hover span
Wanneer de cursor over de link gaat, willen we span element een waarde geven van display:block.

#menu a:hover span{
display: block;
}

#menu .home

Geef de breedte, hoogte, van de home achtergrond afbeelding.
Aangezien we al aangegeven hebben in een vorige stap dat element postition: absolute is, hoeven we nu alleen maar aan te geven waar de home image moet komen.
Hiervoor moeten we de left and top waarde specifeceren van de Home knop.

#menu .home {
	width: 82px;
	height: 40px;
	background: url(images/home.png) no-repeat;
	left: 250px;
	top: 63px;
}

 

#menu .home span

Geef de  breedte, hoogte, background , en positie van het span element van .home (mouseover GIF image)
#menu .home span {
	width: 66px;
	height: 8px;
	background: url(images/huis.png) no-repeat;
	left: 28px;
	top: -20px;
}

 

Doe dit zelfde nu voor alle anderen buttons/knoppen.
Totale css

(heb voor email en rss button geen mouse over gebruikt in het voorbeeld)



#menu {
	list-style: none;
	padding: 0;
	margin: 0;
	width: 800px;
	height: 180px;
	background: url(images/menu-bg.jpg) no-repeat;
	position: relative;
}
#menu span {
	display: none;
	position: absolute;
}
#menu a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}
#menu a:hover {
	background-position: left bottom;
}
#menu a:hover span{
	display: block;
}
#menu .home {
	width: 82px;
	height: 40px;
	background: url(images/home.png) no-repeat;
	left: 250px;
	top: 63px;
}
#menu .home span {
	width: 66px;
	height: 8px;
	background: url(images/huis.png) no-repeat;
	left: 28px;
	top: -20px;
}
#menu .over {
	width: 82px;
	height: 40px;
	background: url(images/over.png) no-repeat;
	left: 350px;
	top: 57px;
}
#menu .over span {
	width: 32px;
	height: 14px;
	background: url(images/wie.png) no-repeat;
	left: 44px;
	top: -24px;
}
#menu .diensten {
	width: 121px;
	height: 41px;
	background: url(images/diensten.png) no-repeat;
	left: 450px;
	top: 34px;
}
#menu .diensten span {
	width: 40px;
	height: 14px;
	background: url(images/wat.png) no-repeat;
	left: 26px;
	top: -30px;
}
#menu .rss {
	width: 26px;
	height: 25px;
	background: url(images/rss.png) no-repeat;
	left: 650px;
	top: 20px;
}
#menu .mail {
	width: 27px;
	height: 19px;
	background: url(images/mail.png) no-repeat;
	left: 650px;
	top: 60px;
}

Download Bestanden Bekijk Demo

CSS