Meta tags can be used to provide information about the application for search engines that may be crawling the website. This information can contain a great amount of detail about the services the application offers, such as it's geographic location, the date it was last modified, type of content offered and much more. Shown below are examples of how to structure this data for the entire application or just individual pages within it. The example below refers to a webstie appliaction that contains 3 pages. Index(Home), Services and Contact.
Add Global Meta tags
Located in the layout.html document. The meta tags below apply to each page of the application.
<meta name="description" content="application-description"> <meta name="keywords" content="keyword-01, keyword-02, keyword-03"> <meta name="author" content="name-of-developer"> <meta name="revised" content="Weekday, Month Day, Year, Time AM/PM"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="coverage" content="Worldwide"> <meta name="distribution" content="Global">
Local meta tags
The follow provide the URL of the specific web page and inform search robots that this is not the index page of the website. These tags can be applied to any of the HTML documents that are only ment for that particular page and will not be used accross the application.
<!-- local meta tags [home] --> <meta name="url" content="https://example.com/index"> <meta name="robots" content="noindex"> <meta name="googlebot" content="noindex"> <!-- local meta tags [services] --> <meta name="url" content="https://example.com/services"> <meta name="robots" content="noindex"> <meta name="googlebot" content="noindex"> <!-- local meta tags [contact] --> <meta name="url" content="https://example.com/contact"> <meta name="robots" content="noindex"> <meta name="googlebot" content="noindex">
A breadcrumb list is used to provide an outline or roadmap of the application. Such as the location of each document, it's name and it's position. Shown below, is an example of a breadcrumb list for an application with 3 main pages (index, services and contact)
Placed in the head section of the index page.
<!--Json Search Engine Breadcrumb Script--> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement":[{ "@type": "ListItem", "position": 1, "item":{ "@id": "https://example.com", "name": "Home"}},{ "@type": "ListItem", "position": 2, "item":{ "@id": "https://example.com/services", "name": "Services"}},{ "@type": "ListItem", "position": 3, "item":{ "@id": "https://example.com/contact", "name": "Contact"}}] } </script>
General information about the application can be provided for search engines using the following json script located in the head section. This information includes the type of business, the url of the application, contact information and hours of operation. An example of this documentation is show below.
Placed in the head section of the index page below the breadcrumb list.
<!-- Json Structured Data Script Index --> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "LocalBusiness", "name" : "Compant Name", "description": "Company Description", "url": "https://example.com", "logo": "https://example.com/static/images/schema/logo/1x1/logo.png", "telephone" : "+1-555-555-5555", "priceRange" : "C$500-C$5000", "geo": {"@type": "GeoCoordinates", "latitude": "00.00", "longitude": "-00.00"}, "address" : {"@type" : "PostalAddress", "addressLocality" : "Some Place"}, "contactPoint" : [{ "@type" : "ContactPoint", "telephone" : "+1-555-555-5555", "contactType" : "Customer service", "email" : "info@example.com"}], "openingHoursSpecification" : [{ "@type" : "OpeningHoursSpecification", "dayOfWeek" : [ "Monday", "Tuesday", "Wednesday", "Thursday", "Friday"], "opens" : "09:00", "closes" : "17:00"}] }