Tornando o Flutter Web Apps amigável para SEO
Hoje em dia, o flutter será popular para o desenvolvimento de aplicativos para dispositivos móveis e Web. Todos nós sabemos que a versão para desktop está em beta e o flutter 2.0 bateu com a versão estável do Flutter web. Todos nós sabemos que quando a web entra em cena, o público-alvo é muito maior (em todo o mundo). Nosso site não pode ser acessado facilmente, onde os usuários apenas digitam e pesquisam em um mecanismo de pesquisa e obtemos o resultado. O índice é importante quando o site é para empresas e outros.
O SEO é uma prioridade quando queremos sugerir que o público escolha nosso aplicativo aumentando o índice da pesquisa.
O SEO é possível com o flutter web?
Essa pergunta vem à mente antes ou depois de desenvolver o aplicativo da web para flutter. Melhor suporte de SEO para um aplicativo da web é o objetivo do próximo lançamento dos desenvolvedores do Flutter.
Aqui está o resultado do meu site depois de torná-lo amigável para SEO
Antes :
Depois :
SEO
A otimização do mecanismo de pesquisa é o processo de melhorar a qualidade e a quantidade do tráfego do site para um site ou página da Web a partir dos mecanismos de pesquisa. O SEO visa o tráfego não pago em vez do tráfego direto ou tráfego pago.
O que é SEO amigável?
Tornar um site compatível com SEO significa que o Google e outros mecanismos de pesquisa podem rastrear cada página do site com eficiência, interpretar o conteúdo de maneira eficaz e indexá-lo em seu banco de dados. Uma vez indexados, eles podem servir as páginas da web mais relevantes e valiosas para seus usuários com base nos tópicos que pesquisam.
Etapas que segui para tornar o site SEO amigável
- O tamanho do título deve ter no mínimo 207 caracteres.
- O comprimento da descrição de no mínimo 690 caracteres será benéfico.
- Precisa adicionar palavras-chave meta em index.html (a palavra-chave deve ser adequada de acordo com o conteúdo da página e precisa adicionar no mínimo 10 palavras-chave para arquivar um bom SEO).
- Precisa adicionar um ponto de vista para otimização móvel.
- Envolver cada texto, imagem e link com o pacote seo_render será útil para tornar o site amigável para SEO. Ele é usado para renderizar texto, links, widgets de imagens como elementos HTML para fins de SEO. (ainda está em desenvolvimento).
- O widget de semântica também pode ajudar a tornar o site compatível com SEO.
Meta Tags para otimização de SEO
As Marcas do Open Graph
og:title - O título do seu objeto como deve aparecer no gráfico, e.g., "The Rock". og:type - O tipo do seu objeto, e.g., "video.movie". Dependendo do tipo especificado, outras propriedades também podem ser necessárias. og:image - Uma URL de imagem que deve representar seu objeto dentro do gráfico. og:url - A URL canônica do seu objeto que será usada como ID permanente no gráfico, e.g., "https://www.imdb.com/title/tt0117500/".
Existem muitas propriedades disponíveis em meta tags. você pode encontrar aqui
Usando a biblioteca seo_render para renderizar widgets de texto como elementos HTML
- Primeiro, precisamos adicionar um
RouteObserver
para remover automaticamente os elementos Html quando retirados da pilha de navegação. Para fazer isso basta adicionar esta linha no MaterialApp
navigatorObservers: <RouteObserver<ModalRoute<void>>[routeObserver],
- Adicione esta dependência ao seu
pubspec.yaml
dependencies: seo_renderer: ^0.6.0
- Obtenha o package do Pub
flutter packages get
- Todos os textos, imagens e links devem ser distorcidos assim
//Rendering Text (Apenas passe seu Text/RichText) TextRenderer( text: Text( 'Text here'), ), //Rendering Link LinkRenderer( anchorText: 'Flutter', link: 'https://www.flutter.dev', child: OutlinedButton( onPressed: () { launch('https://www.flutter.dev'); }, child: Text('Flutter.dev'), ), ), //Rendering Image ImageRenderer( alt: 'Flutter logo', link: 'https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup.png', child: Image.network( "https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup.png" ), ),
- TextRenderer Basta passar seu
Text/RichText
Widget e uma opçãoRenderController()
que pode ser usada para atualizar o conteúdo (posição) no caso de Scrollable Content/ Changed Position. - LinkRenderer Precisa passar
child
:Widget, anchorText: String, link: String
e umRenderConroller()
opcional - ImageRenderer Precisa passar
child: Widget, link: String, alt: String
e umRenderConroller()
opcional
Semântica
Este widget anota a árvore de widgets com uma descrição do significado dos widgets.
Ele é usado por ferramentas de acessibilidade, mecanismos de pesquisa e outros softwares de análise semântica para determinar o significado do aplicativo.
Essa semântica fornecerá informações aos serviços de acessibilidade em dispositivos móveis.
- Semantics quando você deseja descrever apenas 1 Widget específico
- MergeSemantics quando você deseja descrever um grupo de Widgets. Neste caso, as diferentes Semânticas que serão definidas na sub-árvore deste nó serão mescladas em uma única Semântica. Isso pode ser muito útil para reagrupar a semântica, porém, no caso de semântica conflitante, o resultado pode ser sem sentido.
Atributos daSemantics
:
Existem muitos atributos disponíveis na semântica como,
label
: Fornece uma descrição textual do Widget. É a informação semântica básica.container
: se este nó introduz um novo nó semântico (SemanticsNode) na árvore semântica. Não pode ser separado ou mesclado pela semântica da camada superior, ou seja, independente.explicitChildNodes
: O padrão é false, indicando se é necessário forçar a exibição das informações semânticas do widget filho. Pode ser entendido como semântica dividida.scopesRoute
: Se não estiver vazio, se o nó corresponder à raiz da subárvore, a subárvore deve declarar o nome da rota. Normalmente, comChildNodes explícitosDefina-o como true e use-o em saltos de roteamento, como saltos de página, diálogo, planilha inferior, menu pop-up e parte pop-up.
Aqui são mostrados alguns atributos de semântica,
Semantics( label: 'Counter button', hint: 'Press to increase', value: '$_counter', onTap: () { setState(() { _counter++; }); } child: Text( '$_counter', style: Theme.of(context).textTheme.display1, ), );
Se você deseja depurar a semântica do seu aplicativo, pode definir a propriedade showSemanticsDebugger do seu MaterialApp como true. Isso forçará o Flutter a gerar uma sobreposição para visualizar a árvore semântica.
Seguindo estas etapas, você pode tornar a web flutter amigável para SEO. Ainda assim, há muitas coisas que podem tornar um site compatível com SEO. Essas etapas não podem aumentar o SEO da web flutuante, mas podem tornar nosso site compatível com SEO.