Translate

Mostrar mensagens com a etiqueta Auditoria HTML. Mostrar todas as mensagens
Mostrar mensagens com a etiqueta Auditoria HTML. Mostrar todas as mensagens

sábado, 7 de julho de 2018

Blog Analytics : Parte V – Construindo o Bellacosa Blog Doctor Desenvolvendo um Scanner Automático de HTML, SEO e Qualidade para Blogger

 

Bellacosa Mainframe e o blog analytics parte v

☕ Um Café no Bellacosa Mainframe

Blog Analytics : Parte V – Construindo o Bellacosa Blog Doctor

Desenvolvendo um Scanner Automático de HTML, SEO e Qualidade para Blogger

Quando o Feed Atom Deixa de Ser Apenas um Arquivo XML e se Transforma no SYSUDUMP de um Acervo Digital

☕ Um Café no Bellacosa Mainframe

Nas quatro primeiras partes desta série percorremos um caminho que começou com uma suspeita aparentemente pequena e terminou em uma descoberta muito maior.

Primeiro percebemos que o Blogger podia armazenar HTML invisível.

Depois identificamos os resíduos deixados por inteligência artificial, Microsoft Word, Google Docs e outros editores.

Em seguida aprendemos que limpar milhares de posts sem planejamento poderia causar mais problemas do que benefícios.

Por fim, construímos um checklist de auditoria para blogs antigos, tratando um acervo editorial como um sistema crítico que precisa de manutenção preventiva.

Agora chegamos ao ponto em que a teoria precisa virar ferramenta.

Não basta saber que existem resíduos.

Não basta abrir manualmente cada artigo.

Não basta analisar visualmente milhares de páginas.

Precisamos de um scanner.

Um programa capaz de receber o Feed Atom de um blog, percorrer milhares de publicações, interpretar o HTML, aplicar regras de qualidade, calcular indicadores, classificar riscos e produzir um relatório compreensível.

Em outras palavras:

Precisamos construir o Bellacosa Blog Doctor.


O Que é o Bellacosa Blog Doctor?

O Bellacosa Blog Doctor é uma ferramenta de auditoria técnica para Blogger.

Seu objetivo não é editar automaticamente todos os artigos.

Seu objetivo é muito mais importante:

diagnosticar antes de corrigir.

Em ambientes IBM Mainframe, ninguém altera um sistema crítico sem antes reunir evidências.

Primeiro olhamos:

  • logs;

  • dumps;

  • traces;

  • métricas;

  • códigos de retorno;

  • históricos de execução;

  • impactos;

  • dependências.

Somente depois decidimos o que fazer.

O Blog Doctor segue exatamente essa filosofia.

Ele não deve agir como um aspirador de pó cego que remove tudo que parece estranho.

Ele deve funcionar como um laboratório forense digital.

Receber dados.

Analisar.

Classificar.

Explicar.

Priorizar.

Gerar um laudo.


A Filosofia Mainframe Aplicada ao Blogger

Um mainframe não é confiável apenas porque possui hardware robusto.

Ele é confiável porque toda sua operação é baseada em controle, observabilidade e diagnóstico.

Quando um job falha, existem pistas:

  • RC;

  • ABEND;

  • SYSOUT;

  • JESMSGLG;

  • JESYSMSG;

  • CEEDUMP;

  • SYSUDUMP;

  • mensagens do subsistema;

  • registros SMF.

O Blog Doctor deve produzir o equivalente editorial dessas evidências.

Por exemplo:

POST: ABEND sem Mistérios para Programadores COBOL

STATUS GERAL..............ATENÇÃO

HTML......................82
SEO TÉCNICO...............91
ACESSIBILIDADE............76
QUALIDADE EDITORIAL.......94

OCORRÊNCIAS:
- 3 imagens sem ALT
- 1 tabela dentro de parágrafo
- 2 links HTTP
- 4 atributos data-message-id
- heading H3 sem H2 anterior

PRIORIDADE.................MÉDIA
AÇÃO RECOMENDADA...........REVISÃO MANUAL

Esse relatório funciona como um pequeno dump do artigo.

Não diz apenas que existe um problema.

Mostra:

  • onde;

  • qual;

  • quantas vezes;

  • qual gravidade;

  • qual ação recomendada.


A Arquitetura da Ferramenta

Antes de escrever código, precisamos desenhar a arquitetura.

Uma ferramenta de auditoria bem organizada pode ser dividida em cinco camadas.

CAMADA 1 – AQUISIÇÃO
Feed Atom ou Blogger API

CAMADA 2 – NORMALIZAÇÃO
Conversão dos posts para objetos internos

CAMADA 3 – ANÁLISE
HTML, SEO, acessibilidade, conteúdo e metadados

CAMADA 4 – CLASSIFICAÇÃO
Score, gravidade, prioridade e recomendações

CAMADA 5 – RELATÓRIOS
Dashboard, CSV, JSON, tabelas e laudos

Essa separação é fundamental.

Sem ela, o programa rapidamente se transforma em um bloco gigantesco de JavaScript difícil de manter.

No universo mainframe, seria como colocar leitura de arquivo, regra de negócio, banco de dados, impressão e tratamento de erro dentro de uma única SECTION COBOL.

Pode até funcionar.

Mas ninguém gostaria de manter.


Camada 1 – Aquisição dos Dados

O primeiro módulo precisa localizar e carregar os artigos.

Existem duas fontes principais.

Feed Atom

O Feed Atom é excelente para análise porque fornece o conteúdo publicado em formato estruturado.

Ele pode conter:

  • título;

  • data de publicação;

  • data de atualização;

  • categorias;

  • links;

  • HTML completo do artigo.

Exemplo simplificado:

<entry>
  <title>ABEND sem Mistérios</title>
  <published>2026-07-25T20:00:00-03:00</published>
  <category term="COBOL"/>
  <category term="Mainframe"/>
  <content type="html">
    <![CDATA[
      <h2>Introdução</h2>
      <p>Conteúdo...</p>
    ]]>
  </content>
</entry>

O Feed Atom funciona quase como uma unload de banco de dados.

Ele não representa apenas aquilo que aparece visualmente.

Ele revela aquilo que foi armazenado.


Blogger API

A Blogger API fornece dados em JSON.

Isso facilita o processamento porque JavaScript trabalha naturalmente com objetos JSON.

Exemplo:

{
  "title": "ABEND sem Mistérios",
  "published": "2026-07-25T20:00:00-03:00",
  "labels": ["COBOL", "Mainframe"],
  "content": "<h2>Introdução</h2><p>Conteúdo...</p>"
}

Em um projeto mais maduro, o Blog Doctor pode oferecer as duas opções:

  • leitura direta do Feed Atom;

  • leitura da Blogger API.


O Problema da Paginação

Blogs pequenos podem ser lidos em uma única requisição.

Blogs com milhares de posts não.

Tentar carregar quatro mil artigos de uma vez pode gerar:

  • timeout;

  • resposta truncada;

  • consumo elevado de memória;

  • travamento do navegador;

  • falhas de rede;

  • bloqueio temporário.

