Web Developers Tools and SEO Tagging Tips
With the advancement in the technology and the introduction of new devices, it’s now possible to access the Internet in ways never imagined (and those options keep expanding daily). Every website owner should be interested in making a site more visible to search engines. Understanding SEO is a large part of this process. It’s vital that content can be found on a wide range of devices from PCs to tablets.
Webmasters install various browser development tools to evaluate screen readers of various platforms like Windows, Mac or Linux. Using HTML5, better semantic markup and accessibility standards are now better than ever. The result is a website that’s more user-friendly and easier to manage in addition to being attractive to search engines. Since Google (and other search engines) still don’t understand images of videos, it’s important that these site items include the right SEO tag information. Site that are easily accesible become more shareable, and that means more site traffic.
Accessibility Web Developers Tools
To check accessibility issues and SEO, standard tools are available and compatible with all browsers. These tools help tremendously with the site building and development process. Here’s a breakdown of the best tools for each common browser.
Tools Available for Most Browsers
- Developer Tools – with this tool, objects visible in a browser can be turned on or off. For example: if you want to view a site without CSS, just disable ‘All Styles.’ Similarly, you can view a page without images or other objects. This is done to audit a page.
- Firebug – once it is installed, a button appears in the right corner of the browser and when clicked it provides the CSS output.
- SenSEO – this plugin helps to reveal the hidden SEO info on a page. Firefox reveals the information like title, description and keywords of page, web address, type of text, encoding, size and Meta tags. To use, right-click anywhere on a page and select ‘View Page Info.’ This is the information that search engines are viewing. With SenSEO, what search engines see on a page can be revealed. Search engines and social networks like Facebook or Google+, captures the text from meta-data provided in the page, which can be controlled.
Importing SEO Coding Tricks
- Language Check – In the HTML tag, put <html lang=”en-US”> to tell the search engine and text speech browser, that the content is in U.S. English. If a tag is in some other language, a browser will detect the language and offer translation options. If the page contains multiple languages, then codes for those languages must be embedded. These codes can be referenced from the site w3schools.com
- Proper Meta tags – provides additional information to page and provides information to search engines. Each page must have a proper title and description. The description must be brief (less than 160 characters). What to include: try to embed the primary keyword in both the title and description. You can also add other keywords, but they are becoming less important to search engines.
- Use HTML5 semantic codes – HTML is now in the 5th iteration thus the name HTML5. Start using the new tags provided in HTML5, they are easier to understand and prepare your page for future added functionality in browsers.
- Give proper heading and descriptions to the different sections (menus, content, sidebars, and footers) of your page to make them clearly defined and separated. They can be hidden or taken out of context for a normal browser viewer looking for content. You can shift them away from the screen by positioning absolute and padding it to -9999px.
- Use of ordered or UN-ordered list for related and sequential content, which should appear together like menus, comments and gallery.
- Use ‘Title’ attribute in links and images after hyperlink reference for additional information. Similarly ‘alt’ attribute is also necessary in images as per standard compliance. If an image is a link, ALT text must be the same as the title of the link.
- For mulch-level content, use headings h1 to h6 – which makes pages easier to navigate, easier to parse and easier to understand for both people and for search engines.
- Use <strong> to strongly emphasize (bold) text instead of <b> and <em> for emphasis instead of <i> – Both the tag <b> and <i> don’t add any search engine weight. Using the CSS, <em> (font-style:italic;) and <strong> (font-weight:bold;) can be also stylized.
- Use of <blockquote> to indicate quotation – this code can be used when content has been taken from another website, or when you are quoting someone. This validates the text as it can be linked to the source making it more transparent (important to do with the new Google). Use the <cite> tag when the content refers to another source. Link the source so that viewers can access that page easily.
- Use <small> tag for copyright statements, conditions, rules and legal disclaimers.
- Use <meter> tag to display the data range like “8 out of 10”. <meter value=”8” minimum=”1” maximum=”5”>. This is a very good tag for sites, since it displays ratings, reviews etc.
- <abbr> tag for abbreviations and acronyms to provide extra information. When a reader mouses over this tag, a small pop-up will display additional information.
Web Developers Tools and SEO Tagging Tips: In The End…
When you’re on top of the latest plugins and SEO tags to use, it’s a win-win situation – both for you and for search engines. Questions?
