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.
Simply put, I aim to streamline objects by discarding unnecessary keys. Imagine a scenario where a third party API sends back JSON data with numerous attributes that hold no importance to you. obj = { name: ..., id: ..., description: ..., blah: .. ...
I'm currently faced with the task of generating a specific URL to make an API call using jQuery's .ajax() function: https://www.airnowapi.org/aq/forecast/zipCode/?format=application/json&zipCode=02144&date=2016-11-26&distance=25& ...
i'm trying to generate an object using iteration like this: opts = [{label:1, value:1}, {label:4, value:4}] the values for this object are coming from an array portArray = [1,4] I'm attempting to do const portArray = [1,4]; return { ...
I'm struggling to understand why the URL is updating but leading to the incorrect view. Once a user is authenticated with passport, the URL changes to my code (/clients) but it redirects back to the homepage view. After authentication, I want the us ...
Here's a thought I have: If we have an array of objects like this: [ { "name": "Kirk", "count": 1 }, { "name": "Spock", "count": 1 }, { "name": "Kirk", "count": 1 } ] I would l ...
Let's talk about a scenario with a Link setup like this: <Link to={`/samelocation/${id}`} state={{ state1: 'hello' }}> This link is nested in a sub-component within the main component situated at /samelocation/:id. To ensure that the ...
I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...
Is there a reason why server updates are not appearing on the client browser? Could it be that a specific attribute value needs to be modified or is this related to caching? app.get('/hello' , (_ , res) => { res.header({ 'Cach ...
Application Inquiry I am seeking assistance with a web page that features a title, and a sticky menu bar at the top, allowing the rest of the space for displaying content. When a menu item is clicked, the objective is to load a page in the content at full ...
I have successfully created a map using PHP and Highmaps (from Highcharts libraries) that retrieves data from a SQL Server database. Everything is working smoothly so far! However, I am now facing the challenge of sending a value from the map to another PH ...
My plan is to utilize Vue.js for the Frontend and Firebase Functions (Express.js) + Firestore for the Backend. Step 0: I initiated a new project on Google Firebase, then created a new Service Account with Owner's permissions to be used with Admin SDK ...
I am trying to create a feature where my textfields are automatically disabled, but can be enabled for editing by clicking an 'Edit' button. Clicking the button again should disable the textfields and save any edits made. I have experimented with ...
Looking to incorporate a select list into my website using a button. I must utilize nodes for access within the DOM to retrieve its value later, so innerHTML isn't an option. Experiencing difficulty as createTextNode seems to encase my list in quota ...
I am facing a challenge with handling a string that contains Lorem Ipsum text. I have JSON data that specifies the start and end offsets of certain sections within the text that I need to highlight. The approach I am currently using involves sorting the JS ...
Is there a way to clear the content of my textarea on click? Below is the code snippet: http://jsfiddle.net/QMfyP/ <textarea name="adventage" style="width:400px; border-radius: 3px; border-left: 4px solid #6C3" id="adventage" cols="45" rows="5">Sh ...
Is it possible to create a jQuery background vertical animation that smoothly transitions the sprite position, giving the appearance of fading into the next position? Currently, my code (view demo jsfiddle link below) moves the sprite to the correct backgr ...
I am seeking to extract the desired output from the provided input: Input Configuration: var inputParams = { 'inputDetails' :[ { 'field' : 'specificationName', 'value' : 'strong'}, { ...
I am new to node.js and I'm trying to take advantage of asynchronous and event-driven behavior in my code. I used to think that in node, anything involving an Event object would result in asynchronous execution. So I decided to test this theory with ...
I need assistance with some client-side tasks using Javascript. In my view, I serialize a Queryset from my models into JSON and pass it to the template. data = serializers.serialize("json", Profile.objects.filter(user_id=self.request.user)) This results ...
I have a directory where I store HTML pages. Using the PHP include function, I am adding these pages to my index.php file by referencing them with a URL parameter value. The URL parameter "xpage" corresponds to the page names stored in another folder, whil ...