How to hide elements without forgetting about SEO?

Question

css

Who also encountered What are the ways to properly hide HTML elements on the page, I heard cases when the site could not be found on Google due to the fact that the display property was used on the page with a value of none for the contact information in the header, instead of which there was a button to display it, removing which the site began to be indexed , what do you advise to use in such cases so that Google does not think that they are trying to hide something from it?

Answer 1

.visually-hidden {

  visibility: hidden;
  position: absolute;

  /* или */

  clip: rect(0, 0, 0, 0);
  position: absolute;

  /* или */

  transform: scale(0, 0);
  position: absolute;

  /* или */

  opacity: 0;
  position: absolute;
  pointer-events: none;
  user-select: none;

  /* или */

  height: 0;
  position: absolute;
  overflow: hidden;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
}

UPD:

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
}

How -to: Hide Content
Inclusively Hidden
Hiding Content for Accessibility
How-to: Hide Content