A solução é processar em lotes.

async function carregarPosts() {
  const lote = 100;
  let inicio = 1;
  const posts = [];

  while (true) {
    const dados = await carregarLote(inicio, lote);

    if (!dados.length) {
      break;
    }

    posts.push(...dados);
    inicio += dados.length;

    if (dados.length < lote) {
      break;
    }
  }

  return posts;
}

Essa lógica lembra um programa batch lendo um arquivo em blocos.

Não importa se existem cem ou dez mil registros.

O processo continua até encontrar o fim.


Camada 2 – Normalização

Os dados recebidos do Feed Atom não devem ser usados diretamente em todas as funções.

Primeiro precisam ser normalizados.

Isso significa converter cada post para um formato interno consistente.

{
  titulo: "ABEND sem Mistérios",
  url: "https://...",
  publicadoEm: Date,
  atualizadoEm: Date,
  html: "<h2>...</h2>",
  texto: "ABEND sem Mistérios...",
  palavras: 1842,
  caracteres: 10920,
  marcadores: ["COBOL", "Mainframe"],
  imagens: [],
  links: [],
  headings: []
}

Esse objeto se transforma no registro mestre da auditoria.

Em COBOL, seria como montar um layout padronizado na WORKING-STORAGE antes de aplicar as regras de negócio.


Convertendo HTML em Texto

Um dos primeiros algoritmos necessários é remover o HTML para obter apenas o conteúdo textual.

function htmlParaTexto(html) {
  const documento = new DOMParser()
    .parseFromString(html, "text/html");

  documento
    .querySelectorAll("script, style, noscript")
    .forEach(elemento => elemento.remove());

  return (documento.body.textContent || "")
    .replace(/\s+/g, " ")
    .trim();
}

Essa função permite calcular:

  • palavras;

  • caracteres;

  • densidade textual;

  • repetições;

  • legibilidade;

  • termos mais usados.


Contando Palavras

A contagem não deve usar apenas:

texto.split(" ")

Esse método falha com:

  • múltiplos espaços;

  • quebras de linha;

  • pontuação;

  • hífens;

  • apóstrofos.

Uma abordagem melhor é usar expressão regular Unicode.

