Tornando o Flutter Web Apps amigável para SEO

Publicado em 22/04/202322/04/2023 por cacpnrj

Tempo de leitura: 4 minutes

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ção RenderController() 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 um RenderConroller() opcional
ImageRenderer Precisa passar child: Widget, link: String, alt: String e um RenderConroller() 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 da`Semantics`:

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.

seo_renderer | Flutter package

A flutter plugin to render text widgets as html for SEO purpose.

Dart packages

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.

Twittar

0 Compart.