Welcome to my blog :)

This is a site comprised of a personal collection of notes and information serving as a single reference place for examples, tips, codes, testing, instructions, workarounds and troubleshooting with a record of external links to help during web design or managing and maintaining mobile devices and PC. I'm not a novice nor an expert...just a LittleBitGeeky here on blogspot.com

Saturday, September 20, 2014

Web Design: Search Engine Optimization SEO


SEO-Search Engine Optimization for High Ranking
Methods and Important Development Factors to Optimize Website

It is known that users typically don't look past the 2nd page on search results, if not just the 1st page alone. Page one is the top 10 ranking sites and page two is the top 20 raking sites. The importance of correctly developing the right type of website is of great value in respect to your sites ability to move up the ranking ladder.  Structure of the layout design, accessibility and validity to web robots are key ingredients for a successful top ranked website.

Author: Karen Grady

Sources:
Google SEO Optimization Recommendations Guide
     Download PDF
Google Webmasters Guide
     -https://www.google.com/webmasters/tools/home?hl=en
     -Submit Website to use Webmaster Tools:
     -Submit Canonical Domain & Submit XML Sitemap for crawlers


Table of Contents: 
About Search Engine Ranking
Factors of Search Result Ranking
Outline of Individual Factors


About Search Engine Ranking: 


There is no guarantee that your site will automatically rank first for queries in Google, but with certain methods implemented into the web design itself (SEO-Search Engine Optimization) will allow the search engines (SE) to crawl, index and understand your content in the best way possible. Thus this will increase your chances of being at the top portion of the search result list. "Organic" search results are ones that occur "naturally". SEO in the web design affects only organic search results, not paid or "sponsored" results, so that's what I focus on.  Technical details are listed below in the SEO Area's of Concentration section.

Moreover, companies or sites that claim to guarantee high ranking typically employ deceptive tactics to fool the search engine bots, and if your domain (website name) is affiliated with such site, your site could be banned from the Google index permanently. One example is comment spammers, like when an advertisement for Viagra is added to the comment box with a link to that site. This can actually hurt your sites reputation, thus is the reason behind using image Captcha's when public comments are allowed or why most sites require users to sign up for an account in order to comment.

Factors of Search Result Ranking:


Listed in chronological development order, are the main factors that directly effect search engine ranking, which if done correctly will promote your website to a higher rank or inadvertently hurt your website if the web robots read the wrong type of data and/or is corrupted by external entities.

1) First and foremost, is optimizing the website design to specifically target search engines in order to validate your site to gain the proper reputation status for your site. Important design features are applying the correct data values to HTML [via tags like <title>, <meta descriptions> and <!DOCTYPE>], organizing and naming the file structure itself to produce "friendly" URL page addresses, site map  hierarchy order, accessibility from any device or user settings and correctly configuring the layout to making sure that mobile search engine robots recognize the site as valid and trustworthy.

2) Submitting the site (and specific siteMap.txt document) to each search engine initially lets the site presence be known, thus minimizing the initial wait time for search engines to "find" your site.

3) Actual site traffic,  the more hits the higher the value.

4) Links to and from the site, to/from other reputable websites promotes your own site's reputation.


Outline of Individual Factors:


1) HTML HEAD: TITLE AND DESCRIPTION META TAG 

<title> 
-The contents of the title tag will usually appear in the first line of the results, words appear in bold that match search sting.
-Use a short to the point title and apply a unique title to each page.
-Place in the head section of a HTML document.
<meta name="description=" content="....">
-Add one or two sentences or a short paragraph fully describing the page and apply a unique description to each individual page. This is the default display that's positioned below the title. Or alternatively, the display will return be a more relevant section of the page that more correctly matches the search sting query.
-Place in the head section of a HTML document.
Example of Both:<html>
<head>
<title>Brandon's Baseball Cards - Buy Cards, Baseball News, Card Prices</title>
              UNDERLINED SEARCH RESULT TITLE<meta name="description=" content="Brandon's Baseball Cards provides a large selection of vintage and modern baseball cards for sale. We also offer daily baseball news and events in">
              DISPLAYS UNDER THE TITLE</head>
<body>


2) HTML HEAD:  KEYWORDS
-DO NOT USE KEYWORDS ANY MORE!
-Google and Bing crawlers could deem your site as SPAM and be omitted from search results.


3) FILE STRUCTURE FOR URL PAGE ADDRESSES:  
-Allows web crawlers like Googlebot to index URL'S efficiently.
-Friendly Folder and File Names create user friendly URL's .
-Google suggests using hypens vs underscores.

File: The Site Map Inclusion Protocol = "sitemap.txt"
-https://support.google.com/webmasters/answer/183668?hl=en
-A special file created to submit your website and get your web pages indexed by search engines
-Build a sitemap in a standard XML file and submit to Google
XML Example:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>http://www.example.com/foo.html</loc>
</url>
</urlset>
-or use 3rd party tools to generate the file. Here's a list https://code.google.com/p/sitemap-generators/wiki/SitemapGenerators
-Break up a large sitemap into a set of smaller sitemaps to prevent server overload. A sitemap file has 50,000 URLs limit and 50 MB uncompressed size.
-Use a sitemap index file to list all your sitemaps and submit this single file to Google rather than submitting individual sitemaps.


File: The Robots Exclusion Protocol="/robots.txt"
-Meaning a "suggestion" for bots to Do Not Crawl this page
-Example: User-agent: * Disallow: / tells All Robots that it should not visit any pages on the site.
-Example: Disallow: /tmp/ or Disallow: /junk/ excludes all robots from only these parts of the server
-Use other methods to secure sensitive information as this robots.txt file is a public file.
-It is not to be used to try and hide information.
-Should be placed in the top-level directory of your web server so the URL is http://www.websitename.com/robots.txt.

