While I have been hiding content using display:none; in css, there are concerns that Google may not like this approach. However, due to the needs of jQuery animations, it has been necessary for me. Recently, I have come across a new method for hiding content with Javascript/jQuery.
$(this).css({display:'none'});
I am now wondering if this method is more favourable than using display:none;. Will Google view this as being more friendly? Check out this fiddle to see it in action.
If you want your website to be easily crawled by Google, it's important to follow their guidelines for site safety.
For more information on these guidelines, visit: https://support.google.com/webmasters/answer/35769
It's worth noting that Google's bot can now understand and run basic JavaScript on web pages to accurately reflect the user experience:
You can learn more about this here: https://support.google.com/webmasters/answer/81766?hl=en
Here's some advice on hidden text or links from Google: https://support.google.com/webmasters/answer/66353
Attempting to hide text or links in your content in order to manipulate Google’s search rankings is considered deceptive and goes against Google’s Webmaster Guidelines. Text (such as excessive keywords) can be concealed in a variety of ways, including:
- Placing white text on a white background or behind an image
- Using CSS to position text off-screen or setting font size to 0
- Hiding a link by linking only a small character, like a hyphen within a paragraph
One of the key concerns for me is that when you hide content in the css and then use javascript to show it, visitors who have disabled javascript won't be able to see the content. Using $(this).css({display:'none'}); to hide the content ensures that it will be visible by default for those without javascript enabled.
This issue frequently arises when trying to prevent a flash of unstyled content. For more insights and solutions, visit
It is completely acceptable for Google to use CSS display:none. Utilizing JavaScript will not provide any advantages from an SEO perspective.
For more information, check out this example:
The issue arises when hiding content (using either method) solely to deceive Google... such as keyword stuffing or including spammy links. In such cases, you risk getting penalized and removed entirely from Google's index. You would then need to go through a manual process to rectify your site and await verification for re-inclusion. As long as you are not engaging in deceptive practices and are simply hiding/showing user-friendly content, you should be in good shape.
I've learned that content placed within a hidden display: none; block is not picked up by search engine crawlers or screen readers. If you choose to hide it using javascript, such as with the .css() or .hide() methods, it will be hidden after being crawled.
One drawback is that there might be a brief flash of the hidden content before the javascript kicks in. Consider utilizing the .visuallyhidden technique if you want your content to be more accessible to technology devices.
Currently working on developing a website using Github Pages where I need users to be directed to a specific page after choosing the final option. I am extracting data from a JSON file. I attempted to include an anchor tag in the JSON but it does not red ...
I am working on a project where I need to organize items into two columns and allow users to drag and drop them between the columns. I also want the layout to be saved in the localStorage so that it persists when the page is reloaded. Here is my progress ...
I'm encountering an issue where the array of selected devices is not getting the values when attempting to add multiple devices to a group. Can someone identify the problem or suggest an alternative method? I referred to http://www.dotnetawesome.com/2 ...
Currently working on integrating ajax with php. I have a set of buttons within a loop, and I am trying to display or fetch data (number) in the correct place/div using the "attr" method in jQuery. However, it seems that it is not functioning as expected on ...
I recently encountered an issue where my code was being converted into a string instead of the HTML output I intended to achieve. My main query is how can I convert this into innerHTML before it gets converted? Is there any way to accomplish this task if ...
I have a question regarding jQuery. Consider the following structure: <div class="page"> <p>Lorem ipsum....</p> <p>Lorem ipsum....</p> ... </div> I want to transform it into this format: <div class="pa ...
They provided me with this code snippet <iframe width="424" height="916" src="//invis.io/U5574OIA3" frameborder="0" allowfullscreen></iframe> However, I am unsure of how to properly embed it. I attempted to insert the line into my website but ...
I am looking to make two elements take up a precise percentage of the parent's width, while also including margins between them. Here is my current setup: <div class='wrap'> <div class='element'>HELLO</div>< ...
While tidying up my CSS and JavaScript, I may have gone a bit overboard. The code seems to work fine on Chrome, Safari, and Firefox, but it's causing chaos in IE10. Check out the code here <div id="bgmbutton1"> <img id="button1" src ...
In my project, I am working with 3 files: App, BlogList, BlogItem. The goal is to enable users to delete a post if they choose to. However, when using splice method, I encountered the following error: The property or method "removePost" is not defined o ...
Apologies, I spent a few years immersed in the world of IT. Now, onto my query: I have a lengthy ".css" file with numerous structures like color: #567567; within it. Is there a way to utilize a construction similar to color: $mycolor or is this not po ...
I am trying to change the style of :before based on a condition. I attempted to implement the solution provided at , but it did not work as expected. Here is my code: .sender:before { content: ""; width: 0px; ...
I've been working on an async function that sends AJAX requests based on the previous response. The function is functioning properly, but it's sending multiple requests in quick succession. I need to implement a 5-second interval between each req ...
Recently, I've been delving into the world of float property in CSS. This is the HTML code snippet I'm working with: .left { float: left; text-align: center; width: 25%; } .normal { text-align: center; width: 25%; } <div class="lef ...
I have a JavaScript script (a) with a function as follows: function csf_viewport_bounds() { var bounds = map.getBounds(); var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); var maxLat = ne.lat(); var maxLong = ne.lng(); ...
I'm having an issue with the C# script below that is supposed to remove HTML tags from a description column in SSIS. I attempted to include the unicode value : in the htmlTagPattern string, but it's not working as expected. Any help would ...
Recently, I came across a helpful jQuery demo that demonstrated how to create a popup window on my website. For those interested, the demo link can be accessed here: http://jqueryui.com/dialog/#modal-message The design of the window I am aiming to replica ...
If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...
http://jsfiddle.net/e8B9j/2/ HTML <div class="box" style="width:700px">This is a sentence</div> <div class="box" style="width:600px">This is a sentence</div> <div class="box" style="width:500px">This is a sentence</div> ...
Struggling with a highly complex JSON object, I am trying to list out all the properties and keys exactly as they are. While I have grasped the concept, I am having trouble with the execution. Every time the object contains another object, I need to call ...