Presenter: Richard Merrill, Autograff Inc.
File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus
Common folder and page names: /bv/ pers.html /2/ vcj.php?inf=1 /diffiles/ rntf.asp
Human-readable system names: /contracts/manufacture.html /services/business.php /insurance/liability.asp If it s easier for humans, it s easier for spiders.
Meta Tags Metadata Set controls data entry Template region for text block Text block with pass-through code
Creating the Metadata Set Hides meta tag fields from editors
Using the Metadata Set Essential meta tags not available to editor. Any metadata can be hidden or shown.
< /> Tags created by Cascade: <link href="/cms/renderfile/client/css/styles.css" media="all" rel="stylesheet" type="text/css"/> href media rel type Elements in alphabetical order
System Region in Head Section <html xml:lang="en"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type"/> <system-region name="headtags"/> <link href= /css/styles.css" rel="stylesheet" title="global styles" type="text/css"/> <script language="javascript" src= /files/scripts/globalmenu.js" type="text/javascript"/> </head>
Text block <!--#START-CODE <title>title Here</title> <meta name="description" content="description here"/> <meta name="keywords" content="keyword list here"/> #END-CODE-->
Pure CSS Dropdown Menu Why a CSS dropdown menu? Unordered Lists use less HTML Formatting with XSLT Nested lists modular More accessible Search spiders read easily
Menu HTML Unstructured: <a href="about.html">about</a> <a href="services.html">services</a> Structured: <ul class="global"> <li><a href="about.html">about</a></li> <li><a href="services.html">services</a></li> </ul > Easily read by screen readers without access keys List gives semantic structure
XSLT formats unordered lists About Services Plumbing Electrical <ul class= folder"> Design <li><a href="about.html">about</a></li> Wiring <li><a href="services.html">services</a> <ul class= page"> <li><a href="plumbing.html">plumbing</a></li> <li class= subpage ><a href="elec.html">electric</a> <ul class= subfolder > <li><a href= design.html >Design</a></li> <li><a href= wiring.html >Wiring</a></li> </ul > </li> </ul > </li> </ul >
Global Menu CSS <html xml:lang="en"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type"/> <system-region name="headtags"/> <link href= /site/css/styles.css " rel="stylesheet" title="global styles" type="text/css "/> <script language="javascript" src="/files/scripts/globalmenu.js" type="text/javascript"/> </head>
CSS Menu basic elements ul.folder { } ul.folder li { } ul.folder li:hover { } [also on mouse-out] ul.folder li a { } ul.page { } ul.page li { } ul.page li:hover { } [also on mouse-out] ul.page li.subpage:hover { } ul.page li.subpage a { } ul.subfolder { } ul.subfolder li { } [also on mouse-out] ul.subfolder li a { }
IE6-Specific Javascript <html xml:lang="en"> <head> <meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type"/> <system-region name="headtags"/> <link href= /site/css/styles.css" rel="stylesheet" title="global styles" type="text/css"/> <script language="javascript" src="/files/scripts/globalmenu.js" type="text/javascript"/> </head>
Nested menu structure Global Menu Local Menu Submenu Global Menu <li> Local Menu <li> Submenu <li>
Menu Example Go to Cascade example
Flyout menu usability Natural path
Flyout menu usability Natural path intersects wrong dropdown item
Flyout menu usability Required path Natural path
Dropdown to include in Global Menu XSLT uses metadata set to include/not include folders/pages/links in global menu
Using the Metadata Set Choose to include in global menu (property set in folders only)
Page and folder hierarchy Basic page and folder hierarchy: Root folder Main Category (global menu) Subcategory page/ folder (local menu/dropdown) Sub-subcategory (flyout menu)
XSLT for folder order XSLT uses file/folder/link in first position in folder as index XSLT uses folder order to order appearance of menu items
Menu and folder relationships 1 Change page name
Menu and folder relationships 2 Move page
Menu and folder relationships 3 Change name, move page Make Reference to page, place in folder
Menu and folder relationships 4 Wrong order
Menu and folder relationships 5 Correct order
Menu and folder relationships 5 Page set not to index does not display in dropdown.
Local menu on moved pages incorrect Lists main category folders instead of pages inside a category folder
New Local Menu Block for one Root Page
Local menu now correct Apply page-specific block at page level: it now lists pages inside its folder
Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus
Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus
Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus
Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus
Revisited File and Folder Naming Meta tags controlled and standardized Semantically-rich spider searchable menus Moving pages while preserving menus SEO goals met!
Brooksville, Maine 207-374-8800 207-669-4651 www.autograff.com Richard@autograff.com