HTML 5 - SEO
SEO - Search Engine Optimization
SEO is not a cut and dry subject. It requires careful consideration with many aspects of creating a web page/site that will be searchable by a search engine such as Google or Bing.
How does Google Search work?
Google is a fully automated search engine that uses programs called crawlers to explore the web constantly, looking for pages to add to their index. You usually don't need to do anything except publish your site on the web. In fact, the vast majority of sites listed in our results are found and added automatically as we crawl the web.
The Title Tag <title>
The <title> HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored. The contents of a page title can have significant implications for search engine optimization (SEO). In general, a longer, descriptive title performs better than short or generic titles. The content of the title is one of the components used by search engine algorithms to decide the order in which to list pages in search results. Also, the title is the initial "hook" by which you grab the attention of readers glancing at the search results page.
Best Practices
- Write a unique title tag for each page. Try to make sure your titles are as unique as possible within your own site. Duplicate—or near-duplicate—titles can contribute to inaccurate search results.
- Avoid one or two word titles. Use a descriptive phrase, or a term-definition pairing for glossary or reference-style pages.
- Be brief, but descriptive.
- Keep it under 60 characters. Search engines typically display about the first 55-60 characters of a page title. Text beyond that may be lost, so try not to have titles longer than that. If you must use a longer title, make sure the important parts come earlier and that nothing critical is in the part of the title that is likely to be dropped.
- Avoid generic and vague titles.
- Use sentence case or title case.
- Create something click-worthy—not clickbait. Don't use "keyword blobs." If your title is just a list of words, algorithms often reduce your page's position in the search results.
- Match search intent.
- Include your target keyword where it makes sense.
Meta Tags
The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements. Metadata is in its very simplest definition data that describes data. The meta tags are located in the <head> section of the web page. They can be used to describe the document, such as who wrote it, its summary and more.
Types Of Meta Tags
There are many types of meta tags that are used for different tasks.
charset
This attribute declares the document's character encoding. If the attribute is present, its value must be an ASCII case-insensitive match for the string "utf-8", because UTF-8 is the only valid encoding for HTML5 documents. <meta> elements which declare a character encoding must be located entirely within the first 1024 bytes of the document.
A document that uses HTML5 rather than HTML4 or below starts with the <!DOCTYPE html> tag.
viewport
The viewport gives hints about the size of the initial size of the viewport. A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode). Content outside the viewport is not visible onscreen until scrolled into view. This meta tag is used primarily to deal with the fact that web pages are no longer only viewed on computer monitors, but may be viewed on a tablet or a mobile phone. The following example is probably the most common way to create this tag to enable the page to be viewed on different devices.
| Value | Possible subvalues | Description |
|---|---|---|
| width | A positive integer number, or the text device-width | Defines the pixel width of the viewport that you want the website to be rendered at. |
| height | A positive integer, or the text device-height | Defines the height of the viewport. Not used by any browser. |
| initial-scale | A positive number between 0.0 and 10.0 | Defines the ratio between the device width (device-width in portrait mode or device-height in landscape mode) and the viewport size. |
| maximum-scale | A positive number between 0.0 and 10.0 | Defines the maximum amount to zoom in. It must be greater or equal to the minimum-scale or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. |
| minimum-scale | A positive number between 0.0 and 10.0 | Defines the minimum zoom level. It must be smaller or equal to the maximum-scale or the behavior is undefined. Browser settings can ignore this rule and iOS10+ ignores it by default. |
| user-scalable | yes or no | If set to no, the user is not able to zoom in the webpage. The default is yes. Browser settings can ignore this rule, and iOS10+ ignores it by default. |
| viewport-fit | auto, contain or cover |
The auto value doesn't affect the initial layout viewport, and the whole web page is viewable. The contain value means that the viewport is scaled to fit the largest rectangle inscribed within the display. The cover value means that the viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display. |
author
The name of the document's author.
description
A short and accurate summary of the content of the page. Several browsers, like Firefox and Opera, use this as the default description of bookmarked pages. The meta description summarizes the page's content. Search engines often use it for the snippet in search results.
Best Practices
- Write a unique description for each page.
- Try to summarize content accurately.
- Avoid generic descriptions.
- Use sentence case.
- Create something click-worthy, not clickbait.
- Match search intent.
- Include your target keyword where it makes sense.
- Keep it under 160 characters.
Open Graph Protocol
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn't a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
To turn your web pages into graph objects, you need to add basic metadata to your page. This requires placing additional <meta> tags in the <head> of your web page. The four required properties for every page are:
| og:title | The title of your object as it should appear within the graph, e.g., "The Rock". |
|---|---|
| og:type | The type of your object, e.g., "article", "video.movie". Depending on the type you specify, other properties may also be required. |
| og:image | An image URL which should represent your object within the graph. |
| og:url | The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "https://www.imdb.com/title/tt0117500/". |
Meta Tags For Social Media
When users choose to share these links, it is tasked to the web developer to make sure that the associated web pages are properly prepared, which is what we'll look at now. Facebook and Twitter are, by far, the most popular social media platforms, so let's focus on those two.
Most content is shared to Facebook as a URL, so it's important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook.
Without these Open Graph tags, the Facebook Crawler uses internal heuristics to make a best guess about the title, description, and preview image for your content. Designate this info explicitly with Open Graph tags to ensure the highest quality posts on Facebook.
Here's an example of content formatted with Open Graph tags for optimal display on Facebook: