Your SlideShare is downloading. ×
jackylopez.com - Virtual Assistant and Web Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

jackylopez.com - Virtual Assistant and Web Development

798

Published on

ecommerce, personal executive assistant, seo, social media, social media management, virtual assistant services, virtual business assistant, web application, website development

ecommerce, personal executive assistant, seo, social media, social media management, virtual assistant services, virtual business assistant, web application, website development

Published in: Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
798
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML Essentials For SEOIn this segment of your SEO Roadmap series we will review some of the basicHTMLand XML commands that you should be familiar with if you’re going to beinvolved in Search Engine Optimization or Internet Marketing.Now I understand that you maybe saying to yourself, I’ve been doing websitedevelopment for some time and you’re not going to teach me anything newabout HTML or SEO in this segment.Well that maybe true, but there are several important factors that we review inthis video that even old pros do not fully understand or appreciate that will help inyour on page search engine optimization and make sure that you’re compliantwith the new roll out of HTML 5.We will get you up to speed by reviewing some of the different versions of HTMLand XML so you can choose the version that is right for your projectWe will go over the structure, some of the major tags and features such as metacode, hyperlinks and URLS.This video is not a HTML course or a course on how to devolve your website, buta basic overview of some of the things you should be familiar with as you beginyour journey to having a profitable online business. 1
  • 2. HTML Essentials For Text Editors.As you will be working with HTML, XML and other computer code type of thingsyou will want to be working with a text editor and not a word processor.So here is the difference a word processor has bold, columns, graphics along withallot of other stuff to format the text. It also embeds meta coding into the text andthe code you would developing in a word processor so it will not work, insteadyou need to use a text editor, so here are a couple your choices.If you use a MAC consider using BBEdit.BBEdit has a bunch of features costs around $99.00 2
  • 3. HTML Essentials For If you’re on a PC consider notepad++BrowsersMy preference is using Firefox, as it is a safe, faster and fully customizable webbrowser and supports a large number of add on extensions such as the SEOquake and the SEO toolbar extensions. 3
  • 4. HTML Essentials ForAnd another tip, here is how you would review the source code andHTML code of other websites perhaps your competitors website soyou could compare their HTML code to yours.In your browser go to the view tab, drop down to Page Source and awindow should open showing the source code for that website.(Update: In Firefox 6 and above click on the page and a new windowwill open. Click on “View Page Source”) 4
  • 5. HTML Essentials ForWhat is HTML?HTML is Hypertext Markup Language, that was first developed in early 80’s andstill today is the predominate markup language for web pages. It provides a meansto create structured documents by denoting structural semantics for text such asheadings, paragraphs, lists, etc. as well or links, quotes and other items, It allowsimages and objects to be embedded and can be used to create interactive forms.In the early days of HTML it was almost like a free for all and there was nostandardization in HTML code. As an example Microsoft would create a newHTML element for their browsers that wasn’t supported in Netscape, and visevirsa. Today the World Wide Consortium maintains the specifications for HTML tomake sure that all the code is supported across all platforms.Because of the limitations of HTML and the computer power that is requiredto render many HTML pages a new platform called XHTML was introduced 5
  • 6. HTML Essentials ForWhat is XHTML?XMTML is not actually extensible as it is still based on the HTML platform, but asit uses XML it is an extension of the XML languageThink of XHTML as HTML but with stricter rules. The strictness of XHTML is goodfor computers and one of the elements that is taken into consideration whenGoogle and the other search engines come to your website to review it forindexing into their website 6
  • 7. HTML Essentials ForStandard CompliantSo how can you make sure that your HTML and XHTML is properly compliantand that it will render properly on your visitors computers and that the searchengines will favor your website?Well two ways:One way is to use the W3C’s Markup Validation website at http://validator.w3.orgThe validator will check your webpages showing you any errors that you canthen fix or have your web designer fix.Another way is to inspect your webpages using different browsers such asExplorer, Safari, Opera and don’t forget all those mobile devices.There are also web---based services such as BrowserShoots that can do this allfor you. 7
  • 8. HTML Essentials ForNow lets jump right into discovering some of the basic HTML and XHTMLcoding that you should be familiar with in SEO and Internet marketing.Lets first look at the basic structure of a simple HTML page.You’ll notice in this first example, on the first line we use the doctype fordeclaration. This important, one like of code tells the browsers of your visitorshow to render this page. According to HTML standards, all HTML documentsrequire this document type declaration.As a reminder, you can go to your website and use the view source codecommand to make sure that this important code is the first line of code on yourwebsite.After the doc type declaration you then should have the HTML command inbrackets and at the end of your document the closing HTML command with theslash mark that closes this command.All of your HTML commands should be formatted in this way with using theopening and then the closing tag with the slash mark.Between the opening and closing HTML commands you will also notice allot ofother HTML commands, several of which we will discuss in this video as theyrelate to Search Engine Optimization. 8
  • 9. HTML Essentials ForThe first is the opening head and the closing head tags.The Head areaWithin the head section you will want to make sure that you have the importantHTML tags for SEO that include title tag and the meta description tag.Also included in the Head area and links to other important files on yourwebsite that would include CCS and Java scripts. 9
  • 10. HTML Essentials ForTitle Tag:One of the most important elements of HTML and SEO is your title tag.Your title tag tells Google and your visitors what your webpage is all about andis displayed by Google and other search engines in their search result pages.Remember; use descriptive, informative and brief title tags, under 65characters. Anything over this Google will truncate the title. 10
  • 11. HTML Essentials ForMeta Description Tag:Another important HTML meta tag is your meta description tag.Your meta description tag describes what your webpage is all about to thesearch engines and to your victors.Also remember to use descriptive, informative and brief meta description tags,under 155 characters, anything longer then this and again the search enginescan truncate them. 11
  • 12. HTML Essentials ForKeywords:The Meta Keyword area for your webpage is also included in the head area.Even though the major search engines such as Google, Yahoo and Bing nowignore this tag entirely, I feel that it is still a good practice to include a fewimportant keywords in this area just incase they ever change their mind. 12
  • 13. HTML Essentials ForLink Elements:Link elements define external files and resources on your website that wouldinclude java scripts and CSS coding. It is recommended that you use these externalfiles to improve the speed of your website when it loads the page to maintain agood content to code ratio. This is very important factor in the Google Caffeinealgorithm and one that will help you get better rankings for your website. 13
  • 14. HTML Essentials ForBase Path Area:Another element that will improve the page loading time of all your pages onyour website while also improving your chances in getting your site to complywith the Google Caffeine requirements is to defining a base path for all yourimportant files such as your java, css files. 14
  • 15. HTML Essentials ForCanonical Tag:If there is one thing Google hates in duplicate content, and if you’re using aCMS system that is not properly formatting its permalink structure you couldbe penalized.One way to become compliant is to use the Canonical tag to reference thepreferred version of the URL for that document.Simply add the canonical Meta tag that directs the search engine with the URL tothe end of the tag as we have in this example. 15
  • 16. HTML Essentials ForRecommend Tags:Here is a list of some of the recommended tags that you should consider usingin your HTML that include:The Title TagThe Language of the content on the pageThe Content TypeThe DescriptionAnd the Canonical TagSome of the optional tags include the NO ODP tag. This tag is useful if Google orany of the search engines are using the description from the Open SourceDirectory and you want to change this. 16
  • 17. HTML Essentials ForThese are several of the tags that are ignored by the search engines andhave absolutely no value for SEO, they include:ScripttypesDistribution ExpiresGeneratorPublisherFollowing your head area we now come down to the Body area of yourwebsite. Here is where you will be putting the main content of your webpagethat wouldinclude text, images, forms, videos and graphics 17
  • 18. HTML Essentials ForCSS:Today, most professional web designers do most of their text formatting withCSS, but HTML still remains the heart of the design process.Also avoid using java or flash in your body area because it is very 2004, thesearch engines have a very difficult time in indexing this type of content andmany mobile devices like the iPhone cannot render this type of content.A tip, if you outsource your web development and they are still recommendingflash over CSS, dump them and find someone else. 18
  • 19. HTML Essentials ForFormatting:In this example of HTML text we are using the paragraph and break tags torender the text on the right.You may had noticed that I did not include the trailing slash after the br tag in theprevious slide and this would have shown an error if I would had validated thecode using the W3 validator. 19
  • 20. HTML Essentials ForBecause of XHTML strict guidelines it is always a good practice to includethe trailing slash to close your tagsIn this example showing the Bold, Italics and Underline tags you will see in theright window that I am now using this closing slash, thus making my HTMLcompliant and helping me have this page rank better in the search engines as theytighten up their compliancy factors. 20
  • 21. HTML Essentials ForUsing the proper formatting of your text in using bold, italics and underlines willalso help in usability issues, making your page easier to read by your visitors,thus encouraging them to bookmark and sharing your content with theirfriends.HeadlinesUsing headline tags properly are an important element of usability and SEO.When we use the headline tag we are telling both our visitors and thesearch engines that this segment of content is important for this page.So make sure that you use keywords in your H tags.Also try to avoid using more that one H1 tag on each page because if you do, youare diluting the importance of that tag.Wordpress and many other CMS systems by default make the title of your page aH1 tag, so in the body of your article you would want to avoid using the H1 tagagain and instead use the H2 or H3 tags.Ordered and Unordered Lists are another good place to use keywords foryour products or services 21
  • 22. HTML Essentials ForIn this first example we are using the ordered list for a recipe for a deep---dishpizza and in this second example we are using an unordered list.At this point you maybe asking yourself, “Ok, why would making these otherwords relating to deep dish pizza be important”Well one reason, in on page search engine optimization Google is not only lookingfor your main keyword phrase, but other relevant keyword phrases specific tothat main keyword. So in these to examples Google may see that these otherkeywords that we are using in an ordered or unordered list are important to ourpage on deep dish pizza and increase or on page focus and relevance for our topic.Proper use of the syntax and the image alt tag is also important in proper HTMLand on page search engine optimization and is one of the most frequentlyoverlooked factors in on page SEO. 22
  • 23. HTML Essentials ForImage Alt TagsBy using the proper alt tags your vision impaired visitors will be able to readyour content and the images using a screen reader and also allows your images tobe indexed into Google’s image search, thus opening another doorway for visitorsand traffic to your website.Hyperlinks and using the proper anchor text keywords is also a critical elementof on page SEO 23
  • 24. HTML Essentials ForRelative vs. Absolute LinksFirst off there are two different types of hyperlinks that you may use onyour website, relative and absoluteRelative links are hyperlinks that you can use that link to other pages on yourwebsite. They are shorter and don’t have the http://websitename attributeassociation. These type of links also make it easier and quicken the load timeof pages that are on your website.Absolute links on the other hand do use the http://website name in theattribute and require a call out from your website to load the page.A good practice is to use absolute links in your footer links and your HTMLsitemaps to encourage deep linking of your website by the search engines and touse relative links to speed up the load time in your main navigation menu for yourvisitors. 24
  • 25. HTML Essentials ForAnchor TagsIt is also a good practice to use keywords in your hyperlinks, these are calledanchor text links. These anchor text links tell your visitors and the search engineswhat the next page is all about.Also a couple tips:1: Avoid using the anchor tag phrase click here as this phrase tells thesearch engines nothing about the next page2: Also avoid the phrase “home page”. Use an anchor tag keyword phrase insteadsuch as Chicago Pizza Home if the main focus of your website is Chicago Pizza.Congratulations in completing this video in your SEORoadmapseries about HTML. 25
  • 26. 26

×