4) URL ACCESSIBILITY STRUCTURE: 

*All pages have a min of one static access link
-Note that Dynamic generation of documents can result in small changes because of counters, timestamps, or advertisements.
*Test Spider Accessibility on the Site
-using Lynx Screen Browser.
-Web crawlers basically see what screen readers see.
-Ensures site will display without JavaScript or other coding.
*Canonical Domain Page Structure for Multiple URLs
-The preferred domain is the version that you want used for your site in the search results.
-Sets www or http:// as the preferred version for Search Engines to use, no matter what version is accessed.
-Sets one page as main from its IDENTICAL content twin
-i.e. text only or printer friendly versions.
-(does mobile sites apply?)
-Do not link to same page from root directory and from subdomain, i.e. "domain.com/page.htm" and "sub.domain.com/page.htm"
-Warning about using this wrong! Mainly use rel=canonical for dynamic urls, eCommerce with filtered lists, syndicated content like someone else using your content on their page, which they would all the rel link.
-<topHead link rel="canonical"> is merely a hint, not an actual redirect.
-Preferred method vs rel link is to set up a 301 redirect from dup pages to dominant page
*Mobile Searches: are a separate entity and must be submitted to SE Separately
-Submit its own sitemap to let its presence be known
-A mobile <!DOCTYPE> must be declared.

*Dual SiteMaps: One for user, One XML to submit to Google for Crawlers
-Note that a 3rd one needs to be created and submitted separately to Google if using a separate mobile site
*Mobile Sites: 2 different sites with 2 separate URL's
- /m/ for mobile added to URL address
-Means 2 sites to build, maintain, update and submit to search engines
-My New Responsive Website Design omits the need for separate mobile site.

*Single Site for all Devices: 1 site with 1 URL
MY NEW HTML5 + PURE CSS3 RESPONSIVE LIQUID LAYOUT w/ VERTICAL FLOW AND PURE CSS MULTI LEVEL RESPONSIVE DROPDOWN MENU
Using the new HTML5 with CSS3 media queries to build an automatic adjustable layout for all screen sizes and types of devices.
Pure CSS
-Means that the main functions of the website rely soley on CSS specifications.
-Website requires no JavaScript (or any other scrips) to function properly.
-The layout will stack, stretch and contract upon user font size alterations and screen zoom levels.
-The horizontal menu will drop down vertically on hover, keyboard, click or touch.
-Both the responsive layout and menu automatically conforms to all sizes of mobile devices.
Responsive
-Means it will adapt its size and content to fit any screen size (w/Mobile 1st Theory)
-Incorporating a responsive drop down navigation menu, for mobile specific menu
-No JavaScript. Instead use CSS3 Media Query
@media only screen and (min-width : 000px) {...the css...}
Liquid
-Means width will expand and grow upon any screen size change.
-Method: Using relative % and em unit of measure, VS absolute PX values
Vertical Flow
-Means all element groups have the same height and line up equally on the baseline
-Typography Method: Using the Golden Ratio 1.618 equations to calculate heights & widths
-Flow ratio results in a 16px default font with a 1.618em/26 unitless Line Height to use as the Magic Number Multiplier
Single URL Address
-Means no separate (m) mobile site, thus no Googlebot-Mobile SE web crawler
-WARNING: Googlebot may can recognize site as "Cloaked" if not configured correctly, which could cause SE to drop the site from search result completely. Relevant content MUST BE THE SAME thats served to both Googlebot and Googlebot-Mobile. Read in Google Webmasters SEO PDF Guide.
5) LINKING TO AND FROM OTHER WEBSITES:
The more other sites link to your site, the greater the visibility for crawlers in search results. Each website's reputation is passed to one another by any links to and from other each others websites.
Add link to your site to other reputable sites
-Submit or try to add your site to BBB, PhoneBooks, Chambers, Any Local Sites as well any national and global sites with related products or services.
-Maybe even social sites like blogs (esp Google Blogger I would think), facebook, G+, twitter etc. plus sharing would spread the links around globally
Other website links posted on your site: Works Both Ways
-Bad sites: like spammers who put a link on your site like in a public user comment will pass along their bad reputation to your site.
-Use Captcha's, add restrictions or other measures.
-apply to specific link:
<a href="http://www.shadyseo.com" rel="nofollow">Comment spammer</a>
-apply to all links on entire page
<meta name="robots" content="nofollow">
-Good Sites: pass along their good reputation
-Using individual photo hosting sites for images VS on the server itself would also apply more valid linking.
-Create a "LINK PAGE" and add any and websites that could be related in any way to your website, as well as information about the physical location area.

6) CONTENT: 
-Write information rich, quality content on home page vs Keyword List.
-Google may determine a list of keywords or cloaked page deceptive and ignore the site entirely.
-This may be keywords listed in html, as it refereed to text that users cannot see?

7) NAVIGATION:
-Besides user's ability to navigate through the sites pages, it also helps SE's know what is important. Although it doesn't return the navigational values, it still help the engine see the big picture of the sites structure and contents.
-See the Website Linking section above to add a new page or menu link


-Webmaster Guide states that 100% nav via dropmenu should be avoided. Hmmmm?
-My Opinion: I am assuming this is in regards to screen readers and devices that don't use or allow scripts. I would think my new responsive design would be OK since my responsive dropmenu doesn't rely on JavaScript to function, it is Pure CSS. The only issue would be people that HAS NOT updated browsers AND doesn't support the new media querries AND doesn't allow scripts.
-IMO adding alternative nav links would be a backup if the main drop down multi level menu may not be accessible. Alternative Methods could be a Breadcrumb Trail under header and/or a Site Map Page link in the Footer.






No comments:

Post a Comment