i am working on responsive design site. I have a large navigation contained in one UL but want to turn it to two UL's on smaller screens.
From a technical point of view using media query this is not pausing me a problem but means that the same links are twice in the source.
Also, on some of the pages we want to add a condensed content for the smaller screens, again, I could have the two variations of the content into two DIV's, with alsways one hidden depending on the device.
The question I have is about the search engines, I am guessing this would be seen as content duplication and could lead to penalties. What would be the best option then?
Repeat navigation 2 times will not create real problem: even if Google do not ignore one of the navigations, will just mean that these links have a bit more of importante in your page.
But about duplicate content, this is bad for one aditional reason that is not just a possible SEO problem: you will serve two times same content, and will waste bandwidth. If this will be a real problem, maybe not if all time at least one have on CSS display:none, but is a better idea if you try to think a way that with only CSS you can serve the same content for diferent display widths.
Related
Good morning,
I am developing my Web Application using .Net Core 3.1 and Razor Pages.
In my application I need to display a large amount of data on a grid and would therefor like to rotate a standard grid 90 degrees. I would like to obtain something like the "Horizontal Scroll" of this blog post but instead of just scrolling horizontally I would likle to move the headers to the side and, as mentioned above, rotate the entire grid fields.
I can't find any API that suites my needs though. Does anyone have suggestions on something I could try? I wouldn't want to have to build the entire grid myself (with all the paging, filtering and ordering logic). I am open for alternative solutions as well!!
Thanks everyone!
This seems more like an HTML question, and does not really relate to Razor Pages. Here are a couple of examples of horizontal scrolling HTML tables:
https://mdbootstrap.com/docs/jquery/tables/scroll/#datatable-horizontal-scroll
https://datatables.net/examples/basic_init/scroll_x.html
You said you need to display a large amount of data, I think the
design you currently want is not suitable for the display of a large
amount of data.
Because if the title is on the left, then only one data can be displayed on each page, and each page needs to load the title, which will lead to great redundancy.
If you just want to display beautiful because of too many columns, I suggest you use the responsive property in jQuery datatable, which can dynamically display the number of columns according to your current page width, and collapse or display the extra columns.
You can refer to this.
I have a webpage whit many areas whose visibility can get toggled by the user.
The default visibility state for those area is hidden (css, display: none).
I don't have control to what's going to be put inside, but it could be a lot of images.
I saw with firefox's network observer all images where loaded with the page. This is quite a waste of bandwidth since the user might choose not to display every areas.
I came to a workarround, I put all that content inside a <script type="late-rendering"></script> and to avoid any potential conflict (eg: "" inside the content), I replace all "<" with "8691jQfdtxm" (randomly picked string). Then when the user want to make an area visible, I just fill the area with that content after replacing 8691jQfdtxm with "<".
It works fine, but I think proceeding like this will make crawlers (eg: Google) think my webpage is pure garbage. How could I avoid that?
Unless search engines were heavily relying on the alt tags of your images, or their filenames, there is little risk you will loose search rankings. If your site does load more quickly instead, it will provide a better user experience, which will be probably detected by Google, and this influences rankings positively.
Google executes a lot of Javascript these days. And your trick of breaking the html with a random string seems hokey to me.
I would preload all the textual content ( e.g. have it all in there on first load, with the div closed via display:none ). This content will not count as much as visible content - but it does count.
Then I'd do a delayed loading of the images. Like with make all your images something like:
<img src="blank.jpg" loadlater="realimage.jpg">
blank.jpg can be a tiny image. when the div opens you can use javascript/jquery to rewrite each src with loadlater.
I have a client who wants a feature on his site that he has seen on a competitors. It is essentially a group of icons where, when you mouseover them, an extended tooltip appears with content, links, etc...
The tooltips are not hidden divs. The tooltip content appears nowhere in the source code of the page itself. I believe the text of the tooltips is being called from an external file (e.g. an XML file or some such thing) via javascript.
My question(s) are this:
a) since the tooltip content isn't actually on the page, does it even affect SEO efforts at all?
b) would Google consider this spam (or at best questionable)?
Many thanks!
a) since the tooltip content isn't actually on the page, does it even
affect SEO efforts at all?
It wont affect SEO efforts in the slightest
b) would Google consider this spam (or at best questionable)?
No.
I should also point out from an accesibility point of view this is pretty bad practice as well.
a) No, all content loaded from external scripts won't be considered relevant for SEO. So it's just like you don't have extra content.
If your text is in display: none or visibility: hidden , it will affect SEO but make sure that user have access to the content.
b) No because you just want to give extra information and it won't be used by Google. Google takes content as spam when it is hidden and user doesn't have access.
Let says someone has 'legitimately' hidden content within a page.
To explain this further, imagine the following:
<div id="tab-one">This is the content inside tab one</div>
<div id="tab-two">This is the content inside tab two</div>
Tab one
Tab two
From an seo perspective, assuming that none of this is done to manipulate google. And in fact, "tab two" contains spam free, relevant data, how does this impact seo?
Will googlebot index, and conciser the 'hidden' content as part of the content of the page?
Will it use this content in the same way as though the content was "visible" on the page without the use of javacscript?
Thanks.
I don't believe there's an official Google response on this topic in the past, however, from experience I can tell you that Google will index the tabbed content just fine. You'll even see SEO traffic from the content. If you're site is fairly clean, I wouldn't worry about being flagged as having "hidden content", as long as the content is accessible by user action (e.g. clicking), and obviously clickable.
However, you'll want to consider this. Say for example, some of the content in a hidden tab is a product description such as "child safe". If a users is looking for "child safe products", and they arrive at your site through a search engine, they probably won't immediate see that information because they don't know it's buried behind a tab.
Most users don't spend a lot of time hunting, so to a user they might not find the content and bounce because they don't feel like they found the relevant information they were looking for. If you subscribe to the idea that Google and Bing use search query refinements as a search signal, this could potentially "harm" your SEO.
Personally, unless it's truly tertiary information, I wouldn't put it behind a tab unless crucial to the Ux. From my experience, users don't mind scrolling if the information is relevant ... but they tend to have "tab" blindness or only really interact with "hidden" elements when it's part of the navigation or already in a transactional flow.
p.s. An alternative is to use crawlable AJAX or pushState() to have the individual tabs indexed separately on their own URLs. But you'll want to be careful ... if you're rendering out the main content on the tab "pages", you might have a duplicate content concern. If it makes sense, you can potentially use the rel="next" and rel="prev" spec that Google released (but only supported by Google right now).
In Webmaster Tools you will find the option to Fetch as Google. There you can see just how Google is crawling the page. I've noticed some JavaScript carousel libraries are crawled, while others aren't. It's just a matter of how Google is able to read the JavaScript code.
As far as impact goes, it's not like all hidden content is bad. The content is still crawled (As you will see with the fetch). Now if there was an abundance of keyword-stuffed content, that would be susceptible to penalty.
Used correctly, it's definitely still beneficial.
The hidden content will be crawled, and this is not a problem for Google, many sites have this kind of menu. I suppose the hidden tabs are not keywords stuffed and useful for the users, so you shouldn't worry about this - it is useful for the user and googlebot!
I have been researching this for a few hours and I feel that I can't decide on what is right or wrong. This was asked before on Stackoverflow, but a couple of years ago so I thought I could ask again. I want to include H1 tags on my pages but hide them, because I have graphic in my banner, but I was taught to use an H1 tag for accessibility reasons.
I discovered that this can be considered SEO spamming and can get a site blacklisted, I do not want this. It was also discovered that using H1 tags can greatly increase the sites SEO when using relative headers.
So I want to use them and hide them, for two reasons, but avoid Google blacklisting my site, is there a standard accepted method to doing this, or will I need to choose between risking blacklisting and helping those with visual disabilities a better user experience?
Thanks in advance for any advice.
The simplest method is just to include the image with an alt attribute in the h1:
<h1><img src="banner.png" alt="my banner text" /></h1>
And you can be assured that you won't be penalized for that. I have not seen any definitive information that doing image replacement will result in a higher ranking than using alt properly. Like most SEO lore, there is very little data. That said, as long as you are not trying to game the search engines and present something different to the user and the search engine, it's unlikely you'll be penalized for using image replacement.
If you do do image replacement, be sure to position the text off-screen by using absolute positioning or negative margins rather than display: none or visibility: hidden so that screen reader users can access the content.
You're not improving accessibility if you hide headings.
If you do so with display: none; or visibility:hidden;, it's as if you never added them in the first place: they won't be read by screen readers and obviously won't be displayed if CSS are enabled.
If you do so with negative text-indent or left absolute positioning, only blind people will read them but not partially-sighted people that don't use any screen reader, and they're way more than blind people (perhaps 10 times).