function contarPalavras(texto) {
  const palavras = texto.match(
    /[\p{L}\p{N}][\p{L}\p{N}'’-]*/gu
  );

  return palavras ? palavras.length : 0;
}

O uso de \p{L} ajuda a reconhecer letras acentuadas e outros alfabetos.

Isso é importante em um blog que mistura português, inglês, japonês romanizado, termos técnicos e nomes próprios.


Camada 3 – O Motor de Análise

Aqui está o verdadeiro coração do Bellacosa Blog Doctor.

Cada módulo analisa um aspecto diferente.

MÓDULO HTML
MÓDULO SEO
MÓDULO ACESSIBILIDADE
MÓDULO EDITORIAL
MÓDULO LINKS
MÓDULO IMAGENS
MÓDULO RESÍDUOS
MÓDULO PERFORMANCE

Cada módulo deve produzir ocorrências independentes.

Exemplo:

{
  codigo: "HTML-TABLE-IN-P",
  categoria: "HTML",
  gravidade: "media",
  mensagem: "Tabela encontrada dentro de parágrafo",
  quantidade: 1
}

Scanner de HTML

O scanner de HTML deve procurar estruturas inválidas ou suspeitas.

Tabela dentro de parágrafo

const tabelaEmParagrafo =
  /<p\b[^>]*>\s*<table\b/i.test(html);

Tabela dentro de heading

const tabelaEmHeading =
  /<h[1-6]\b[^>]*>\s*<table\b/i.test(html);

Headings vazios

const headingsVazios = [
  ...documento.querySelectorAll("h1,h2,h3,h4,h5,h6")
].filter(elemento => !elemento.textContent.trim());

Mais de um H1

const quantidadeH1 =
  documento.querySelectorAll("h1").length;

Essas regras parecem simples, mas quando aplicadas a milhares de posts revelam padrões históricos inteiros.


Scanner de Resíduos de IA

Os resíduos deixados por interfaces modernas podem ser identificados por padrões conhecidos.

const residuosIA = [
  /data-message-id\s*=/i,
  /data-message-author-role\s*=/i,
  /data-message-model-slug\s*=/i
];

O algoritmo pode contar cada ocorrência.

function contarPadrao(html, regex) {
  const global = new RegExp(regex.source, regex.flags + "g");
  return (html.match(global) || []).length;
}

Resultado:

data-message-id...............12
data-message-author-role.......4
data-message-model-slug........4

Isso permite identificar não apenas se existe resíduo, mas sua intensidade.


Scanner de Microsoft Word

O Word possui uma assinatura bastante reconhecível.

const possuiWord =
  /\bclass=["'][^"']*\bMso/i.test(html) ||
  /<o:p\b/i.test(html) ||
  /mso-[a-z-]+\s*:/i.test(html);

Também é possível detectar comentários condicionais:

<!--[if gte mso 9]>

Esses resíduos normalmente não quebram a página.

Mas aumentam o tamanho do HTML e tornam a manutenção mais difícil.


Scanner de Google Docs

O Google Docs costuma deixar estruturas mais limpas que o Word, porém pode inserir grande quantidade de spans e estilos inline.

Uma regra simples pode medir densidade de spans.

const spans =
  documento.querySelectorAll("span").length;

const palavras =
  contarPalavras(texto);

const densidadeSpan =
  palavras > 0 ? spans / palavras : 0;

Exemplo:

Palavras..............1.000
Spans...................480
Densidade..............0,48

Uma densidade muito alta pode indicar excesso de formatação.


Análise de Headings

A hierarquia de títulos é essencial para organização semântica.

Um scanner deve verificar:

  • H1 duplicado;

  • H2 ausente;

  • H3 sem H2 anterior;

  • saltos de H2 para H4;

  • headings vazios;

  • headings excessivamente longos.

Algoritmo simplificado:

function analisarHierarquiaHeadings(documento) {
  const headings = [
    ...documento.querySelectorAll("h1,h2,h3,h4,h5,h6")
  ];

  const problemas = [];
  let nivelAnterior = 0;

  headings.forEach(heading => {
    const nivel = Number(heading.tagName.substring(1));

    if (nivelAnterior && nivel > nivelAnterior + 1) {
      problemas.push({
        tipo: "salto-heading",
        de: nivelAnterior,
        para: nivel,
        texto: heading.textContent.trim()
      });
    }

    nivelAnterior = nivel;
  });

  return problemas;
}

Isso funciona como um verificador de estrutura de programa.

É quase um compiler warning editorial.


Scanner de Imagens

Cada imagem deve ser analisada.

const imagens = [
  ...documento.querySelectorAll("img")
];

Para cada uma:

{
  src: imagem.src,
  alt: imagem.getAttribute("alt"),
  title: imagem.getAttribute("title"),
  width: imagem.getAttribute("width"),
  height: imagem.getAttribute("height")
}

Problemas possíveis:

  • ausência de ALT;

  • ALT vazio;

  • URL HTTP;

  • imagem sem dimensões;

  • imagem externa;

  • possível arquivo pesado;

  • imagem duplicada;

  • nome de arquivo genérico.

Exemplo de diagnóstico:

IMG-ALT-MISSING
Gravidade: média
Ocorrências: 3

Scanner de Links

Links quebrados são uma das maiores dívidas técnicas de blogs antigos.

O scanner local pode verificar inicialmente:

  • HTTP;

  • links vazios;

  • href="#";

  • JavaScript no href;

  • links internos;

  • links externos;

  • links duplicados.

const linksHTTP = links.filter(link =>
  /^http:\/\//i.test(link.getAttribute("href") || "")
);

Verificar se uma URL externa realmente responde exige chamadas de rede e pode sofrer limitações de CORS.

Por isso, o Blog Doctor pode classificar a análise em dois níveis:

Nível local

  • estrutura do link;

  • protocolo;

  • domínio;

  • duplicação;

  • consistência.

Nível remoto

  • código HTTP;

  • redirect;

  • página removida;

  • timeout.


Scanner de Conteúdo

O conteúdo também pode ser avaliado.

Indicadores possíveis:

  • quantidade de palavras;

  • tamanho do título;

  • presença de introdução;

  • presença de conclusão;

  • repetição excessiva;

  • parágrafos muito longos;

  • densidade de palavras-chave;

  • excesso de caixa alta;

  • excesso de negrito;

  • excesso de emojis.

Exemplo:

const tituloCurto = titulo.length < 20;
const tituloLongo = titulo.length > 70;
const conteudoCurto = palavras < 300;

Essas regras não devem ser tratadas como leis universais.

Um post curto pode ser perfeitamente válido.

O scanner apenas sinaliza.

A decisão continua sendo humana.


O Índice Técnico de SEO

O Blog Doctor pode calcular uma pontuação de zero a cem.

Exemplo inicial:

Título.........................10
Conteúdo.......................15
Headings.......................10
Imagens........................10
Links internos.................10
Marcadores.....................10
HTML limpo.....................15
Acessibilidade.................10
Estrutura......................10

O algoritmo pode começar com 100 pontos e aplicar penalidades.

function calcularSEO(post) {
  let score = 100;

  if (post.titulo.length < 20) {
    score -= 7;
  }

  if (post.palavras < 300) {
    score -= 15;
  }

  if (post.imagensSemAlt > 0) {
    score -= Math.min(12, post.imagensSemAlt * 3);
  }

  if (post.semLinksInternos) {
    score -= 8;
  }

  if (post.residuoIA) {
    score -= 6;
  }

  return Math.max(0, score);
}

Esse índice não mede posição no Google.

Ele mede qualidade técnica estimada.

É semelhante a uma métrica de saúde.

Um servidor pode estar funcionando e ainda apresentar alertas.

Um artigo pode estar indexado e ainda possuir problemas técnicos.


Gravidade e Prioridade

Nem todo problema merece a mesma atenção.

O Blog Doctor deve separar gravidade de prioridade.

Gravidade

Refere-se ao impacto técnico.

BAIXA
MÉDIA
ALTA
CRÍTICA

Prioridade

Refere-se à ordem de correção.

Um problema tecnicamente médio pode ter prioridade alta se aparecer em centenas de posts.

Exemplo:

Problema........Imagem sem ALT
Gravidade.......Média
Ocorrências.....1.240
Prioridade......Alta

Outro exemplo:

Problema........Resíduo data-message-id
Gravidade.......Baixa
Ocorrências.....3
Prioridade......Baixa

Essa distinção evita pânico.


A Matriz de Risco

Podemos criar uma matriz simples.

                 POUCOS POSTS   MUITOS POSTS

BAIXO IMPACTO       BAIXA          MÉDIA
MÉDIO IMPACTO       MÉDIA          ALTA
ALTO IMPACTO        ALTA           CRÍTICA

Em JavaScript:

function calcularPrioridade(gravidade, ocorrencias) {
  const peso = {
    baixa: 1,
    media: 2,
    alta: 3,
    critica: 4
  };

  const volume =
    ocorrencias > 500 ? 3 :
    ocorrencias > 50 ? 2 : 1;

  const resultado = peso[gravidade] + volume;

  if (resultado >= 6) return "crítica";
  if (resultado >= 5) return "alta";
  if (resultado >= 3) return "média";
  return "baixa";
}

Geração de Relatórios

Uma ferramenta sem relatório é apenas um conjunto de funções.

O Blog Doctor precisa transformar dados técnicos em informação útil.

Ele pode produzir quatro tipos de saída.

Dashboard

Indicadores visuais:

Posts analisados.............4.018
HTML saudável................3.912
Posts com alerta................89
Posts críticos..................17
SEO técnico médio..............92
Imagens sem ALT................243
Links HTTP......................81
Resíduos de IA..................14

Relatório por artigo

TÍTULO: Data Division sem Mistérios

URL: https://...

PALAVRAS..................1.846
IMAGENS.......................4
LINKS INTERNOS................3
MARCADORES....................8

SEO TÉCNICO..................94

ALERTAS:
- 1 imagem sem ALT
- 1 link HTTP

CSV

O CSV permite abrir os resultados no Excel ou LibreOffice.

Colunas possíveis:

Título
URL
Data
Palavras
Caracteres
Marcadores
Imagens
Imagens sem ALT
Links internos
Resíduos IA
Resíduos Word
SEO Score
Prioridade

JSON

O JSON é ideal para integração futura.

{
  "blog": "Bellacosa Mainframe",
  "dataAuditoria": "2026-07-26",
  "posts": [
    {
      "titulo": "ABEND sem Mistérios",
      "score": 92,
      "prioridade": "media",
      "ocorrencias": []
    }
  ]
}

A Tela de Progresso

Em um blog com milhares de posts, o usuário precisa saber que o sistema continua funcionando.

Carregando lote 12...

Posts recebidos........1.200
Posts analisados.......1.175
Palavras processadas...1.832.411

[██████████░░░░░░░░░░] 29%

Essa barra não é apenas estética.

Ela reduz a ansiedade e ajuda a identificar travamentos.

Em sistemas batch, o equivalente seria acompanhar o job no SDSF.


Cache e IndexedDB

Reanalisar quatro mil posts em toda visita é desperdício.

O navegador pode guardar os resultados localmente usando IndexedDB.

Arquitetura:

Primeira execução
Feed → análise → IndexedDB

Próxima execução
IndexedDB → dashboard

Atualização
Buscar apenas posts recentes

Isso transforma o painel em uma aplicação muito mais rápida.


Processamento Incremental

Em vez de reler o blog inteiro, podemos guardar a data da última análise.

{
  ultimaAtualizacao: "2026-07-26T23:10:00-03:00"
}

Na próxima execução, o sistema procura apenas artigos publicados ou atualizados depois dessa data.

É o equivalente editorial de um processamento incremental.

Muito semelhante a um batch que lê apenas os registros alterados.


Web Workers

Analisar milhões de palavras pode travar a interface.

Uma solução futura é usar Web Workers.

O Worker executa o processamento em uma thread separada.

const worker = new Worker("blog-doctor-worker.js");

worker.postMessage(posts);

worker.onmessage = evento => {
  atualizarDashboard(evento.data);
};

Assim, a interface continua respondendo enquanto a análise ocorre.


A Implementação Mínima

Uma primeira versão funcional do Blog Doctor precisa apenas de cinco componentes.

1. Leitor do Feed
2. Normalizador
3. Scanner de HTML
4. Calculador de Score
5. Gerador de tabela

Fluxo:

async function executarAuditoria() {
  const entradas = await carregarTodosOsPosts();

  const posts = entradas.map(normalizarPost);

  const auditados = posts.map(post => {
    const ocorrencias = analisarPost(post);
    const score = calcularScore(post, ocorrencias);

    return {
      ...post,
      ocorrencias,
      score
    };
  });

  gerarRelatorio(auditados);
}

Essa função representa o coração do sistema.


Estrutura de uma Ocorrência

Todas as regras devem produzir o mesmo formato.

{
  codigo: "IMG-ALT-MISSING",
  categoria: "Acessibilidade",
  gravidade: "media",
  quantidade: 2,
  mensagem: "Duas imagens não possuem texto alternativo",
  recomendacao: "Adicionar ALT descritivo"
}

Essa padronização torna possível:

  • ordenar;

  • filtrar;

  • exportar;

  • calcular score;

  • gerar relatórios;

  • criar gráficos.


Criando um Catálogo de Regras

As regras podem ficar em uma lista.

const regras = [
  {
    codigo: "HTML-AI-RESIDUE",
    categoria: "HTML",
    gravidade: "baixa",
    testar(post) {
      return /data-message-id/i.test(post.html);
    },
    mensagem: "Resíduo de interface de IA encontrado"
  },
  {
    codigo: "IMG-ALT-MISSING",
    categoria: "Acessibilidade",
    gravidade: "media",
    testar(post) {
      return post.imagensSemAlt > 0;
    },
    mensagem: "Imagem sem ALT"
  }
];

Depois, o motor executa todas.

function executarRegras(post) {
  return regras
    .filter(regra => regra.testar(post))
    .map(regra => ({
      codigo: regra.codigo,
      categoria: regra.categoria,
      gravidade: regra.gravidade,
      mensagem: regra.mensagem
    }));
}

Essa arquitetura facilita adicionar novas verificações sem alterar o restante do programa.


O Equivalente ao Return Code

No mainframe, um job pode terminar com:

RC=0000
RC=0004
RC=0008
RC=0012
RC=0016

O Blog Doctor pode adotar uma lógica semelhante.

BDC0000 – Post saudável
BDC0004 – Alerta leve
BDC0008 – Revisão recomendada
BDC0012 – Problema grave
BDC0016 – Conteúdo crítico

Exemplo:

BDC0008
Imagem sem ALT e heading inconsistente

Isso adiciona identidade à ferramenta e facilita a leitura dos relatórios.


Mensagens no Estilo Mainframe

A ferramenta pode gerar mensagens padronizadas.

BBDHTML001W TABLE FOUND INSIDE PARAGRAPH
BBDSEO004W INTERNAL LINK NOT FOUND
BBDACC002E IMAGE WITHOUT ALT ATTRIBUTE
BBDIA001I AI INTERFACE METADATA DETECTED
BBDDOC003W MICROSOFT WORD RESIDUE FOUND

Legenda:

I – Information
W – Warning
E – Error
S – Severe

Além de divertido, isso cria consistência.


O Dashboard Final

Imagine a tela principal.

┌─────────────────────────────────────────┐
│ BELLA COSA BLOG DOCTOR                  │
│ BLOG HEALTH MONITOR                     │
├─────────────────────────────────────────┤
│ Posts.........................4.018     │
│ Score médio.....................94      │
│ Alertas.........................126     │
│ Críticos.........................12     │
├─────────────────────────────────────────┤
│ HTML   ████████████████ 96              │
│ SEO    ███████████████  92              │
│ A11Y   ██████████████   88              │
│ LINKS  ███████████████  91              │
└─────────────────────────────────────────┘

Abas:

  • visão geral;

  • HTML;

  • SEO;

  • acessibilidade;

  • imagens;

  • links;

  • resíduos;

  • posts;

  • exportação.


O Que Não Deve Ser Automatizado

Uma ferramenta madura também precisa saber seus limites.

O Blog Doctor não deve:

  • reescrever automaticamente milhares de posts;

  • remover tags sem confirmação;

  • alterar URLs;

  • trocar títulos;

  • apagar marcadores;

  • corrigir links externos de forma cega;

  • publicar alterações sem backup.

Ele deve diagnosticar.

A correção pode ser manual ou assistida.

Mas sempre controlada.


Auditoria Não é Limpeza

Essa distinção é fundamental.

AUDITORIA
Descobre e classifica

LIMPEZA
Altera o conteúdo

Misturar as duas etapas é perigoso.

No mainframe, primeiro analisamos o dump.

Depois corrigimos o programa.

Não alteramos a memória do dump esperando que o sistema volte a funcionar.


O Bellacosa Blog Doctor como Projeto Real

O projeto pode evoluir em versões.

Versão 0.1

  • leitura de 100 posts;

  • contagem de palavras;

  • posts por ano.

Versão 0.5

  • paginação completa;

  • imagens;

  • links;

  • headings.

Versão 1.0

  • scanner HTML;

  • scanner SEO;

  • dashboard;

  • CSV.

Versão 2.0

  • IndexedDB;

  • processamento incremental;

  • mapa de calor;

  • evolução dos marcadores.

Versão 3.0

  • Web Workers;

  • auditoria remota de links;

  • relatórios JSON;

  • comparação entre auditorias.

Versão 4.0

  • sugestões de correção;

  • diff de HTML;

  • histórico de qualidade;

  • integração com Search Console.


Comparando Auditorias

Uma das funções mais poderosas será comparar dois momentos.

AUDITORIA 1 – JULHO/2026
Score geral.................88
HTML inválido...............49
Imagens sem ALT............312

AUDITORIA 2 – OUTUBRO/2026
Score geral.................94
HTML inválido...............11
Imagens sem ALT.............87

Isso permite medir evolução real.

Não apenas sensação.


O Histórico de Saúde

Cada auditoria pode ser salva.

{
  data: "2026-07-26",
  posts: 4018,
  score: 92,
  problemas: {
    html: 49,
    imagens: 312,
    links: 87
  }
}

Depois criamos um gráfico.

Julho...........88
Agosto..........90
Setembro........92
Outubro.........94

Esse é o verdadeiro conceito de evolução técnica.


O RMF Editorial

No z/OS, o RMF ajuda a observar recursos do sistema.

O Bellacosa Blog Doctor pode ser visto como um RMF editorial.

Em vez de medir:

  • CPU;

  • memória;

  • I/O;

  • canais;

  • dispositivos.

Ele mede:

  • HTML;

  • palavras;

  • imagens;

  • links;

  • headings;

  • marcadores;

  • qualidade;

  • acessibilidade.

O objetivo é o mesmo.

Transformar um sistema invisível em algo observável.


Um Scanner para Décadas de História

Um blog antigo não é apenas um conjunto de páginas.

É um sistema que atravessou:

  • mudanças de layout;

  • troca de editores;

  • novas tecnologias;

  • alterações de SEO;

  • migrações;

  • modismos;

  • ferramentas;

  • plataformas;

  • estilos de escrita.

O Blog Doctor permite enxergar essas camadas.

Um artigo de 2012 pode ter HTML completamente diferente de um artigo de 2026.

E isso não é necessariamente ruim.

É história.

O scanner não serve apenas para encontrar defeitos.

Ele também ajuda a compreender a evolução do acervo.


Conclusão

Construir o Bellacosa Blog Doctor significa aplicar ao universo editorial os mesmos princípios que tornaram o IBM Mainframe uma das plataformas mais confiáveis da história da computação.

Observabilidade.

Padronização.

Diagnóstico.

Controle.

Mensuração.

Rastreabilidade.

A ferramenta começa lendo um simples Feed Atom.

Depois converte cada post em uma estrutura organizada.

Em seguida executa algoritmos de análise.

Detecta resíduos.

Avalia HTML.

Examina imagens.

Verifica headings.

Conta palavras.

Classifica problemas.

Calcula scores.

Gera relatórios.

E transforma milhares de páginas dispersas em um sistema mensurável.

Essa talvez seja a maior evolução de toda a série.

No início queríamos apenas descobrir algumas tags invisíveis.

Agora estamos projetando uma plataforma de auditoria capaz de examinar décadas de produção digital.

O Feed Atom deixou de ser apenas um arquivo XML.

Virou dump.

Virou log.

Virou histórico.

Virou matéria-prima para inteligência editorial.

E o Bellacosa Blog Doctor deixa de ser apenas uma ideia curiosa.

Ele se transforma em uma ferramenta de engenharia.

Uma ferramenta que não promete milagres.

Não apaga tudo automaticamente.

Não substitui o julgamento humano.

Mas faz aquilo que as melhores ferramentas de diagnóstico sempre fizeram:

mostra a verdade antes que alguém toque em produção.

Porque, seja em um Data Center IBM ou em um blog com milhares de artigos, a regra continua sendo a mesma:

Primeiro diagnostique. Depois corrija. E nunca altere aquilo que você ainda não compreendeu.

🔎 CSI BLOGSPOT · ARQUIVO DE EVIDÊNCIAS

Blog Analytics: A Investigação Completa

Seis capítulos sobre auditoria de HTML, resíduos invisíveis, limpeza segura, checklist técnico e construção do Bellacosa Blog Doctor.

6 relatórios2018HTML · SEO · Blogger
CASE FILE 01

Blog Analytics — Parte I

Como descobrir evidências invisíveis no HTML de um blog antigo.

HTMLAuditoriaBlogspot
CASE FILE 02

Blog Analytics — Parte II

Os resíduos invisíveis deixados por editores, Word, IA e cópias antigas.

ResíduosWord HTMLIA
CASE FILE 03

Blog Analytics — Parte III

Como limpar milhares de posts sem destruir o acervo editorial.

LimpezaBackupQualidade
CASE FILE 04

Blog Analytics — Parte IV

Checklist de auditoria para blogs antigos e acervos com anos de história.

ChecklistSEO TécnicoAuditoria
CASE FILE 05

Blog Analytics — Parte V

Construindo o Bellacosa Blog Doctor e seu scanner automático.

Blog DoctorScannerJavaScript
CASE FILE 06

Blog Analytics — Parte VI

Criando o motor de regras, scores, prioridades e códigos de retorno.

Motor de RegrasScoreMainframe

Índice textual da série Blog Analytics

Esta série investiga a saúde técnica de blogs antigos no Blogger, cobrindo auditoria de HTML, resíduos de editores, SEO técnico, acessibilidade, limpeza segura, diagnóstico automatizado e motores de regras.

  1. Blog Analytics Parte I — Como descobrir evidências invisíveis
  2. Blog Analytics Parte II — Os resíduos invisíveis do HTML
  3. Blog Analytics Parte III — Como limpar com segurança
  4. Blog Analytics Parte IV — Checklist de auditoria
  5. Blog Analytics Parte V — Construindo o Bellacosa Blog Doctor
  6. Blog Analytics Parte VI — Criando o motor de regras

quinta-feira, 5 de abril de 2018

Blog Analytics : Parte II – Os Resíduos Deixados por IA, Word e Google Docs Anatomia Forense do HTML Oculto no Blogger

Bellacosa Mainframe e o blog analytics parte ii


☕ Um Café no Bellacosa Mainframe

Blog Analytics : Parte II – Os Resíduos Deixados por IA, Word e Google Docs

Anatomia Forense do HTML Oculto no Blogger

Quando o Verdadeiro Autor da Bagunça Nunca Foi o Blogger

☕ Um Café no Bellacosa Mainframe

Na primeira parte desta série descobrimos que o Feed Atom funciona como uma espécie de SYSUDUMP do Blogger. Enquanto o navegador tenta corrigir erros e o editor visual esconde imperfeições, o Feed Atom preserva praticamente aquilo que realmente foi gravado no banco de dados do blog.

Foi justamente analisando esse "dump" que surgiu uma descoberta curiosa: muitos dos problemas encontrados não eram produzidos pelo Blogger.

Eles vinham de outro lugar.

Como em qualquer investigação criminal, o primeiro suspeito raramente é o verdadeiro culpado.

No universo da computação moderna existem diversos "fornecedores de evidências invisíveis". Cada editor de texto, suíte de escritório ou plataforma de inteligência artificial possui uma assinatura digital própria, deixando pequenas marcas no HTML que produz.

Nesta segunda parte da investigação vamos aprender a identificar essas assinaturas, entender por que elas aparecem e descobrir quais realmente representam risco para a manutenção, o SEO e a longevidade de um blog.


CSI Blogspot: Todo HTML Tem Impressões Digitais

No seriado CSI, os investigadores nunca analisam apenas uma impressão digital isolada.

Eles observam o conjunto de evidências:

  • fibras;

  • pegadas;

  • resíduos químicos;

  • DNA;

  • padrão de corte;

  • trajetória da bala.

Com HTML acontece exatamente a mesma coisa.

Um único atributo estranho pode não significar absolutamente nada.

Mas quando dezenas deles aparecem juntos...

Existe um padrão.

E padrões contam histórias.


O Primeiro Suspeito: Microsoft Word

Todo profissional de desenvolvimento já ouviu uma frase clássica:

"Nunca copie diretamente do Word."

Durante muitos anos isso parecia exagero.

Não era.

O Microsoft Word foi projetado para preservar ao máximo a aparência visual do documento, mesmo que isso signifique produzir um HTML extremamente complexo.

Entre os vestígios mais comuns encontrados estão:

  • class="MsoNormal"

  • class="MsoHeading"

  • style="mso-..."

  • <o:p>

  • <xml>

  • comentários condicionais específicos do Office

  • dezenas de estilos inline

Em muitos casos, um único parágrafo simples pode gerar centenas de caracteres extras.

É como transportar um caminhão inteiro para entregar uma única folha de papel.


A Assinatura do Google Docs

O Google Docs evoluiu bastante nos últimos anos.

Seu HTML costuma ser muito mais limpo que o do Word.

Mesmo assim, algumas características aparecem com frequência:

  • inúmeros <span>;

  • estilos inline;

  • atributos de alinhamento;

  • marcações de fonte;

  • blocos aninhados desnecessariamente.

Visualmente nada muda.

Mas o DOM cresce.

E cresce rapidamente.


O Caso das Inteligências Artificiais

Foi aqui que nossa investigação ganhou um rumo inesperado.

Ao copiar um artigo produzido por uma IA, imaginamos estar copiando apenas texto.

Na prática, quase nunca é isso que acontece.

O navegador normalmente copia dois formatos ao mesmo tempo:

  • texto simples;

  • HTML enriquecido (Rich Text).

Esse HTML pode conter informações usadas exclusivamente pela interface da IA.

Durante nossa auditoria no Feed Atom encontramos exemplos como:

data-message-id
data-message-author-role
data-message-model-slug

Esses atributos não fazem parte do artigo.

Eles pertencem ao funcionamento interno da aplicação web.

São metadados.

Quando chegam ao Blogger, deixam de ter qualquer utilidade, mas podem permanecer armazenados se o conteúdo for colado diretamente em modo rico.

É importante destacar que isso não significa que uma IA esteja "escondendo código" dentro do seu texto de forma maliciosa. Na maioria dos casos, trata-se de metadados legítimos da interface web que acabam sendo transportados junto com o HTML durante operações de copiar e colar.


O Navegador Também É Cúmplice

Outro personagem importante nessa história é o navegador.

Chrome.

Firefox.

Edge.

Safari.

Todos possuem mecanismos extremamente sofisticados para preservar a experiência do usuário.

Quando copiamos um trecho de uma página, o navegador tenta manter:

  • negrito;

  • itálico;

  • listas;

  • tabelas;

  • hyperlinks;

  • cores;

  • estilos.

Para isso, ele envia muito mais do que caracteres.

Envia uma estrutura HTML completa.

É por isso que dois usuários podem copiar exatamente o mesmo texto e produzir HTML completamente diferente dependendo da origem da cópia.


O Blogger Não é um Faxineiro

Essa talvez tenha sido a maior surpresa de toda a investigação.

Durante muito tempo imaginei que o Blogger reescrevesse completamente o HTML recebido.

Na realidade ele faz algo muito mais conservador.

Ele remove aquilo que considera perigoso, como:

  • <script>;

  • alguns eventos JavaScript;

  • determinadas tags potencialmente inseguras.

Porém, atributos válidos do HTML5, estruturas complexas e muitos estilos acabam sendo preservados.

Do ponto de vista da plataforma isso faz sentido.

Ela não sabe se aquele HTML foi criado intencionalmente pelo autor.


O HTML Invisível

Quando falamos em HTML invisível, muita gente imagina vírus, código malicioso ou scripts escondidos.

Na maioria das vezes não é isso.

Estamos falando de estruturas que:

  • não alteram a aparência;

  • não mudam o texto;

  • não são percebidas pelo leitor;

  • continuam armazenadas.

É como uma casa perfeitamente limpa por fora, mas com quilômetros de fios antigos escondidos dentro das paredes.

Enquanto tudo funciona ninguém percebe.

Mas a manutenção fica cada vez mais difícil.


Como Reconhecer Cada "Impressão Digital"

Depois de analisar centenas de artigos foi possível perceber alguns padrões bastante consistentes.

Microsoft Word

Características típicas:

  • classes iniciadas por Mso;

  • marcações <o:p>;

  • estilos enormes;

  • comentários específicos do Office;

  • HTML extremamente verboso.


Google Docs

Características típicas:

  • excesso de <span>;

  • estilos inline;

  • muitos atributos de formatação;

  • estrutura relativamente limpa, porém redundante.


Interfaces de IA

Características típicas:

  • atributos data-*;

  • elementos usados pela interface web;

  • identificadores internos;

  • metadados sem função dentro do artigo.


Editores HTML Profissionais

Dreamweaver, VS Code, Notepad++ e outros editores especializados normalmente deixam muito menos resíduos.

O HTML tende a refletir exatamente aquilo que o autor escreveu.


A Cena do Crime

Imagine quatro pessoas escrevendo exatamente o mesmo artigo.

O conteúdo será idêntico.

Mas o HTML poderá variar em dezenas ou centenas de linhas.

É exatamente como quatro pessoas caminhando sobre a mesma areia.

Todas chegaram ao mesmo destino.

Mas cada uma deixou pegadas completamente diferentes.


O Que Realmente Prejudica o SEO?

Essa é provavelmente a pergunta mais importante.

Até o momento, não há evidências de que pequenos resíduos de HTML, isoladamente, causem uma queda direta no posicionamento de um site.

Entretanto, HTML excessivamente complexo pode aumentar o trabalho dos mecanismos de renderização, dificultar a manutenção do conteúdo e favorecer inconsistências em snippets, acessibilidade e processamento por ferramentas automatizadas.

O maior prejuízo costuma aparecer na manutenção do acervo.

Quanto mais lixo invisível existir:

  • mais difícil fica editar;

  • maior o tamanho das páginas;

  • mais complicado se torna localizar problemas futuros;

  • maior a dívida técnica acumulada.


A Regra de Ouro

Depois dessa investigação adotei uma regra simples.

Nunca confiar apenas na aparência da página publicada.

Sempre que possível:

  1. gerar o conteúdo;

  2. revisar o texto;

  3. remover formatações desnecessárias;

  4. validar o HTML;

  5. verificar periodicamente o Feed Atom.

Esse processo leva poucos minutos.

Mas pode evitar anos de acúmulo de resíduos invisíveis.


O Nascimento do Bellacosa Blog Doctor

Foi justamente dessa investigação que nasceu a ideia de desenvolver uma ferramenta especializada para auditoria de blogs Blogger.

O objetivo não é apenas encontrar erros.

É identificar a assinatura deixada por cada origem do conteúdo.

Como um verdadeiro laboratório forense digital.

Entre as futuras verificações planejadas estão:

  • resíduos de IA;

  • HTML do Word;

  • HTML do Google Docs;

  • tabelas inválidas;

  • headings incorretos;

  • imagens sem ALT;

  • links quebrados;

  • caracteres invisíveis;

  • problemas de acessibilidade;

  • indicadores de SEO.

Cada artigo passaria a receber uma espécie de "laudo pericial", semelhante aos relatórios utilizados em auditorias de sistemas críticos.


Conclusão

Ao longo desta investigação descobrimos que um artigo pode parecer impecável para o leitor e, ao mesmo tempo, carregar dezenas de marcas invisíveis deixadas pelas ferramentas utilizadas durante sua criação.

Essas marcas raramente comprometem a leitura, mas revelam a história completa do documento: de onde veio, por quais editores passou e quais tecnologias participaram de sua construção.

Assim como um investigador experiente identifica um suspeito pelas menores evidências, um bom auditor de HTML aprende a reconhecer essas assinaturas ocultas antes que elas se transformem em dívida técnica.

No próximo capítulo ampliaremos ainda mais o laboratório do CSI Blogspot. Vamos construir uma metodologia sistemática de inspeção, criando um checklist profissional capaz de examinar milhares de artigos automaticamente e atribuir um índice de qualidade para cada publicação.

Porque, no fim das contas, a diferença entre um blog comum e um acervo de conhecimento duradouro está justamente naquilo que ninguém vê — mas que permanece registrado para sempre no código-fonte.

🔎 CSI BLOGSPOT · ARQUIVO DE EVIDÊNCIAS

Blog Analytics: A Investigação Completa

Seis capítulos sobre auditoria de HTML, resíduos invisíveis, limpeza segura, checklist técnico e construção do Bellacosa Blog Doctor.

6 relatórios2018HTML · SEO · Blogger
CASE FILE 01

Blog Analytics — Parte I

Como descobrir evidências invisíveis no HTML de um blog antigo.

HTMLAuditoriaBlogspot
CASE FILE 02

Blog Analytics — Parte II

Os resíduos invisíveis deixados por editores, Word, IA e cópias antigas.

ResíduosWord HTMLIA
CASE FILE 03

Blog Analytics — Parte III

Como limpar milhares de posts sem destruir o acervo editorial.

LimpezaBackupQualidade
CASE FILE 04

Blog Analytics — Parte IV

Checklist de auditoria para blogs antigos e acervos com anos de história.

ChecklistSEO TécnicoAuditoria
CASE FILE 05

Blog Analytics — Parte V

Construindo o Bellacosa Blog Doctor e seu scanner automático.

Blog DoctorScannerJavaScript
CASE FILE 06

Blog Analytics — Parte VI

Criando o motor de regras, scores, prioridades e códigos de retorno.

Motor de RegrasScoreMainframe

Índice textual da série Blog Analytics

Esta série investiga a saúde técnica de blogs antigos no Blogger, cobrindo auditoria de HTML, resíduos de editores, SEO técnico, acessibilidade, limpeza segura, diagnóstico automatizado e motores de regras.

  1. Blog Analytics Parte I — Como descobrir evidências invisíveis
  2. Blog Analytics Parte II — Os resíduos invisíveis do HTML
  3. Blog Analytics Parte III — Como limpar com segurança
  4. Blog Analytics Parte IV — Checklist de auditoria
  5. Blog Analytics Parte V — Construindo o Bellacosa Blog Doctor
  6. Blog Analytics Parte VI — Criando o motor de regras

sexta-feira, 2 de março de 2018

Blog Analytics : Parte I – Como Descobrir HTML Invisível no Blogger Usando o Feed Atom Quando o Navegador Diz "Está Tudo Certo"... Mas o Feed Conta Outra História

 

Bellacosa Mainframe e o blog analytics parte i

☕ Um Café no Bellacosa Mainframe

Blog Analytics : Parte I – Como Descobrir HTML Invisível no Blogger Usando o Feed Atom

Quando o Navegador Diz "Está Tudo Certo"... Mas o Feed Conta Outra História

☕ Um Café no Bellacosa Mainframe

Durante muitos anos imaginei que o Blogger fazia uma limpeza completa do conteúdo que recebia. Afinal, se um post aparecia corretamente no navegador, por que deveria existir qualquer problema escondido?

Foi somente depois de milhares de publicações, centenas de artigos técnicos e uma curiosidade típica de quem trabalha com sistemas críticos IBM Mainframe que resolvi investigar uma hipótese aparentemente absurda:

Será que o Blogger armazena HTML invisível que nunca aparece para o leitor?

A resposta me surpreendeu.

E talvez surpreenda você também.


O Erro de Todo Blogueiro

A maioria das pessoas verifica apenas uma coisa:

  • o post abriu;

  • as imagens aparecem;

  • os títulos ficaram bonitos;

  • o Google indexou.

Fim.

Mas isso equivale a um programador COBOL que testa somente a saída do relatório sem nunca olhar o dump, o SYSOUT ou o JCL.

Quem trabalha com mainframe sabe:

O que aparece na tela nem sempre representa o que realmente foi gravado.

Foi exatamente isso que aconteceu.


A Investigação Começa

Minha suspeita surgiu após utilizar o ChatGPT para produzir artigos longos.

O fluxo era extremamente comum.

ChatGPT

↓

Copiar

↓

Blogger

↓

Publicar

Visualmente tudo parecia perfeito.

Até que comecei a perceber pequenas inconsistências.

Alguns snippets do Google ficavam estranhos.

Algumas tabelas se comportavam diferente.

Determinados títulos não eram interpretados corretamente.

Nada grave.

Mas havia algo...

Como em toda investigação do CSI.

A cena do crime parecia limpa demais.


O Primeiro Suspeito

Minha primeira hipótese foi simples.

Talvez o navegador estivesse corrigindo erros automaticamente.

Então resolvi olhar não a página publicada.

Mas o banco de dados do Blogger.

Existe uma forma de fazer isso.

Pouquíssima gente conhece.

O Feed Atom.


O Feed Atom

Todo blog Blogger possui um feed semelhante a este:

https://SEUBLOG.blogspot.com/feeds/posts/default

ou

https://SEUBLOG.blogspot.com/feeds/posts/default?max-results=500

Também é possível exportar todo o blog pelo painel do Blogger.

Esse arquivo XML contém praticamente tudo que o Blogger realmente armazenou:

  • título

  • conteúdo

  • categorias

  • datas

  • comentários

  • HTML

Ou seja...

É como abrir diretamente um VSAM KSDS ao invés de confiar apenas no CICS.


O Momento da Verdade

Quando começamos a analisar o XML surgiu uma surpresa enorme.

O conteúdo não era apenas texto.

Existiam dezenas de elementos invisíveis.

Como por exemplo:

data-message-author-role
data-message-id
data-message-model-slug

Além de diversos atributos HTML internos.

Esses elementos nunca apareciam para o leitor.

Mas continuavam gravados.


O Que São Esses data-* ?

Quem conhece HTML moderno sabe que atributos iniciados por

data-

são perfeitamente válidos.

Frameworks como React, Vue e Angular utilizam isso o tempo inteiro.

Exemplo:

<div data-user="1234"
     data-role="admin">

Não existe nada errado nisso.

O problema é outro.

Esses atributos pertencem ao funcionamento interno da interface.

Eles nunca deveriam ser publicados dentro de um artigo.


O Mistério do Copiar e Colar

Foi então que a investigação tomou outro rumo.

Quando copiamos um texto da interface do ChatGPT, normalmente imaginamos que estamos copiando apenas caracteres.

Na realidade não.

Na maioria dos navegadores copiamos um bloco chamado Rich Text.

Esse bloco pode conter:

  • HTML

  • CSS

  • spans

  • divs

  • estilos

  • atributos data-*

  • marcações internas

Dependendo do editor utilizado, tudo isso viaja junto.

O Blogger simplesmente recebe.

E grava.


O Blogger Não Reclama

Aqui veio outra descoberta curiosa.

O Blogger praticamente nunca diz:

"Seu HTML está errado."

Ele simplesmente aceita.

Até mesmo estruturas como:

<p>

<table>

...

</table>

</p>

que são inválidas segundo a especificação HTML.


O Navegador "Conserta"

Chrome.

Firefox.

Edge.

Safari.

Todos eles possuem um parser extremamente tolerante.

Quando encontram algo assim:

<p>

<table>

internamente fazem algo parecido com:

<p></p>

<table>

...

</table>

<p></p>

Para o usuário parece perfeito.

Mas o HTML continua tecnicamente incorreto.

É exatamente como um compilador COBOL que gera um Warning, executa normalmente e produz o resultado esperado.

O programa "funciona".

Mas existe uma dívida técnica escondida.


O Feed Não Mente

Foi aí que compreendi algo importante.

O navegador tenta consertar.

O Blogger tenta publicar.

Mas o Feed Atom mostra praticamente o conteúdo bruto armazenado.

Ele é o equivalente ao dump de memória de um programa COBOL.

Ou ao SYSUDUMP de um ABEND.

Não existe maquiagem.

Existe apenas a verdade.


O Que Encontramos

Depois da primeira auditoria apareceram dezenas de problemas.

Entre eles:

  • resíduos do ChatGPT;

  • HTML mal fechado;

  • <p><table>;

  • <h2><table>;

  • spans desnecessários;

  • HTML herdado do Word;

  • atributos internos;

  • caracteres invisíveis.

Nenhum deles era perceptível durante a leitura do blog.


O Impacto no SEO

Será que isso destrói o ranqueamento?

Provavelmente não.

Mas aumenta o ruído.

Motores de busca precisam reconstruir o DOM.

Quanto mais HTML estranho existir:

  • maior o trabalho do parser;

  • maior a chance de interpretações diferentes;

  • maior a possibilidade de snippets inconsistentes.

Em blogs pequenos isso costuma passar despercebido.

Em um acervo com milhares de artigos, pequenas inconsistências acabam se acumulando.


O Maior Ensinamento

Essa investigação deixou uma lição valiosa.

Não basta olhar a página publicada.

É preciso olhar aquilo que realmente foi gravado.

No universo IBM Mainframe aprendemos isso desde cedo.

Um relatório bonito não significa que o programa esteja correto.

Da mesma forma, um post bonito não significa que o HTML esteja limpo.


O Bellacosa CSI

Essa descoberta acabou originando um novo projeto.

Uma espécie de laboratório forense para Blogger.

A ideia é simples.

Tratar o Feed Atom como um dump de produção.

Analisar automaticamente:

  • HTML inválido;

  • resíduos de IA;

  • problemas de SEO;

  • tabelas incorretas;

  • headings mal estruturados;

  • imagens sem atributos;

  • links defeituosos;

  • caracteres invisíveis.

Em outras palavras...

Construir um verdadeiro CSI Blogspot.


Conclusão

Durante anos imaginei que o Blogger funcionava como um compilador rigoroso, eliminando qualquer imperfeição antes da publicação.

Descobri que ele se comporta muito mais como um repositório: recebe, armazena e confia que o navegador fará os ajustes necessários.

Foi o Feed Atom que revelou aquilo que nem o editor do Blogger, nem o navegador e, muitas vezes, nem o próprio autor percebiam.

Se você possui dezenas, centenas ou milhares de artigos publicados, vale a pena fazer essa investigação. Talvez seu blog esteja impecável na superfície, mas carregando pequenas marcas invisíveis acumuladas ao longo dos anos.

No próximo capítulo, entraremos ainda mais fundo na cena do crime. Vamos aprender a identificar, classificar e remover resíduos deixados por ferramentas modernas — como ChatGPT, Google Docs, Microsoft Word e outros editores — antes que eles se transformem em dívida técnica permanente.

Porque, assim como no mundo dos mainframes, os maiores problemas quase nunca aparecem na tela. Eles ficam escondidos nos bastidores, aguardando alguém curioso o bastante para ler o "dump" da história.

🔎 CSI BLOGSPOT · ARQUIVO DE EVIDÊNCIAS

Blog Analytics: A Investigação Completa

Seis capítulos sobre auditoria de HTML, resíduos invisíveis, limpeza segura, checklist técnico e construção do Bellacosa Blog Doctor.

6 relatórios2018HTML · SEO · Blogger
CASE FILE 01

Blog Analytics — Parte I

Como descobrir evidências invisíveis no HTML de um blog antigo.

HTMLAuditoriaBlogspot
CASE FILE 02

Blog Analytics — Parte II

Os resíduos invisíveis deixados por editores, Word, IA e cópias antigas.

ResíduosWord HTMLIA
CASE FILE 03

Blog Analytics — Parte III

Como limpar milhares de posts sem destruir o acervo editorial.

LimpezaBackupQualidade
CASE FILE 04

Blog Analytics — Parte IV

Checklist de auditoria para blogs antigos e acervos com anos de história.

ChecklistSEO TécnicoAuditoria
CASE FILE 05

Blog Analytics — Parte V

Construindo o Bellacosa Blog Doctor e seu scanner automático.

Blog DoctorScannerJavaScript
CASE FILE 06

Blog Analytics — Parte VI

Criando o motor de regras, scores, prioridades e códigos de retorno.

Motor de RegrasScoreMainframe

Índice textual da série Blog Analytics

Esta série investiga a saúde técnica de blogs antigos no Blogger, cobrindo auditoria de HTML, resíduos de editores, SEO técnico, acessibilidade, limpeza segura, diagnóstico automatizado e motores de regras.

  1. Blog Analytics Parte I — Como descobrir evidências invisíveis
  2. Blog Analytics Parte II — Os resíduos invisíveis do HTML
  3. Blog Analytics Parte III — Como limpar com segurança
  4. Blog Analytics Parte IV — Checklist de auditoria
  5. Blog Analytics Parte V — Construindo o Bellacosa Blog Doctor
  6. Blog Analytics Parte VI — Criando o motor de regras
Vagner Renato Bellacosa, IBM Champion e especialista em IBM Mainframe
IBM Z17 SYSTEM ONLINE
Sobre o autor

Vagner Renato Bellacosa

IBM Champion 2026 • Especialista em IBM Mainframe

Vagner Renato Bellacosa trabalha com IBM Mainframe desde 1988 , é IBM Champion e especialista em COBOL, CICS, Db2, z/OS e IBM Z. Compartilha experiências profissionais, conhecimento técnico, história da computação e práticas do universo mainframe para aproximar novas gerações das tecnologias que sustentam empresas, bancos e governos ao redor do mundo.

IBM Champion IBM Z COBOL CICS Db2 z/OS Mainframe desde 1988