When I change the path to the correct routes in the url bar I get where I need to go and everything displays correctly. The actual router links are not taking me anywhere.
I have NgModule, Routes and RouterModule all imported properly in my only module. I have my components imported properly. router-outlet is properly placed. I have base href="/" in the head of my index.html.
Here is part of my html:
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
I expect to be directed to the correct path when I click on the link. Nothing happens when I do so.
Try as mentioned in docs
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
....
</ul>
After a lot of trail and error yesterday I realized the issue came because a lot of the code had been given to me as boilerplate code that had been manually upgraded from Angular6 to 8. I created a new project in the cli from scratch and copied over my components and had no issues.
I'm new to this.. cookie thing, but a friend of mine told me to check it out if I wanted my notification to disappear.
this is what I have
<font style="float:right">
<nav class="dropdownContainer">
<span class="lightpill-n dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> 1</span>
<ul class="dropdown">
<span class="text1">
Hello!
<p>We updated a few changes to the website. Keep yourself updated by reading more.
<p>
<span class="btn-read" style="text-align:right;">Read more</span>
</span>
</ul>
</nav>
</font>
When it's checked, I want this div to change.
<span class="lightpill-warn dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> 1</span>
To this:
<span class="lightpill-n dropdown-toggle"><i class="fa fa-bell dropdown-toggle"></i> </span>
I don't know if it's possible? But I hope it is, so I don't need to change the code all the time to take it away.
You will need to use a server or a client side langauge like PHP or Javascript to do that. HTML is only a markup language (no logic).
Hope I helped you.
I'm trying to get Google to show my breadcrumb in search results by using schema.org's breadcrumb micro data. When I use Google's structured data testing tool, the breadcrumb doesn't show in the search results sample and the following message appears: "The excerpt from the page will show up here. The reason we can't show text from your webpage is because the text depends on the query the user types."
I don't understand that because the URL I'm using doesn't contain a query string (it's http://www.fastfoodnutrition.org/6_r-taco-bell/8511_i-sausage-flatbread-melt-nutrition-facts.html)
Here's my code:
<ol class="breadcrumb" itemscope itemtype="http://schema.org/breadcrumb">
<li><a itemprop="url" href="/6_r-taco-bell/nutrition-facts.html" title="/6_r-taco-bell/nutrition-facts.html"><span itemprop="title">Taco Bell</span></a></li>
<li><a itemprop="url" href="/6_r-taco-bell/269_c-breakfast-nutrition-facts.html" title="/6_r-taco-bell/269_c-breakfast-nutrition-facts.html"><span itemprop="title">Breakfast</span></a></li>
<li>Sausage Flatbread Melt Nutrition Facts</li>
</ol>
Google doesn't recognize them yet, you should use http://data-vocabulary.org/Breadcrumb instead and it will be recognized by the RichSnippets tool as this Google post suggest. So your code would be:
<ol>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="/6_r-taco-bell/nutrition-facts.html" title="/6_r-taco-bell/nutrition-facts.html">
<span itemprop="title">Taco Bell</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a itemprop="url" href="/6_r-taco-bell/269_c-breakfast-nutrition-facts.html" title="/6_r-taco-bell/269_c-breakfast-nutrition-facts.html">
<span itemprop="title">Breakfast</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<span itemprop="title">Sausage Flatbread Melt Nutrition Facts</span>
</li>
</ol>
In the middle of my page I have this <div> which includes a list. When I view the page source I see all the code there, but the only thing actually rendered for the user to see in the browser is the "Brand" h4 heading. (note that this is actually generated dynamically, and this is example output)
Also I have checked in several different browsers on several different machines so I don't think thats the issue
Is there something obvious I'm missing here why my list is not displaying?
<div class="filter-group filter-group-brand">
<h4>Brand</h4>
<ul class="nav-brand ">
<li class="collection-container aimpoint active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimpoint"
href="/collections/firearm-accessories/aimpoint">
<i class="check-icon"></i> Aimpoint
</a>
</div>
</li>
<li class="collection-container aimshot active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag aimshot"
href="/collections/firearm-accessories/aimshot">
<i class="check-icon"></i> Aimshot
</a>
</div>
</li>
<li class="collection-container barska-optics active ">
<div class="collection-name">
<a title="Narrow selection to products matching tag barska-optics"
href="/collections/firearm-accessories/barska-optics">
<i class="check-icon"></i> Barska Optics
</a>
</div>
</li>
</ul>
</div>
Without any CSS this works well and <li> elements will appear. Always think about giving your CSS code when you have a display error/problem
You must have an error in your CSS file. Check for display:none or hidden properties, etc on the following classes : collection-name, new-brand, collection-container.
Also you have empty <i> tags, just in case it's an error.
In SEO terms...
Is it best to put the scheme on the parent containing all the links?
<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
Link 1
Link 2
Link 3
</nav>
...or should each link be considered as it's own element?
<nav>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 1</span>
</a>
</span>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 2</span>
</a>
</span>
<span itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="url" href="#">
<span itemprop="name">Link 3</span>
</a>
</span>
</nav>
If SiteNavigationElement is meant for the whole navigation (i.e., a navigation link list), your first example is correct.
If SiteNavigationElement is meant for a single navigation entry (i.e., a link in the navigation link list), your second example is correct.
I think Schema.org doesn’t unambiguously define which variant is meant, as they only say:
A navigation element of the page.
However, the parent type WebPageElement is defined as:
A web page element, like a table or an image
Also, all the other child types (like Table or WPFooter) seem to be used for the whole thing, and not specific parts of the thing.
So this seems to suggest that the whole navigation should be marked up, and not each single link:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>Link 1</li> <!-- don’t use the 'url' or 'name' property here! -->
<li>Link 2</li>
</ul>
</nav>
In this case, all the properties belong to the whole navigation, so that means the url property would specify a URL for this navigation (and not the URLs of the links in this navigation!).
According to Search Engine Land, it's supposed to look like this:
<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name">
<a itemprop="url" href="#">Link 1</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Link 2</a>
</li>
<li itemprop="name">
<a itemprop="url" href="#">Travel Resources</a>
</li>
</ul>
First answer is correct but I'd mix both for (HTML5-)semantic:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a itemprop="url" href="http://example.com/">
<span itemprop="name">Link 1</span>
</a>
</li>
</ul>
</nav>
<nav role="navigation">
<ul role="menubar" aria-activedescendant="">
<li role="presentation" itemscope itemtype="https://schema.org/SiteNavigationElement">
<a href="" role="menuitem" tabindex="-1" itemprop="url">
<span itemprop="name">Link 1</span>
</a>
</li>
</ul>
</nav>
schema.org/SiteNavigationElement extends WebPageElement and can be used to mark-up links, which would often make good contextual links. You can use this schema for your page menu.
<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li>
<a href="https://yoursite.com/" title="Link to Home" itemprop="url">
<span itemprop="name">Home</span>
</a>
</li>
<li>
<a href="https://yoursite.com/sample-page" title="Link to sample page" itemprop="url">
<span itemprop="name">sample page</span>
</a>
</li>
</ul>
OP's original question contained a good example of code. none of the answers do though ...
It seems everyone threw in a somewhat random answer ... You can test your schema microdata code using the following official google tool search.google.com/structured-data/testing-tool.
If you run the proposed answers in this tool you will notice that none give you the expected result: a list of SiteNavigationElement with a name & url
Some might argue that a whole menu might be considered a "navigation element" but I think it makes more sense for this denomination to designate a single navigation link. Plus if we use the SiteNavigationElement as a marker for the whole menu we have no way of associating names with URLs in the html.
To achieve this, you need to have each link be encapsulated by an itemscope property and they all need to have their own name and url itemprop (these are singleton as mentioned by #David Harkness, so they have to appear only once per itemprop)
<nav>
<ul>
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="http://example.com/link-1">
<span itemprop="name">Link 1</span>
</a>
</li>
<li itemscope itemtype="http://schema.org/SiteNavigationElement">
<a itemprop="url" href="http://example.com/link-2">
<span itemprop="name">Link 2</span>
</a>
</li>
</ul>
</nav>
The code above will yeld two different navigation elements, each with a name and an URL.
Note: the itemprop="url" attribute uses the anchor's href attribute as value
Consider the following code snippet adapted from the page source of habd.as:
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
<meta itemprop="name" content="Main Menu">
<a itemprop="url" class="active" href="/">habd.as</a>
<a itemprop="url" href="/code/">Code</a>
<a itemprop="url" href="/post/">Posts</a>
<a itemprop="url" href="/site/">Sites</a>
<a itemprop="url" href="/talk/">Talks</a>
</nav>
<nav itemscope itemtype="https://schema.org/SiteNavigationElement">
<meta itemprop="name" content="Utility Menu">
<a itemprop="url" href="/about/">About</a>
<a itemprop="url" href="/contact/">Contact</a>
</nav>
When there are multiple navigations as shown above, use of SiteNavigationElement to group navigation items affords the use of name
such that the grouping itself may be labeled. Labels for individual items within the groups can be obtained using the content of the links themselves.
Therefore, your first example is more correct despite assertions to the contrary.
I think the most elegent solution would be to use the hasPart property.
<nav itemscope="itemscope" itemtype="http://www.schema.org/SiteNavigationElement">
<a itemprop="hasPart" href="/link1.html">Link 1</a>
<a itemprop="hasPart" href="/link2.html">Link 2</a>
<a itemprop="hasPart" href="/link3.html">Link 3</a>
</nav>
Using Google's Structure Data Testing Tool informs that these links are part of the SiteNavigationElement and that Google should follow the links to those items:
Having considered all the above, I came to the following conclusion:
<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
<ul>
<li itemprop="hasPart">
<span itemprop="name">Home</span>
</li>
</nav>
Thus, each <li> is part of the SiteNavigationElement that has the url and name. I think this is the best option.
But do search engines need such redundant markup? They already know that href in is the url, and inside the tag <a>name is the name. What do you think about it?
Here's a quote from a post at Google support site, saying:
We are contemplating to implement Site Navigation Schema
https://schema.org/SiteNavigationElement
Will google respect it and display sitelinks if the schema is there or it will do it own thing anyway?
I sthere a point at all?
This type of top-level does not currently support Google. In fact,
this type does not even have a scope definition. It is unclear whether
this type affects a group, for example, a navigation menu, or only one
link.
This confirms my experience with their rich results test: only breadcrumbs are recognized. Yandex validates my microdata just fine. So SiteNavigationElement on your page seems to be as useless as it is valid.