O que é um acordeão:

Os acordeões HTML são componentes da interface do usuário que permitem que os desenvolvedores da Web ocultem e mostrem o conteúdo de uma página da Web. Eles são frequentemente usados ​​para reduzir a confusão e melhorar a experiência do usuário, apresentando informações em um formato organizado e facilmente digerível. Quando um usuário clica no cabeçalho sanfona, o conteúdo associado é expandido ou recolhido.

Você conhece os seguintes termos?

Observação: você pode pular esta seção se conhecer esses termos.

• Renderização condicional: A renderização condicional é uma técnica usada na programação para exibir diferentes conteúdos ou componentes com base em determinadas condições. Ele permite que os desenvolvedores criem interfaces de usuário mais dinâmicas e interativas, onde determinados elementos são exibidos ou ocultados apenas dependendo das ações do usuário ou do estado do aplicativo.
• Rastreadores da Web: Os rastreadores da Web, também conhecidos como spiders ou bots, são programas automatizados usados ​​pelos mecanismos de pesquisa para navegar e indexar sites na Internet. Esses programas seguem links de uma página para outra, coletando informações como conteúdo da página, palavras-chave e metadados. Os dados coletados são usados ​​para criar índices e classificações de mecanismos de pesquisa.
• SEO (Search Engine Optimization): SEO, ou otimização de mecanismo de busca, refere-se à prática de otimizar o conteúdo e a estrutura de um site para melhorar sua classificação nas páginas de resultados dos mecanismos de pesquisa (SERPs). O objetivo do SEO é aumentar o tráfego orgânico para um site, tornando-o mais visível e atraente para os mecanismos de pesquisa e usuários.
• Manipulação de DOM (Modelo de Objeto de Dados): A manipulação de DOM refere-se ao processo de usar JavaScript para modificar a estrutura, o conteúdo ou o estilo de uma página da Web após ela ter sido carregada em um navegador. Isso pode ser obtido acessando e modificando o Document Object Model (DOM) da página da Web, que representa a estrutura hierárquica dos elementos HTML e XML. A manipulação de DOM é comumente usada no desenvolvimento da Web para criar interfaces de usuário interativas e dinâmicas.

1. Acordeões mais comumente terceirizados:

• h ttps://getbootstrap.com/docs/5.0/components/accordion/
• https://mui.com/material-ui/react-accordion/

• https://www.npmjs.com/package/rc-collapse
• https://www.npmjs.com/package/react-accessible-accordion

Observação:

Se você estiver usando bibliotecas de UI populares, como Bootstrap ou MUI, não precisa se preocupar com os seguintes problemas, a otimização já está resolvida.

Abordagens diferentes, mesmo resultado:

Dê uma olhada nas seguintes saídas (ambas parecem um pouco diferentes, pois nenhum CSS é aplicado):

Embora as saídas possam parecer iguais, há uma grande diferença nos códigos-fonte de ambas as abordagens. Pode não ser visualmente agradável ver as capturas de tela do código-fonte aqui, a seguir estão os links hospedados para ambas as abordagens, você pode acessar esses links e verificar a diferença nos códigos-fonte por si mesmo.

1. Sem renderização condicional:
2. https://accordion-test-nu.vercel.app/accordion/htmlTag
• https://accordion-test-nu.vercel.app/accordion/conditionalRendering
• Ao usar bibliotecas de front-end, as variáveis ​​de estado são necessárias para serem definidas e a lógica é necessária para ser escrita, isso se torna ainda pior quando tudo que você precisa usar é o DOM.
• O resumo não estará presente no código-fonte até que o cabeçalho seja clicado/tocado, ou seja, o acordeão seja expandido.
• Como resultado, os rastreadores da Web não poderão acessar o conteúdo do resumo.
• Isso pode causar um grande prejuízo ao seu SEO (Search Engine Optimization).

Tags “detalhes” e “resumo” em HTML:

Duas das tags HTML são as tags "detalhes" e "resumo" .

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Suporte do navegador:



Fragmento de código:

Como usar essas tags? Dê uma olhada no trecho de código a seguir:

<details>
      <summary>
          <h1>Abbreviation</h1>
      </summary>
      <p>JavaScript is often abbreviated as JS.</p>
</details>

Por que você deve considerar o uso dessa abordagem?

Mesmo quando o acordeão não é expandido, o código-fonte da página ainda terá o conteúdo do acordeão, ao contrário dos acordeões renderizados condicionalmente, portanto, os rastreadores da Web ainda terão acesso ao conteúdo escrito dentro dos acordeões que não é visível para o usuário conforme a página é carregada.

Esta é a única maneira de fazer isso?

Não, outra maneira de fazer isso é que você pode usar o atributo display do CSS para conseguir isso, não vamos analisar essa abordagem no artigo, mas o roteiro básico será definir o valor de exibição padrão como "nenhum" e quando o título é clicado/tocado, use a manipulação DOM (Document Object Model) ou a variável de estado para alterar a exibição para “bloco” (ou “bloco embutido”, etc).