Demos

The official documentation of some DevTools products serves as a single point of reference for their conceptual content, examples, API, and demos—for example, Kendo UI for Angular.

However, the more mature DevTools products, such as Telerik UI for ASP.NET AJAX, follow a previously adopted approach and host their conceptual documentation and examples on a documentation subdomain, and their demos on another subdomain.

This article targets the mature DevTools products which host their demos on a separate website but the SEO recommendations can be taken into consideration by all DevTools products when applicable.

In This Article

• General
  
• Metadata
• SEO Recommendations

General

• In DevTools, the demos are an intrinsic part of the product documentation even though they may reside on a separate domain.
• All recommendations suggested by this Style Guide that are applicable to the demos sites apply to their metadata and descriptive content in full force.

Metadata

Users refer to the demos very often to more easily and faster understand how the DevTools technology, logic, and features function. Therefore, it is of huge importance to better position the DevTools demo sites in search engine results.

To be positioned better by search engines, the demos require unique meta descriptions and page titles (displayed on hovering over the tab), both of which are crucial in organic searches. For more information on each front matter entry, go to the article on metadata requirements.

As with the page title, displayed in the tab, of the documentation articles in DevTools, the page titles of the demos can also be automatically generated. If the demos page titles are not yet automated for your product, first consult with the SEO team and agree on a template.

SEO Recommendations

The specific SEO recommendations for the descriptive content of a demo include the following milestones:

• Content: Write longer but meaningful content on the demo pages. Do not leave any demo page without textual content and an introduction of the example.
• Keywords: Note the product keywords and use some of the most frequently searched for ones.
• Title: Add a descriptive title to the demo, including:
  • The technology.
  • The name of the component.
  • (If applicable) The name of the feature.
• Description: In the Description section, add descriptive content to each demo. Try to provide answers to the following questions:
  • Which is the demonstrated component in the demo?
  • Which is the technology?
  • Which is the demonstrated feature?
  • What brief, but meaningful, general knowledge I can share about the feature itself?
    
  • What is the scenario the demo implements?
  • What are the specifics of the demo, such as the API methods, events, directives, and so on, it uses?
  • Is it necessary to add any additional information that will provide an easier grasp of the demonstrated approaches?
• Features: In component Overview demos, from the Functionality and Features/Key Features section:
  • List the features.
  • Link the features to the respective documentation topics.
  • Add brief explanations to them. Don’t reinvent the wheel–copy-paste the content from the Overview page of the component.
  • If you decide to list specific API calls, link them to the respective API topics too.
• Links: Add links, a lot of links.
  • From the Description section, link:
    • The API calls to their respective API documentation.
    • The features you mention to their respective topics in the product documentation.
  • From the Support & Learning Resources section, link:
    • The documentation topic or topics that are related to the demo.
    • The API topics that are related to the demo.
    • The Knowledge Base section.
    • Related forum threads.
    • The Demo Homepage of the component.
  • From the Additional Resources section, link:
    • The Virtual Classroom training.
    • The product blog.
    • The product videos.
    • The product page of the component.
    • The product roadmap.
    • The product pricing.
• Images: If you include images, add an <alt> description for each. The <alt> information is very important not only for SEO, but is also an irreplaceable source of information for screen readers and in cases when images are not properly displayed.