#schemaorg — Public Fediverse posts

Микроразметка в 2026-м: что реально работает, что умерло, а за что можно получить санкцию

Микроразметке пятнадцать лет, и вокруг неё до сих пор два лагеря: одни верят в магическую кнопку «звёзды в выдаче», другие считают её карго-культом. Разбираю, что из Schema.org реально работает в Яндексе и Google в 2026 году, что тихо умерло за последние три года (FAQ, HowTo, sitelinks searchbox), зачем структурированные данные снова стали важны из-за LLM — и как за самодеятельность с рейтингами прилетает ручная санкция. С кодом, валидаторами и данными из практики агентства: у 95% сайтов, приходящих на продвижение, разметки нет вообще.

https://habr.com/ru/articles/1067328/

#микроразметка #schemaorg #jsonld #seo #сниппеты #микроданные

Почему нейросети путают ваш бренд с другой компанией — и как это проверить

Когда говорят про оптимизацию под ИИ, обычно представляют работу с текстом на сайте. Но у меня раз за разом всплывает более базовая проблема: модель вообще не понимает, что за компания стоит за названием. Путает её с иностранной компанией с похожим названием, приписывает чужие продукты, называет не тот город. Это провал не контента, а цифрового следа компании (entity footprint), и его можно измерить.

https://habr.com/ru/articles/1066020/

#цифровой_след #бренд_в_нейросетях #нейросети #schemaorg #sameAs #JSONLD #LLM #GEO #аудит #граф_знаний

Как попасть в голосовые ответы Алисы — и почему разметка тут почти ни при чём

Недавно на сайте одного из клиентов мы с командой по всем правилам поставили speakable — разметку, которая подсказывает голосовому ассистенту, какие куски страницы читать вслух: короткий ответ в начале, три ответа из FAQ, всё в валидном коде, а селекторы точно на нужных блоках. Алиса зачитывала ответ ноль раз. Причина оказалась глубже разметки: страница висела на 14-м месте обычной выдачи Яндекса. Ниже разбираю, как размечать под голос правильно, на что это реально влияет и на каких граблях я терял время.

https://habr.com/ru/articles/1064662/

#speakable #JSONLD #schemaorg #Алиса_AI #голосовой_поиск #AEO #GEO #structured_data #ЯндексВебмастер #voice_search

GEO: техника нейровыдачи: чанкование с оверлапом, Schema.org, robots.txt и пр. Часть 3 из 3

В этой части — самое приземлённое про GEO-продвижение. Никакой философии, только то, что можно взять и в понедельник начать делать руками: как резать страницу под чанки, какой JSON-LD писать, какие боты пускать на сайт, как честно замерить цитируемость и как поймать переходы в Метрике и GA. То есть форма, в которую упаковывается уже сформулированная ценность. Если ценности нет, форма не спасёт — об этом была вторая часть. Часть 1 — Нейросайт глазами бизнеса: позиции, трафик, конверсия и скорость изменений Часть 2 — Как принудить нейросеть рассказать про ваш продукт

https://habr.com/ru/articles/1060370/

#GEO #Schemaorg #JSONLD #robotstxt #llmstxt #чанкование #SEO #нейровыдача #AI_Overview #Share_of_Voice

Почему ChatGPT называет одни бренды и молчит про другие: как машина знает компании

Я изучаю AEO/GEO (продвижение брендов в ответах нейросетей) и наткнулся на разбор про странную вещь: нейросети называют одни бренды и будто не замечают другие, причём качество продукта тут ни при чём ( SearchAtlas ). Объясняют это через понятие сущности: и поиск, и нейросети воспринимают бренд как отдельный объект знания со своими свойствами и связями. Тема показалась любопытной, и я полез в первоисточники: доки Google, schema.org, Wikidata, замеры Ahrefs и Frase, пару работ с arXiv. Там и уткнулся в неожиданное. Знание о бренде у машины устроено двумя совершенно разными способами, и их постоянно путают. Один способ работает у обычного поиска Google, это Knowledge Graph. Другой у языковых моделей вроде ChatGPT, это память в весах нейросети. Единого первоисточника у этого разбора нет, я собрал его из перечисленного под наш контекст, ссылки стоят по тексту. Дальше разложу оба механизма простым языком и покажу, что с каждым можно сделать.

https://habr.com/ru/articles/1055744/

#knowledge_graph #llm #gpt #schemaorg #wikidata #entity_seo #нейропоиск #seo #aeo #geo

Как внедрить микроразметку Product для каталога с торговыми предложениями на 1С-Битрикс: кейс и примеры кода

Почти все инструкции в выдаче и любой ответ нейросети показывают один и тот же шаблон, одиночный Product с одной ценой. Для лендинга это работает. Для интернет-магазина, где у куртки пять размеров и три цвета, это большая ошибка. Поисковик видит один вариант из пятнадцати, остальные для него не существуют. А половина карточек ещё и молчит про наличие и вылетает из товарных результатов целиком. Я разобрал это на живом проекте под 1С-Битрикс с торговыми предложениями. Перевёл карточку с одиночного Product на ProductGroup с вариантами, проставил наличие из остатков и прошёл Rich Results Test без критичных ошибок. По дороге собрал одиннадцать граблей, на которых все теряют время. Карточку рендерил не тот компонент, на который я думал. Кеш маскировал диагностику. Справочник отдавал числовой ID вместо «46». У вариантов отваливалась картинка, и валидатор Google подсвечивал это красным. И так далее, по списку. Внутри пошаговый план, таблица и готовый код, который можно скопировать одним списком. Писать php самому маркетологу не обязательно. А вот понимать, почему «просто поставьте плагин» часто не срабатывает и какой результат требовать от подрядчика, стоит. Тем более сейчас, когда в ИИ-поиске вы либо тот фрагмент, который система процитировала, либо вас просто нет.

https://habr.com/ru/articles/1054116/

#schemaorg #микроразметка #JSONLD #ProductGroup #1СБитрикс #Rich_Results #ecommerce_SEO #ИИпоиск #торговые_предложения #товарная_микроразметка

Микроразметка на Tilda: внедрение JSON-LD, проверка и типовые ошибки

В этой статье разберу JSON-LD для сайтов на Tilda: что именно размечать, как разделять общий код и код конкретной страницы, где проверять микроразметку и какие ошибки чаще всего появляются после правок сайта. Материал не про то, как скопировать готовый JSON из генератора. Такой вариант годится только для самых простых страниц. На коммерческом сайте разметку лучше собирать от структуры: есть сайт, организация, конкретные страницы, услуги, статьи, контакты, изображения, хлебные крошки и вопросы. Часть этих данных относится ко всему сайту, часть - только к одной странице. Если это не разделить сразу, дальше начинаются дубли, старые URL, одинаковые схемы на всех страницах и странные предупреждения в валидаторах. Для примеров возьму нейтральную нишу - учебный центр.

https://habr.com/ru/articles/1049798/

#JSONLD #Schemaorg #микроразметка #Tilda #SEO_на_Tilda #структурированные_данные #техническое_SEO #nocode_SEO #seoпродвижение #seoоптимизация

Как JSON‑LD начинает врать — даже когда валидатор зелёный

На странице услуги пользователь видел цену «от 25 000 ₽», а meta description и JSON‑LD продолжали отдавать 50000. Валидатор был зелёным. И это был собственный сайт веб‑студии! Разберёмся, как валидная микроразметка начинает публиковать неверные данные, почему замена одного числа не решает проблему и что на самом деле нужно проверять после изменений сайта. Разобраться, что проверять

https://habr.com/ru/articles/1049472/

#JSONLD #Schemaorg #структурированные_данные #микроразметка #техническое_SEO #качество_данных #вебразработка

FYI: Google and Schema.org finally show how the web uses structured data: Google and Schema.org release the first public dataset on structured data term adoption, covering millions of domains in CSV and JSON formats, updated monthly. https://ppc.land/google-and-schema-org-finally-show-how-the-web-uses-structured-data/ #Google #SchemaOrg #StructuredData #DataAnalysis #WebDevelopment

RT @carlos_darko: Google kündigt in Zusammenarbeit mit der Schema.org-Community ein neues Repository mit Nutzungsdaten verschiedener strukturierter Datenmarkierungen im Internet an.

mehr auf Arint.info

#DataAnalytics #Google #Schemaorg #SEO #StructuredData #WebDevelopment #arint_info

https://x.com/carlos_darko/status/2062930091038957889#m

RT @carlos_darko: Google kündigt in Zusammenarbeit mit der Schema.org-Community ein neues Repository mit Nutzungsdaten verschiedener strukturierter Datenmarkierungen im Internet an.

mehr auf Arint.info

#DataAnalytics #Google #Schemaorg #SEO #StructuredData #WebDevelopment #arint_info

https://x.com/carlos_darko/status/2062930091038957889#m

ICYMI: Google and Schema.org finally show how the web uses structured data: Google and Schema.org release the first public dataset on structured data term adoption, covering millions of domains in CSV and JSON formats, updated monthly. https://ppc.land/google-and-schema-org-finally-show-how-the-web-uses-structured-data/ #Google #SchemaOrg #StructuredData #DataAdoption #WebDevelopment

Google and Schema.org finally show how the web uses structured data: Google and Schema.org release the first public dataset on structured data term adoption, covering millions of domains in CSV and JSON formats, updated monthly. https://ppc.land/google-and-schema-org-finally-show-how-the-web-uses-structured-data/ #StructuredData #SchemaOrg #Google #SEO #WebDevelopment

Google and Schema.org finally show how the web uses structured data: Google and Schema.org release the first public dataset on structured data term adoption, covering millions of domains in CSV and JSON formats, updated monthly. https://ppc.land/google-and-schema-org-finally-show-how-the-web-uses-structured-data/ #StructuredData #SchemaOrg #Google #SEO #WebDevelopment

FYI: Google's secret thumbnail formula: schema.org and og:image both count: Google today clarified it uses both schema.org markup and the og:image meta tag to select image thumbnails in Google Search and Discover, updating its official documentation. https://ppc.land/googles-secret-thumbnail-formula-schema-org-and-og-image-both-count/ #Google #SEO #DigitalMarketing #SearchEngineOptimization #SchemaOrg

FYI: Google's secret thumbnail formula: schema.org and og:image both count: Google today clarified it uses both schema.org markup and the og:image meta tag to select image thumbnails in Google Search and Discover, updating its official documentation. https://ppc.land/googles-secret-thumbnail-formula-schema-org-and-og-image-both-count/ #Google #SEO #DigitalMarketing #SearchEngineOptimization #SchemaOrg

Neu im Forum:

Strukturierte Daten für Portfolio/Referenzen

https://t3forum.net/d/1100-strukturierte-daten-fuer-portfolioreferenzen

#t3academyforum #StructuredData #SchemaOrg

Neu im Forum:

Strukturierte Daten für Portfolio/Referenzen

https://t3forum.net/d/1100-strukturierte-daten-fuer-portfolioreferenzen

#t3academyforum #StructuredData #SchemaOrg

Adding AI Usage Metadata to JSON-LD Structured Data

https://rmendes.net/articles/2026/03/03/adding-ai-usage-metadata-to

Adding AI Usage Metadata to JSON-LD Structured Data

https://rmendes.net/articles/2026/03/03/adding-ai-usage-metadata-to

Google's secret thumbnail formula: schema.org and og:image both count: Google today clarified it uses both schema.org markup and the og:image meta tag to select image thumbnails in Google Search and Discover, updating its official documentation. https://ppc.land/googles-secret-thumbnail-formula-schema-org-and-og-image-both-count/ #Google #SEO #SchemaOrg #WebMarketing #DigitalMarketing

Google's secret thumbnail formula: schema.org and og:image both count: Google today clarified it uses both schema.org markup and the og:image meta tag to select image thumbnails in Google Search and Discover, updating its official documentation. https://ppc.land/googles-secret-thumbnail-formula-schema-org-and-og-image-both-count/ #Google #SEO #SchemaOrg #WebMarketing #DigitalMarketing

Maximally Semantic Structure for a Blog Post

Yes, I know the cliché that bloggers are always blogging about blogging!

I like semantics. It tickles that part of my delicious meaty brain that longs for structure. Semantics are good for computers and humans. Computers can easily understand the structure of the data, humans can use tools like screen-readers to extract the data they're interested in.

In HTML, there are three main ways to impose semantics - elements, attributes, and hierarchical microdata.

Elements are easy to understand. Rather than using a generic element like <div> you can use something like <nav> to show an element's contents are for navigation. Or <address> to show that the contents are an address. Or <article><section> to show that the section is part of a parent article.

Attributes are also common. You can use relational attributes to show how a link relates to the page it is on. For example <a rel=author href=https://example.com> shows that the link is to the author of the current page. Or, to see that a link goes to the previous page in a series <a rel=prev href=/page5>.

Finally, we enter the complex and frightening world of microdata.

Using the Schema.org vocabulary it's possible to add semantic metadata within an HTML element. For example, <body itemtype=https://schema.org/Blog itemscope> says that the body of this page is a Blog. Or, to say how many words a piece has, <span itemprop=wordCount content=1100>1,100 words</span>.

There are many properties you can use. Here's the outline structure of a single blog post with a code sample, a footnote, and a comment. You can check its structured data and verify that it is conformant HTML.

Feel free to reuse.

<!doctype html>
<html lang=en-gb>
<head><title>My Blog</title></head>
<body itemtype=https://schema.org/Blog itemscope>

    <header itemprop=headline>
        <a rel=home href=https://example.com>My Blog</a>
    </header>

    <main itemtype=https://schema.org/BlogPosting itemprop=blogPost itemscope>
        <article>
            <header>
                <time itemprop=https://schema.org/datePublished datetime=2025-12-01T12:34:39+01:00>
                    1st January, 2025
                </time>
                <h1 itemprop=headline>
                    <a rel=bookmark href=https://example.com/page>Post Title</a>
                </h1>
                <span itemtype=https://schema.org/Person itemprop=author itemscope>
                    <a itemprop=url href=https://example.org/>
                        By <span itemprop=name>Author Name</span>
                    </a>
                    <img itemprop=image src=/photo.jpg alt>
                </span>
                <p>
                    <a itemprop=keywords content=HTML rel=tag href=/tag/html/>HTML</a> 
                    <a itemprop=keywords content=semantics rel=tag href=/tag/semantics/>semantics</a> 
                    <a itemprop=commentCount content=6 href=#comments>6 comments</a>
                    <span itemprop=wordCount content=1100>1,100 words</span>
                    <span itemtype=https://schema.org/InteractionCounter itemprop=interactionStatistic itemscope>
                        <meta content=https://schema.org/ReadAction itemprop=interactionType>
                        <span itemprop=userInteractionCount content=5150>
                            Viewed ~5,150 times
                        </span>
                    </span>
                </p>
            </header>

            <div itemprop=articleBody>
                <img itemprop=image src=/hero.png alt>
                <p>Text of the post.</p>
                <p>Text with a footnote<sup id=fnref><a role=doc-noteref href=#fn>0</a></sup>.</p>

                <pre itemtype=https://schema.org/SoftwareSourceCode itemscope translate=no>
                    <span itemprop=programmingLanguage>PHP</span>
                    <code itemprop=text>&amp;lt;?php echo $postID ?&amp;gt;</code>
                </pre>

                <section role=doc-endnotes>
                    <h2>Footnotes</h2>
                    <ol>
                        <li id=fn>
                            <p>Footnote text. <a role=doc-backlink href=#fnref>↩︎</a></p>
                        </li>
                    </ol>
                </section>
            </div>
        </article>

        <section id=comments>
            <h2>Comments</h2>
            <article itemtype=https://schema.org/Comment itemscope id="comment-123465">
                <time itemprop=dateCreated datetime=2025-09-11T13:24:54+01:00>
                    <a itemprop=url href=#comment-123465>2025-09-11 13:24</a>
                </time>
                <div itemtype=https://schema.org/Person itemprop=author itemscope>
                    <img itemprop=image src="/avatar.jpg" alt>
                    <h3>
                        <span itemprop=name>Alice</span> says:
                    </h3>
                </div>
                <div itemprop=text>
                    <p>Comment text</p>
                </div>
            </article>
        </section>
    </main>
</body>
</html>

This blog post is entitled "maximally" but, of course, there is lots more that you can add if you really want to.

Remember, none of this is necessary. Computers and humans are pretty good at extracting meaning from unstructured text. But making things easier for others is always time well spent.

Maximally Semantic Structure for a Blog Post

Yes, I know the cliché that bloggers are always blogging about blogging!

I like semantics. It tickles that part of my delicious meaty brain that longs for structure. Semantics are good for computers and humans. Computers can easily understand the structure of the data, humans can use tools like screen-readers to extract the data they're interested in.

In HTML, there are three main ways to impose semantics - elements, attributes, and hierarchical microdata.

Elements are easy to understand. Rather than using a generic element like <div> you can use something like <nav> to show an element's contents are for navigation. Or <address> to show that the contents are an address. Or <article><section> to show that the section is part of a parent article.

Attributes are also common. You can use relational attributes to show how a link relates to the page it is on. For example <a rel=author href=https://example.com> shows that the link is to the author of the current page. Or, to see that a link goes to the previous page in a series <a rel=prev href=/page5>.

Finally, we enter the complex and frightening world of microdata.

Using the Schema.org vocabulary it's possible to add semantic metadata within an HTML element. For example, <body itemtype=https://schema.org/Blog itemscope> says that the body of this page is a Blog. Or, to say how many words a piece has, <span itemprop=wordCount content=1100>1,100 words</span>.

There are many properties you can use. Here's the outline structure of a single blog post with a code sample, a footnote, and a comment. You can check its structured data and verify that it is conformant HTML.

Feel free to reuse.

<!doctype html>
<html lang=en-gb>
<head><title>My Blog</title></head>
<body itemtype=https://schema.org/Blog itemscope>

    <header itemprop=headline>
        <a rel=home href=https://example.com>My Blog</a>
    </header>

    <main itemtype=https://schema.org/BlogPosting itemprop=blogPost itemscope>
        <article>
            <header>
                <time itemprop=https://schema.org/datePublished datetime=2025-12-01T12:34:39+01:00>
                    1st January, 2025
                </time>
                <h1 itemprop=headline>
                    <a rel=bookmark href=https://example.com/page>Post Title</a>
                </h1>
                <span itemtype=https://schema.org/Person itemprop=author itemscope>
                    <a itemprop=url href=https://example.org/>
                        By <span itemprop=name>Author Name</span>
                    </a>
                    <img itemprop=image src=/photo.jpg alt>
                </span>
                <p>
                    <a itemprop=keywords content=HTML rel=tag href=/tag/html/>HTML</a> 
                    <a itemprop=keywords content=semantics rel=tag href=/tag/semantics/>semantics</a> 
                    <a itemprop=commentCount content=6 href=#comments>6 comments</a>
                    <span itemprop=wordCount content=1100>1,100 words</span>
                    <span itemtype=https://schema.org/InteractionCounter itemprop=interactionStatistic itemscope>
                        <meta content=https://schema.org/ReadAction itemprop=interactionType>
                        <span itemprop=userInteractionCount content=5150>
                            Viewed ~5,150 times
                        </span>
                    </span>
                </p>
            </header>

            <div itemprop=articleBody>
                <img itemprop=image src=/hero.png alt>
                <p>Text of the post.</p>
                <p>Text with a footnote<sup id=fnref><a role=doc-noteref href=#fn>0</a></sup>.</p>

                <pre itemtype=https://schema.org/SoftwareSourceCode itemscope translate=no>
                    <span itemprop=programmingLanguage>PHP</span>
                    <code itemprop=text>&amp;lt;?php echo $postID ?&amp;gt;</code>
                </pre>

                <section role=doc-endnotes>
                    <h2>Footnotes</h2>
                    <ol>
                        <li id=fn>
                            <p>Footnote text. <a role=doc-backlink href=#fnref>↩︎</a></p>
                        </li>
                    </ol>
                </section>
            </div>
        </article>

        <section id=comments>
            <h2>Comments</h2>
            <article itemtype=https://schema.org/Comment itemscope id="comment-123465">
                <time itemprop=dateCreated datetime=2025-09-11T13:24:54+01:00>
                    <a itemprop=url href=#comment-123465>2025-09-11 13:24</a>
                </time>
                <div itemtype=https://schema.org/Person itemprop=author itemscope>
                    <img itemprop=image src="/avatar.jpg" alt>
                    <h3>
                        <span itemprop=name>Alice</span> says:
                    </h3>
                </div>
                <div itemprop=text>
                    <p>Comment text</p>
                </div>
            </article>
        </section>
    </main>
</body>
</html>

This blog post is entitled "maximally" but, of course, there is lots more that you can add if you really want to.

Remember, none of this is necessary. Computers and humans are pretty good at extracting meaning from unstructured text. But making things easier for others is always time well spent.

Fixing "Date/time not in ISO 8601 format" in Google Search Console

I like using microdata within my HTML to provide semantic metadata. One of my pages had this scrap of code on it:

<time
   itemprop="datePublished"
   itemscope
   datetime="2025-06-09T11:27:06+01:00">9 June 2025 11:27</time>

The Google Search Console was throwing this error:

I was fairly sure that was a valid ISO 8601 string. It certainly matched the description in the Google documentation. Nevertheless, I fiddled with a few different formats, but all failed.

On the advice of Barry Hunter, I tried changing the datetime attribute to content. That also didn't work.

Then I looked closely at the code.

The issue is the itemscope. Removing that allowed the code to pass validation. But why?

Here's what the Schema.org documentation says:

By adding itemscope, you are specifying that the HTML contained in the block is about a particular item.

The HTML specification gives this example:

<div itemscope>
   <img itemprop="image" src="google-logo.png" alt="Google">
</div>

Here, the image property is the value of the element. In this case google-logo.png. So what's the problem with the time example?

Well, <image> is a void element. It doesn't have any HTML content - so the metadata is taken from the src attribute.

But <time> is not a void element. It does contain HTML. So something like this would be valid:

<time
   itemprop="datePublished"
   itemscope
>2025-06-09T11:27:06+01:00</time>

The text contained by the element is a valid ISO8601 string.

My choice was either to present the ISO8601 string to anyone viewing the page, or simply to remove the itemscope. So I chose the latter.

Fixing "Date/time not in ISO 8601 format" in Google Search Console

I like using microdata within my HTML to provide semantic metadata. One of my pages had this scrap of code on it:

<time
   itemprop="datePublished"
   itemscope
   datetime="2025-06-09T11:27:06+01:00">9 June 2025 11:27</time>

The Google Search Console was throwing this error:

I was fairly sure that was a valid ISO 8601 string. It certainly matched the description in the Google documentation. Nevertheless, I fiddled with a few different formats, but all failed.

On the advice of Barry Hunter, I tried changing the datetime attribute to content. That also didn't work.

Then I looked closely at the code.

The issue is the itemscope. Removing that allowed the code to pass validation. But why?

Here's what the Schema.org documentation says:

By adding itemscope, you are specifying that the HTML contained in the block is about a particular item.

The HTML specification gives this example:

<div itemscope>
   <img itemprop="image" src="google-logo.png" alt="Google">
</div>

Here, the image property is the value of the element. In this case google-logo.png. So what's the problem with the time example?

Well, <image> is a void element. It doesn't have any HTML content - so the metadata is taken from the src attribute.

But <time> is not a void element. It does contain HTML. So something like this would be valid:

<time
   itemprop="datePublished"
   itemscope
>2025-06-09T11:27:06+01:00</time>

The text contained by the element is a valid ISO8601 string.

My choice was either to present the ISO8601 string to anyone viewing the page, or simply to remove the itemscope. So I chose the latter.

AI-агенты для SEO: как автоматизировать 98% рутины и не потерять качество

Четыре месяца назад я сидел в офисе клиента в Минске. Владелец интернет-магазина спортивного питания смотрел на график Analytics. Линия трафика ползла вниз. Медленно. Но неумолимо. «Мы делаем всё правильно», — сказал он. И был прав. Контент. Техническая оптимизация. Ссылочная масса. Команда из трёх SEO-специалистов работала на пределе. Но конкурент из Москвы обгонял их каждую неделю. По всем фронтам. Я открыл сайт конкурента. Замер. За последние три месяца они опубликовали 90 новых статей. Детальные гайды по спортпиту. Сравнения. Обзоры. Внутренняя перелинковка выстроена хирургически точно. Schema.org разметка на каждой странице. Технические параметры — как у enterprise-проекта. Позвонил знакомому, который работает в той компании. Спросил прямо: «У вас что, команда из двадцати человек?» Пауза. Смех. «Один SEO-специалист. Плюс AI-агенты. Автоматизировали 98% процессов.» Вот тогда я понял. Правила изменились. И большинство об этом ещё не знает.

https://habr.com/ru/articles/955108/

#AIагенты_для_SEO #автоматизация_SEO #ai_overviews #schemaorg #eeat #кластеризация_запросов #внутренние_ссылки #линкбилдинг #keyword_research #техническое_SEO

Class Warfare! Can I eliminate CSS classes from my HTML?

https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/

I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website:

I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely.

Long time readers will know that I'm a big fan of using semantic HTML where possible. If you peek beneath the curtain of this website you'll only see a handful of <div> elements (mostly because WordPress hardcodes them) - all the other blocks are fully semantic. Regrettably, there are rather too many <span> elements for my liking - normally for accessibility or for supplementing the metadata.

Overall, my CSS contained about 134 rules which selected based on class. Is that a lot? It feels like a lot.

On the one hand, classes are an easy way of splitting and grouping elements. Some <img>s should be displayed one way, the rest another. There's no semantic way to say "This is a hero image and should take up the full width, but this is an icon and should float discretely to the right."

But, on the other hand, why do we need classes? Keith Cirkel's excellent post "CSS Classes considered harmful" goes through their history and brings together some proposed solutions for replacing them. I think his idea of using data- attributes is a neat hack - but ultimately isn't much different from using classes. It's still a scrap of metadata to be tied into a style-sheet.

Classes are great for when you reuse something. I have multiple <section> elements but most don't share anything in common with the others. So they probably oughtn't have classes.

Removing classes has some advantages. It makes the HTML fractionally smaller, sure, but it also forces the author to think about the logical structure of their page and the semantics behind it.

Looking through my HTML, lots of classes exist because of laziness. If I want to position all the <time> elements which are within a comment, I don't need to write <time class="whatever"> and to pair it with .whatever { … }. Instead, I can use modern CSS selectors and say #comments time { … }.

But this leads me on to another existential question.

Are IDs necessary in modern HTML?

Mayyyyybe? I only have one <main> element, so an ID on there is unnecessary. <input> elements need IDs in order to be properly targetted by <label>s - but the label can wrap around the input. I have multiple <aside> elements because there's no semantic <widget> element, so they need unique IDs.

In theory, as suggested by Adam above, I could use an autonomous custom element like <my-widget> - but that has none of the semantics and, frankly, feels like a bit of a cheat.

Trimming the fat

Any day where I can delete some code is a good day. This was an excellent exercise in going through (years) of HTML and CSS to see what cruft had built up.

The first CSS rule I changed was, as mentioned above:

time.commentmetadata {    float: right;}

Which became:

#comments time {     float: right;}

Classless and slightly more brief. Is it more readable? Having the fact it was about the metadata in a class could have been slightly useful - but if I thought it would be confusing, I could stick a /* comment */ in there.

Next, I found <nav class="navigation posts-navigation"> - what a tautology! I have multiple <nav> elements, it is true. But none of them have the same style. So this swiftly became <nav id="posts-navigation"> with an accompanying CSS rewrite.

My theme switcher had a bunch of <label class=button>s. They were all within a container with a unique ID, so could they be changed? Yes. But seeing the class name in the HTML is a good reminder to the author of how they are meant to display. Does that co-mingle content and presentation too much?

Some of the WordPress default classes are ridiculous. The body_class() function injected this into every <body>

"wp-singular post-template-default single single-post postid-62959 single-format-standard wp-theme-edent-wordpress-theme"

Most of that is redundant - what's the difference between single and single-post? For my purposes, nothing! So they were all yeeted into the sun.

Rather than targetting IDs or classes, I targetted the presence or absence of Schema.org microdata.

For example:

main[itemprop="blogPost"] { … }main:not([itemprop="blogPost"]) { … }

This can go to the extreme. I have lots of comments, each one has an author, the author's details are wrapped in <div class="authordetails">…</div>

That can be replaced with:

/* Comment Author */li[itemtype="https://schema.org/Comment"] > article > div[itemprop="https://schema.org/author"] {    margin-bottom: 0;}

Is that sensible? It is more semantic, but feels a bit brittle.

Parent selector are also now a thing. If I want a paragraph to have centred text but only when there's a submit button inside it:

p:has(input#submit) {  text-align: center;}

Again, am I sure that my button will always be inside a paragraph?

Similarly, sibling selectors are sometimes superior - but they do suppose that your layout never changes.

What remains?

There are some bits of this site which are reusable and do need classes. The code-highlighting you see above requires text to be wrapped in spans with specific classes.

Image alignment was also heavily class based.

There are some accessibility things which are either hidden or exposed using classes.

A bunch of WordPress defaults use classes and, even if they are redundant, it's hard to exorcise them.

As much as I would have liked to get rid of all my IDs, many needed to stay for linking as well as CSS targetting.

All told, the changes I made were:

• 134 class selectors down to about 65.
• 35 ID selectors up to about 50.
• 5 attribute selectors up to to about 20.
• Deleted or combined a lot of redundant CSS and tidied up my markup considerably.

I have around 250 CSS rules, so now the majority target semantics rather than classes or IDs.

Is this really necessary?

No, of course not. This is an exercise in minimalism, creativity, and constraint. Feel free to litter your HTML with whatever attributes you want!

As I went through, it increasingly became apparent that I was fitting my CSS to my HTML's logical structure rather than to its conceptual structure.

Previously, my comments were targetted with a class. Now they have the slightly more tangled targetting of "divs with this schema attribute whose parent is an article and whose grandparent has this ID".

It is a delightful meditative exercise to go through your code and deeply consider whether something is unique, reusable, or obsolete.

#blog #css #HTML #schemaOrg #semanticWeb

Class Warfare! Can I eliminate CSS classes from my HTML?

https://shkspr.mobi/blog/2025/09/class-warfare-can-i-eliminate-css-classes-from-my-html/

I recently read a brilliantly provocative blog post called "This website has no class". In it, Adam Stoddard makes the case that you might not need CSS classes on a modern website:

I think constraints lead to interesting, creative solutions […]. Instead of relying on built in elements a bit more, I decided to banish classes from my website completely.

Long time readers will know that I'm a big fan of using semantic HTML where possible. If you peek beneath the curtain of this website you'll only see a handful of <div> elements (mostly because WordPress hardcodes them) - all the other blocks are fully semantic. Regrettably, there are rather too many <span> elements for my liking - normally for accessibility or for supplementing the metadata.

Overall, my CSS contained about 134 rules which selected based on class. Is that a lot? It feels like a lot.

On the one hand, classes are an easy way of splitting and grouping elements. Some <img>s should be displayed one way, the rest another. There's no semantic way to say "This is a hero image and should take up the full width, but this is an icon and should float discretely to the right."

But, on the other hand, why do we need classes? Keith Cirkel's excellent post "CSS Classes considered harmful" goes through their history and brings together some proposed solutions for replacing them. I think his idea of using data- attributes is a neat hack - but ultimately isn't much different from using classes. It's still a scrap of metadata to be tied into a style-sheet.

Classes are great for when you reuse something. I have multiple <section> elements but most don't share anything in common with the others. So they probably oughtn't have classes.

Removing classes has some advantages. It makes the HTML fractionally smaller, sure, but it also forces the author to think about the logical structure of their page and the semantics behind it.

Looking through my HTML, lots of classes exist because of laziness. If I want to position all the <time> elements which are within a comment, I don't need to write <time class="whatever"> and to pair it with .whatever { … }. Instead, I can use modern CSS selectors and say #comments time { … }.

But this leads me on to another existential question.

Are IDs necessary in modern HTML?

Mayyyyybe? I only have one <main> element, so an ID on there is unnecessary. <input> elements need IDs in order to be properly targetted by <label>s - but the label can wrap around the input. I have multiple <aside> elements because there's no semantic <widget> element, so they need unique IDs.

In theory, as suggested by Adam above, I could use an autonomous custom element like <my-widget> - but that has none of the semantics and, frankly, feels like a bit of a cheat.

Trimming the fat

Any day where I can delete some code is a good day. This was an excellent exercise in going through (years) of HTML and CSS to see what cruft had built up.

The first CSS rule I changed was, as mentioned above:

 CSStime.commentmetadata {    float: right;}

Which became:

 CSS#comments time {     float: right;}

Classless and slightly more brief. Is it more readable? Having the fact it was about the metadata in a class could have been slightly useful - but if I thought it would be confusing, I could stick a /* comment */ in there.

Next, I found <nav class="navigation posts-navigation"> - what a tautology! I have multiple <nav> elements, it is true. But none of them have the same style. So this swiftly became <nav id="posts-navigation"> with an accompanying CSS rewrite.

My theme switcher had a bunch of <label class=button>s. They were all within a container with a unique ID, so could they be changed? Yes. But seeing the class name in the HTML is a good reminder to the author of how they are meant to display. Does that co-mingle content and presentation too much?

Some of the WordPress default classes are ridiculous. The body_class() function injected this into every <body>

"wp-singular post-template-default single single-post postid-62959 single-format-standard wp-theme-edent-wordpress-theme"

Most of that is redundant - what's the difference between single and single-post? For my purposes, nothing! So they were all yeeted into the sun.

Rather than targetting IDs or classes, I targetted the presence or absence of Schema.org microdata.

For example:

 CSSmain[itemprop="blogPost"] { … }main:not([itemprop="blogPost"]) { … }

This can go to the extreme. I have lots of comments, each one has an author, the author's details are wrapped in <div class="authordetails">…</div>

That can be replaced with:

 CSS/* Comment Author */li[itemtype="https://schema.org/Comment"] > article > div[itemprop="https://schema.org/author"] {    margin-bottom: 0;}

Is that sensible? It is more semantic, but feels a bit brittle.

Parent selector are also now a thing. If I want a paragraph to have centred text but only when there's a submit button inside it:

 CSSp:has(input#submit) {  text-align: center;}

Again, am I sure that my button will always be inside a paragraph?

Similarly, sibling selectors are sometimes superior - but they do suppose that your layout never changes.

What remains?

There are some bits of this site which are reusable and do need classes. The code-highlighting you see above requires text to be wrapped in spans with specific classes.

Image alignment was also heavily class based.

There are some accessibility things which are either hidden or exposed using classes.

A bunch of WordPress defaults use classes and, even if they are redundant, it's hard to exorcise them.

As much as I would have liked to get rid of all my IDs, many needed to stay for linking as well as CSS targetting.

All told, the changes I made were:

• 134 class selectors down to about 65.
• 35 ID selectors up to about 50.
• 5 attribute selectors up to to about 20.
• Deleted or combined a lot of redundant CSS and tidied up my markup considerably.

I have around 250 CSS rules, so now the majority target semantics rather than classes or IDs.

Is this really necessary?

No, of course not. This is an exercise in minimalism, creativity, and constraint. Feel free to litter your HTML with whatever attributes you want!

As I went through, it increasingly became apparent that I was fitting my CSS to my HTML's logical structure rather than to its conceptual structure.

Previously, my comments were targetted with a class. Now they have the slightly more tangled targetting of "divs with this schema attribute whose parent is an article and whose grandparent has this ID".

It is a delightful meditative exercise to go through your code and deeply consider whether something is unique, reusable, or obsolete.

#blog #css #HTML #schemaOrg #semanticWeb

Last week we had tons of amazing discussions on #metadata for #TrainingMaterials #OER during our @NFDI #DiscoRSE #Quadriga #hackathon at @ZBMED

Thanks to all participants!

We worked on crosswalks and mappings including #SchemaOrg #LearningResource @dini @dalia #Bioschemas #AMB #Skills4EOSC

Results will be published in @zenodo_org Keep an eye to our updates on social media if you are interested in the topic.

“#Metadata is in the air, everywhere.”

61 metadata experts from the #NFDI consortia met on June 25-27 at @tibhannover Their goal was to prepare a NFDI recommendation on generic metadata schemas for research data. It was decided to adopt DataCite Metadata Schema (by @datacite), #DCAT (by @w3c) and #schemaorg. Crosswalks, provided by RDA (@resdatall), were investigated and fields classified as mandatory, recommended and optional. More info: https://www.nfdi.de/section-meta/task-force-metadata/?lang=en

@NFDI #rdm

You'd think Google, having launched schema.org, knows how to produce valid schema.org metadata and HTML5.

YouTube: How about a `<span>` inside the head, and `<link rel=alternative>` inside the body?

HTML5 parsers:
Thanks, I'll take that span as your implied end of `<head>`, and raise you an implied start of `<body>`. Everything that follows is now part of the body.

Context:
https://github.com/Ranchero-Software/NetNewsWire/issues/902#issuecomment-2990075755

#NetNewsWire #WebStandards #whatwg #HTML5 #schemaorg #google

You'd think Google, having launched schema.org, knows how to produce valid schema.org metadata and HTML5.

YouTube: How about a `<span>` inside the head, and `<link rel=alternative>` inside the body?

HTML5 parsers:
Thanks, I'll take that span as your implied end of `<head>`, and raise you an implied start of `<body>`. Everything that follows is now part of the body.

Context:
https://github.com/Ranchero-Software/NetNewsWire/issues/902#issuecomment-2990075755

#NetNewsWire #WebStandards #whatwg #HTML5 #schemaorg #google

@b2m @datenschatz der Musterdatenkatalog der Bertelsmann Stiftung hatte anfangs auch die #GND verlinkt. Beim letzten großen Update wurden einfach eine handvoll Links benutzt - für jeden sollte jetzt etwas dabei sein. #GND #Wikidata #SchemaORG #EuroVoc

https://github.com/bertelsmannstift/Musterdatenkatalog-V4/blob/main/assets/skos_sample.png

Schema.org на Tilda — раз и навсегда

Наверное у каждого разработчика на Тильде есть момент, когда он опубликовал сайт, порадовался, а потом открыл выдачу и увидел унылый двухстрочный сниппет без FAQ, без даты, без красивых крошек в URL. А ведь у конкурентов есть. И тогда само собой возникают вопросы: где вообще прятать JSON-LD в Тильде (и возможно ли это)? Как не сорвать вёрстку? И, главное, можно ли сделать всё так, чтобы через полгода не искать где запрятана эта микроразметка в админке сайта? Спойлер: можно. Ниже — то, чем мы сами пользуемся, и ничего лишнего.

https://habr.com/ru/articles/913758/

#Тильда #schemaorg #json #seo #микроразметка #jsonld

#Development #Launches
Introducing NLWeb · Bringing conversational interfaces directly to the web https://ilo.im/1642dj

_____
#Business #AI #Website #Blog #RSS #SchemaOrg #SEO #WebDev #Frontend #Backend

#Development #Launches
Introducing NLWeb · Bringing conversational interfaces directly to the web https://ilo.im/1642dj

_____
#Business #AI #Website #Blog #RSS #SchemaOrg #SEO #WebDev #Frontend #Backend

At #HMC_con2025, Emanuel Söding presented the results of the 1st NFDI Metadata Workshop: All 26 NFDI consortia participated and agreed to
1. promote the three cross-disciplinary standards: #DCAT, #DataCite Metadata Schema, #schemaorg
2. work towards an NFDI core metadata profile that identifies mandatory fields of these three
3. recommend registration and at least annual curation in #re3data
Report of the workshop: https://doi.org/10.5281/zenodo.15227236
Contact: https://www.nfdi.de/section-meta/task-force-metadata/?lang=en

#rdm #NFDI #metadata

Как рассказать о сайте поисковой системе 2

Доброго времени суток. В этой статье я хочу дополнить первую часть рассказа о том как же донести поисковику информацию о своём сайте. Здесь будут рассмотрены такие темы как IndexNow, security.txt, schema.org.

https://habr.com/ru/articles/901490/

#seoоптимизация #schemaorg #indexnow #securitytxt

UUIDv7 — ключ к глобальному поиску с помощью LLM в произвольных внешних системах

Представим себе такой сценарий. Пользователь устно и/или в чате поручает ИИ-агенту найти и приобрести нужный товар с заданными параметрами. ИИ-агент в разговоре уточняет у пользователя задание, составляет описание товара и на его основе формирует запрос к поисковой системе... а затем ищет товар в базах данных поставщиков. Как это реализовать

https://habr.com/ru/articles/893536/

#LLM #UUIDv7 #ииагент #RAG #MCP #бд #schemaorg #ключ #сниппет

Folien meiner Session

Strukturierte Daten mit Schema.org

auf dem TYPO3camp Mitteldeutschland

https://brotkrueml.dev/presentations/t3cmd25/schema.html

#schemaorg #typo3 #t3cmd #t3cmd25

new blog: "Beilstein journals contain Bioschemas" https://chem-bla-ics.linkedchemistry.info/2025/02/13/beiltein-journal-has-bioschemas.html

"But this announcement is a new step. I like how validation of the chemical structures is part of the approach, and I like how they use the Bioschemas extention of schema.org. The last because they use two Bioschemas types/profiles that contributed to or initiated, respectively: MolecularEntity and ChemicalSubstance."

replies to this post become blog comments.

#chemistry #openscience #schemaorg #bioschemas #ELIXIREurope

🚀 I released version 3.9.0 of my TYPO3 extension "schema" which provides an API and view helpers for schema.org markup.

The main feature is experimental support for enumeration types. Feedback is welcome.

https://docs.typo3.org/p/brotkrueml/schema/3.9/en-us/Developer/Enumerations.html

#typo3 #schemaorg

I have thoughts about creating a metadata vocabulary for co-ops. Would my best bet be to approach #SchemaOrg, self-host, or some other option?

I knew it! Necromancy is real after all!

#lang_en #necromancy #Schema #SchemaOrg #undead #Web #WWW

@MisterOpenData leider noch kein Schema.org. Dann wäre es auch maschinenlesbar. Digicult hat da ja auch schon Erfahrungen. Man will ja nicht wirklich Schnittstellen immer neu programmieren müssen.

#schemaorg

📬 Anonymität im Netz und SEO: Welche Daten sammelt Google wirklich?
#Empfehlungen #Gastartikel #ConsentManagementSystem #PlausibleAnalytics #schemaorg #ServerSideTracking #Swisscowsemail #Teleguard https://sc.tarnkappe.info/53d947

Is IPA furigana a bad idea?
https://shkspr.mobi/blog/2024/10/is-ipa-furigana-a-bad-idea/

My name is Terence(/ˈtɛɹəns) Eden(ˈiːdən/).

Modern HTML allows the user to use <ruby> to annotate text.

This is usually used for furigana - which allows pronunciation to be placed above words.

For example: "シン・ゴジラ (Shin Godzilla)" shows you how to pronounce both words if you are unfamiliar with kanji. The text can be any language or use any characters. In Japanese, it is quite often used to show phonetic pronunciation using hiragana.

Because English is a composite language0, it isn't always easy for people to pronounce words1.

So I have abused(?) the ruby syntax to show the International Phonetic Alphabet above the English words.

Is this a good idea? Is it a valid use of the syntax? Is it semantically correct? I don't know. But I do now know that it is possible.

I doubt the majority of people know the IPA, so it is of dubious use. It does make my name's pronunciation more apparent to machines.

An alternative is to use Schema.org. For example, my contact page has the following microdata:

<main itemscope itemtype="https://schema.org/Person">    <header itemprop="name">        <h1>            <span itemprop="givenName">Terence</span>&nbsp;            <span itemprop="familyName">Eden</span>            <audio id="audioPlayer" src="Terence_Eden.mp3"                     itemscope itemprop="additionalType"                     itemtype="https://schema.org/PronounceableText">                <meta itemprop="phoneticText"       content="/ˈtɛɹəns ˈiːdən/">                <meta itemprop="inLanguage"         content="en-GB">                <meta itemprop="textValue"          content="Terence Eden">                <meta itemprop="speechToTextMarkup" content="IPA">            </audio>

That allows humans to listen to the pronunciation of my name, and machines to see the IPA version.

Is there a better, more accessible, more useful way of encoding how to pronounce text?

1. Or a mongrel language ↩︎

2. Yes, I've seen that funny Tiktok. And that one. ↩︎

https://shkspr.mobi/blog/2024/10/is-ipa-furigana-a-bad-idea/

#HTML #metadata #schemaOrg

What programming language is in this <code> block?
https://shkspr.mobi/blog/2024/08/what-programming-language-is-in-this-code-block/

I'm a little bit obsessed with the idea of Semantic markup. I want the words that I write to be understood my humans and machines.

Imagine this piece of code: print( "Hello, world!" )

Is that code example written in Python? C++? Basic? Go? Perhaps you're familiar enough with every programming language to tell - but most people aren't. Wouldn't it be nice to give an indication of what programming language is used in an example?

Here's how we might represent it in HTML:

<pre>    <code>        print( "Hello, world!" )    </code></pre>

How do we let the browser, search engines, and humans know what language that's written in? It might seem obvious to use the lang attribute, right? We're writing in a programming language, so just use <code lang="python">. Sadly, the HTML specification disagrees.

The lang attribute specifies the primary language for the element's contents and for any of the element's attributes that contain text. Its value must be a valid BCP 47 language tag, or the empty string.
HTML Specification 3.2.6.2 The lang and xml:lang attributes (emphasis added)

That means it must be a human language like en or en-GB. No Klingon or Elvish - and certainly no computer languages!

Does the specification give any clues about the <code> element?

There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.
HTML Specification 4.5.15 The code element (emphasis added)

So we have to turn to our old friend Schema.org! There is a SoftwareSourceCode type which is used for exactly this case. Sadly, there is no example documentation because Google likes to start up a project but never quite finish it.

Here's how to write a code snippet in HTML and have it semantically expose the programming language used:

<pre itemscope itemtype="https://schema.org/SoftwareSourceCode">    <span itemprop="programmingLanguage">Python</span>    <meta itemprop="codeSampleType" content="Example">    <code itemprop="text">        print( "Hello, world!" )    </code></pre>

If you run that through the validator you'll see what a computer sees:

The programmingLanguage is a string - so you can write anything you like in there. You can optionally add a codeSampleType which, again, is a free-text field.

The <meta> items are only viewable to machines. You could also them to the user if you wanted, using a <span> or other suitable element.

Alternatives

It is possible to define private subtags of languages for example en-x-python - which could mean "Comments written in English, using the private Python extension. Or even just x-python. That then leads on to how you describe a language - but while COBOL has a MIME type not all languages do. There are some unofficial ones like text/x-python though.

But, of course, programming languages aren't really languages - so using lang probably isn't suitable.

A data- attribute might also work. Adding data-code="python" would allow CSS to style specific code blocks. But data attributes are private to a page, and generally aren't standardised.

I think this is a gap in the specification. I think there ought to be a code-lang attribute or similar. Perhaps something like:

<code code-lang="python;3.6">    print( "Hello, world!" )</code>

Which could allow authors to semantically give the name - and possibly version - of the programming language they are writing in.

Thoughts?

https://shkspr.mobi/blog/2024/08/what-programming-language-is-in-this-code-block/

#HTML #schemaOrg #semanticWeb

While writing up a reflection of completing the #DailyBloggingChallenge for a year, I realized that my #Hugo based website is missing #SEO data in its head.

The hugo clarity theme comes with SEO though it is not activated by default and one would only realize it when going through the layouts/partials/opengraph.html code. There is the mention of the site param blogDir that is not implemented anywhere else within the code.

Thus to activate the SEO over #SchemaOrg and #JsonLd one needs to add the param blogDir and point it to the designated section. Using the exampleSite as a reference it would be blogDir = "post" in the config/_default/params.toml file.

@jannis für JSON am besten JSON-LD/ Schema.org. Das ist ein guter Standard, den zB inzwischen auch Touristiker nutzen. Ich hatte den als Standard im Soziokultur-Kalender in SH verwendet https://socal21.gitlab.io/socal21-docs/api/schemaorg/

Das Problem bei "jeder
macht sein eigenes JSON" ist ja immer, dass man für jeden Feed wieder Anpassungen vornehmen muss. Und der Standard geht recht weit für Spezialfälle.

#SchemaOrg #JSONLD

Addressing the Overlooked Non-Micropsychiatric Uses for Thiotimoline

https://shkspr.mobi/blog/2023/06/addressing-the-overlooked-non-micropsychiatric-uses-for-thiotimoline/

One of the (many) problems with AI is that training data usually needs to come from "natural" sources. If you want to emulate human-written text, you need to train something on human-written text. But with the proliferation of cheap and fast AI tools, it is likely that training data will unwillingly become contaminated with AI-written text.

In order to prevent the "Habsburg Jaw" effect, I think it would be helpful if publishers could semantically indicate that a work was written by AI. In this example, I'm using Schema.org's Quotation type to show that I'm quoting an AI, and explicitly set the author to ChatGPT.

<span itemscope itemtype="https://schema.org/Quotation">    Author: <span itemprop="author"                   itemscope itemtype="https://schema.org/Organization"                  itemid="https://chat.openai.com">OpenAI ChatGPT</span>    <span itemprop="text">...</span></span>

Is that sufficient to stop AIs from feeding on their own young? I don't know. I also don't know if this covers every possible use-case, or whether there are better ways to address this. I'd be interested in hearing your thoughts.

Anyway, here's a letter to the editor of Nature written by ChatGPT. It took a little bit of prompt-engineering, but I'm rather pleased with how readily it took to the idea of inventing new uses for Thiotimoline. I especially like the way it has created obviously fictitious journals in its citations! This example is marked up so as to let robots know that it is a synthetic output.

Author: OpenAI ChatGPT
Dear Editor,

I hope this letter finds you well. As a distinguished biologist who has been an avid reader of Nature for many years, I would like to draw attention to a concerning issue that I believe has inadvertently slipped through the cracks of the journal's otherwise comprehensive coverage of scientific advancements. It is with great disappointment that I note the persistent oversight of the non-micropsychiatric applications of Thiotimoline, an area of research that deserves proper recognition.

Thiotimoline has generated considerable interest within the scientific community due to its unique temporal properties and hypothetical solubility characteristics.

Contrary to popular belief, Thiotimoline's potential extends far beyond the realm of micropsychiatry. Researchers have explored various hypothetical applications in multiple disciplines, and it is disheartening to witness Nature's omission of these intriguing possibilities. Allow me to shed some light on the non-micropsychiatric uses of Thiotimoline that merit attention:

• Time-Dependent Chemical Reactions: Thiotimoline's purported ability to dissolve before it comes into contact with water presents fascinating prospects for studying time-dependent chemical reactions. By altering reaction kinetics and introducing temporal dimensions into experimental setups, Thiotimoline could revolutionize our understanding of reaction mechanisms and provide insights into complex chemical processes 0.

• Temporal Pharmacokinetics: Thiotimoline's hypothetical solubility properties and unique temporal characteristics offer a potential breakthrough in drug delivery systems. Controlled-release formulations utilizing Thiotimoline could provide precise temporal dosing, ensuring optimal drug concentrations at critical intervals and improving therapeutic efficacy 1.

• Time-Sensitive Analytical Chemistry: Thiotimoline's temporal properties have captivated analytical chemists, inspiring innovative methodologies in time-sensitive analysis. Researchers propose the use of Thiotimoline as a temporal indicator, enabling real-time monitoring of chemical reactions and facilitating rapid data acquisition in various analytical techniques 2.

While the studies mentioned above are speculative, they demonstrate the conceptual potential of Thiotimoline as a catalyst for groundbreaking scientific exploration. By embracing the imaginative aspects of scientific inquiry, we can encourage innovative thinking and uncover unexpected insights that may guide future advancements.

I implore Nature to devote some attention to these non-micropsychiatric uses of Thiotimoline. By acknowledging the imaginative scientific spirit that drives our quest for knowledge, the journal can foster interdisciplinary collaboration and inspire researchers to explore uncharted territories.

Thank you for considering my concerns. I sincerely hope that Nature will continue to lead the scientific community by embracing the full spectrum of scientific endeavors.

Yours faithfully,

1. Hypothetical Research, Journal of Speculative Chemistry, vol. 123, no. 4, pp. 567-578, 20XX. ↩︎

2. Imaginary Drug Delivery Systems, Journal of Fictional Pharmacology, vol. 45, no. 2, pp. 211-223, 20XX. ↩︎

3. Exploring Time-Sensitive Analytical Techniques, Fictional Analytical Chemistry Review, vol. 67, no. 3, pp. 354-365, 20XX. ↩︎

#AI #schemaOrg

Addressing the Overlooked Non-Micropsychiatric Uses for Thiotimoline

https://shkspr.mobi/blog/2023/06/addressing-the-overlooked-non-micropsychiatric-uses-for-thiotimoline/

One of the (many) problems with AI is that training data usually needs to come from "natural" sources. If you want to emulate human-written text, you need to train something on human-written text. But with the proliferation of cheap and fast AI tools, it is likely that training data will unwillingly become contaminated with AI-written text.

In order to prevent the "Habsburg Jaw" effect, I think it would be helpful if publishers could semantically indicate that a work was written by AI. In this example, I'm using Schema.org's Quotation type to show that I'm quoting an AI, and explicitly set the author to ChatGPT.

<span itemscope itemtype="https://schema.org/Quotation">    Author: <span itemprop="author"                   itemscope itemtype="https://schema.org/Organization"                  itemid="https://chat.openai.com">OpenAI ChatGPT</span>    <span itemprop="text">...</span></span>

Is that sufficient to stop AIs from feeding on their own young? I don't know. I also don't know if this covers every possible use-case, or whether there are better ways to address this. I'd be interested in hearing your thoughts.

Anyway, here's a letter to the editor of Nature written by ChatGPT. It took a little bit of prompt-engineering, but I'm rather pleased with how readily it took to the idea of inventing new uses for Thiotimoline. I especially like the way it has created obviously fictitious journals in its citations! This example is marked up so as to let robots know that it is a synthetic output.

Author: OpenAI ChatGPT
Dear Editor,

I hope this letter finds you well. As a distinguished biologist who has been an avid reader of Nature for many years, I would like to draw attention to a concerning issue that I believe has inadvertently slipped through the cracks of the journal's otherwise comprehensive coverage of scientific advancements. It is with great disappointment that I note the persistent oversight of the non-micropsychiatric applications of Thiotimoline, an area of research that deserves proper recognition.

Thiotimoline has generated considerable interest within the scientific community due to its unique temporal properties and hypothetical solubility characteristics.

Contrary to popular belief, Thiotimoline's potential extends far beyond the realm of micropsychiatry. Researchers have explored various hypothetical applications in multiple disciplines, and it is disheartening to witness Nature's omission of these intriguing possibilities. Allow me to shed some light on the non-micropsychiatric uses of Thiotimoline that merit attention:

• Time-Dependent Chemical Reactions: Thiotimoline's purported ability to dissolve before it comes into contact with water presents fascinating prospects for studying time-dependent chemical reactions. By altering reaction kinetics and introducing temporal dimensions into experimental setups, Thiotimoline could revolutionize our understanding of reaction mechanisms and provide insights into complex chemical processes 0.

• Temporal Pharmacokinetics: Thiotimoline's hypothetical solubility properties and unique temporal characteristics offer a potential breakthrough in drug delivery systems. Controlled-release formulations utilizing Thiotimoline could provide precise temporal dosing, ensuring optimal drug concentrations at critical intervals and improving therapeutic efficacy 1.

• Time-Sensitive Analytical Chemistry: Thiotimoline's temporal properties have captivated analytical chemists, inspiring innovative methodologies in time-sensitive analysis. Researchers propose the use of Thiotimoline as a temporal indicator, enabling real-time monitoring of chemical reactions and facilitating rapid data acquisition in various analytical techniques 2.

While the studies mentioned above are speculative, they demonstrate the conceptual potential of Thiotimoline as a catalyst for groundbreaking scientific exploration. By embracing the imaginative aspects of scientific inquiry, we can encourage innovative thinking and uncover unexpected insights that may guide future advancements.

I implore Nature to devote some attention to these non-micropsychiatric uses of Thiotimoline. By acknowledging the imaginative scientific spirit that drives our quest for knowledge, the journal can foster interdisciplinary collaboration and inspire researchers to explore uncharted territories.

Thank you for considering my concerns. I sincerely hope that Nature will continue to lead the scientific community by embracing the full spectrum of scientific endeavors.

Yours faithfully,

1. Hypothetical Research, Journal of Speculative Chemistry, vol. 123, no. 4, pp. 567-578, 20XX. ↩︎

2. Imaginary Drug Delivery Systems, Journal of Fictional Pharmacology, vol. 45, no. 2, pp. 211-223, 20XX. ↩︎

3. Exploring Time-Sensitive Analytical Techniques, Fictional Analytical Chemistry Review, vol. 67, no. 3, pp. 354-365, 20XX. ↩︎

#AI #schemaOrg

Adding Semantic Reviews / Rich Snippets to your WordPress Site

https://shkspr.mobi/blog/2020/07/adding-semantic-reviews-rich-snippets-to-your-wordpress-site/

This is a real "scratch my own itch" post. I want to add Schema.org semantic metadata to the book reviews I write on my blog. This will enable "rich snippets" in search engines.

There are loads of WordPress plugins which do this. But where's the fun in that?! So here's how I quickly built it into my open source blog theme.

Screen options

First, let's add some screen options to the WordPress editor screen.

This is what it will look like when done:

This is how to add a custom metabox to the editor screen:

//  Place this in functions.php//  Display the boxfunction edent_add_review_custom_box(){   $screens = ['post'];   foreach ($screens as $screen) {      add_meta_box(         'edent_review_box_id', // Unique ID         'Book Review Metadata',    // Box title         'edent_review_box_html',// Content callback, must be of type callable         $screen                 // Post type       );   }}add_action('add_meta_boxes', 'edent_add_review_custom_box');

The contents of the box are bog standard HTML

//  Place this in functions.php//  HTML for the boxfunction edent_review_box_html($post){    $review_data = get_post_meta(get_the_ID(), "_edent_book_review_meta_key", true);    echo "<table>";    $checked = "";    if ($review_data["review"] == "true") {        $checked = "checked";    }    echo "<tr><td><label for='edent_book_review'>Embed Book Review:</label></td><td><input type=checkbox id=edent_book_review name=edent_book_review[review] value=true {$checked}></tr>";    echo "<tr><td><label for='edent_rating'>Rating:</label></td><td><input type=range id=edent_rating name=edent_book_review[rating] min=0 max=5 step=0.5 value='". esc_html($review_data["rating"]) ."'></tr>";    echo "<tr><td><label for=edent_isbn >ISBN:</label></td><td><input name=edent_book_review[isbn]  id=edent_isbn type=text value='" . esc_html($review_data["isbn"]) . "' autocomplete=off></tr>";    echo "</table>";}

Done! We now have a box for metadata. That data will be POSTed every time the blogpost is saved. But where do the data go?

Saving data

This function is added every time the blogpost is saved. If the checkbox has been ticked, the metadata are saved to the database. If the checkbox is unticked, the metadata are deleted.

//  Place this in functions.php//  Save the boxfunction edent_review_save_postdata($post_id){   if (array_key_exists('edent_book_review', $_POST)) {        if ($_POST['edent_book_review']["review"] == "true") {            update_post_meta(                $post_id,                '_edent_book_review_meta_key',                $_POST['edent_book_review']            );        } else {            delete_post_meta(                $post_id,                '_edent_book_review_meta_key'            );        }    }}add_action('save_post', 'edent_review_save_postdata');

Nice! But how do we get the data back out again?

Retrieving the data

We can use the get_post_meta() function to get all the metadata associated with a blog entry. We can then turn it into a Schema.org structured metadata entry.

function edent_book_review_display($post_id){    // https://developer.wordpress.org/reference/functions/the_meta/    $review_data = get_post_meta($post_id, "_edent_book_review_meta_key", true);    if ($review_data["review"] == "true")    {        $blog_author_data = get_the_author_meta();        $schema_review = array (            '@context' => 'https://schema.org',            '@type'    => 'Review',            'author' =>            array (                '@type' => 'Person',                'name'  => get_the_author_meta("user_firstname") . " " . get_the_author_meta("user_lastname"),                'sameAs' =>                array (                    0 => get_the_author_meta("user_url"),                ),            ),            'url' => get_permalink(),            'datePublished' => get_the_date('c'),            'publisher' =>            array (                '@type'  => 'Organization',                'name'   => get_bloginfo("name"),                'sameAs' => get_bloginfo("url"),            ),            'description' => mb_substr(get_the_excerpt(), 0, 198),            'inLanguage'  => get_bloginfo("language"),            'itemReviewed' =>            array (                '@type'  => 'Book',                'name'   => $review_data["title"],                'isbn'   => $review_data["isbn"],                'sameAs' => $review_data["book_url"],                'author' =>                array (                    '@type'  => 'Person',                    'name'   => $review_data["author"],                    'sameAs' => $review_data["author_url"],                ),            'datePublished' => $review_data["book_date"],            ),            'reviewRating' =>            array (                '@type' => 'Rating',                'worstRating' => 0,                'bestRating'  => 5,                'ratingValue' => $review_data["rating"],            ),            'thumbnailUrl' => get_the_post_thumbnail_url(),        );        echo '<script type="application/ld+json">' . json_encode($schema_review) . '</script>';        echo "<div class='edent-review' style='clear:both;'>";        if (isset($review_data["rating"])) {            echo "<span class='edent-rating-stars' style='font-size:2em;color:yellow;background-color:#13131380;'>";            $full = floor($review_data["rating"]);            $half = 0;            if ($review_data["rating"] - $full == 0.5)            {                $half = 1;            }            $empty = 5 - $half - $full;            for ($i=0; $i < $full ; $i++) {                echo "★";            }            if ($half == 1)            {                echo "⯪";            }            for ($i=0; $i < $empty ; $i++) {                echo "☆";            }            echo "</span>";        }        echo "<ul>";        if ($review_data["amazon_url"] != "") {            echo "<li><a href='{$review_data["amazon_url"]}'>Buy it on Amazon</a></li>";        }        if ($review_data["author_url"] != "") {            echo "<li><a href='{$review_data["author_url"]}'>Author's homepage</a></li>";        }        if ($review_data["book_url"] != "") {            echo "<li><a href='{$review_data["book_url"]}'>Publisher's details</a></li>";        }        echo "</ul>";    }    echo "</div>";}

In index.php, after the_content(); add:

edent_book_review_display(get_the_ID());

Then, on the website, it will look something like this:

Note the use of the Unicode Half Star for the ratings.

The source code of the site shows the output of the JSON LD:

When run through a Structured Data Testing Tool, it shows as a valid review:

And this means, when search engines access your blog, they will display rich snippets based on the semantic metadata.

You can see the final blog post to see how it works.

ToDo

My code is horrible and hasn't been tested, validated, or sanitised. It's only for my own blog, and I'm unlikely to hack myself, but that needs fixing.

I want to add review metadata for movies, games, and gadgets. That will either require multiple boxes, or a clever way to only show the necessary fields.

#metadata #php #schemaOrg #WordPress

Adding Semantic Reviews / Rich Snippets to your WordPress Site

https://shkspr.mobi/blog/2020/07/adding-semantic-reviews-rich-snippets-to-your-wordpress-site/

This is a real "scratch my own itch" post. I want to add Schema.org semantic metadata to the book reviews I write on my blog. This will enable "rich snippets" in search engines.

There are loads of WordPress plugins which do this. But where's the fun in that?! So here's how I quickly built it into my open source blog theme.

Screen options

First, let's add some screen options to the WordPress editor screen.

This is what it will look like when done:

This is how to add a custom metabox to the editor screen:

//  Place this in functions.php//  Display the boxfunction edent_add_review_custom_box(){   $screens = ['post'];   foreach ($screens as $screen) {      add_meta_box(         'edent_review_box_id', // Unique ID         'Book Review Metadata',    // Box title         'edent_review_box_html',// Content callback, must be of type callable         $screen                 // Post type       );   }}add_action('add_meta_boxes', 'edent_add_review_custom_box');

The contents of the box are bog standard HTML

//  Place this in functions.php//  HTML for the boxfunction edent_review_box_html($post){    $review_data = get_post_meta(get_the_ID(), "_edent_book_review_meta_key", true);    echo "<table>";    $checked = "";    if ($review_data["review"] == "true") {        $checked = "checked";    }    echo "<tr><td><label for='edent_book_review'>Embed Book Review:</label></td><td><input type=checkbox id=edent_book_review name=edent_book_review[review] value=true {$checked}></tr>";    echo "<tr><td><label for='edent_rating'>Rating:</label></td><td><input type=range id=edent_rating name=edent_book_review[rating] min=0 max=5 step=0.5 value='". esc_html($review_data["rating"]) ."'></tr>";    echo "<tr><td><label for=edent_isbn >ISBN:</label></td><td><input name=edent_book_review[isbn]  id=edent_isbn type=text value='" . esc_html($review_data["isbn"]) . "' autocomplete=off></tr>";    echo "</table>";}

Done! We now have a box for metadata. That data will be POSTed every time the blogpost is saved. But where do the data go?

Saving data

This function is added every time the blogpost is saved. If the checkbox has been ticked, the metadata are saved to the database. If the checkbox is unticked, the metadata are deleted.

//  Place this in functions.php//  Save the boxfunction edent_review_save_postdata($post_id){   if (array_key_exists('edent_book_review', $_POST)) {        if ($_POST['edent_book_review']["review"] == "true") {            update_post_meta(                $post_id,                '_edent_book_review_meta_key',                $_POST['edent_book_review']            );        } else {            delete_post_meta(                $post_id,                '_edent_book_review_meta_key'            );        }    }}add_action('save_post', 'edent_review_save_postdata');

Nice! But how do we get the data back out again?

Retrieving the data

We can use the get_post_meta() function to get all the metadata associated with a blog entry. We can then turn it into a Schema.org structured metadata entry.

function edent_book_review_display($post_id){    // https://developer.wordpress.org/reference/functions/the_meta/    $review_data = get_post_meta($post_id, "_edent_book_review_meta_key", true);    if ($review_data["review"] == "true")    {        $blog_author_data = get_the_author_meta();        $schema_review = array (            '@context' => 'https://schema.org',            '@type'    => 'Review',            'author' =>            array (                '@type' => 'Person',                'name'  => get_the_author_meta("user_firstname") . " " . get_the_author_meta("user_lastname"),                'sameAs' =>                array (                    0 => get_the_author_meta("user_url"),                ),            ),            'url' => get_permalink(),            'datePublished' => get_the_date('c'),            'publisher' =>            array (                '@type'  => 'Organization',                'name'   => get_bloginfo("name"),                'sameAs' => get_bloginfo("url"),            ),            'description' => mb_substr(get_the_excerpt(), 0, 198),            'inLanguage'  => get_bloginfo("language"),            'itemReviewed' =>            array (                '@type'  => 'Book',                'name'   => $review_data["title"],                'isbn'   => $review_data["isbn"],                'sameAs' => $review_data["book_url"],                'author' =>                array (                    '@type'  => 'Person',                    'name'   => $review_data["author"],                    'sameAs' => $review_data["author_url"],                ),            'datePublished' => $review_data["book_date"],            ),            'reviewRating' =>            array (                '@type' => 'Rating',                'worstRating' => 0,                'bestRating'  => 5,                'ratingValue' => $review_data["rating"],            ),            'thumbnailUrl' => get_the_post_thumbnail_url(),        );        echo '<script type="application/ld+json">' . json_encode($schema_review) . '</script>';        echo "<div class='edent-review' style='clear:both;'>";        if (isset($review_data["rating"])) {            echo "<span class='edent-rating-stars' style='font-size:2em;color:yellow;background-color:#13131380;'>";            $full = floor($review_data["rating"]);            $half = 0;            if ($review_data["rating"] - $full == 0.5)            {                $half = 1;            }            $empty = 5 - $half - $full;            for ($i=0; $i < $full ; $i++) {                echo "★";            }            if ($half == 1)            {                echo "⯪";            }            for ($i=0; $i < $empty ; $i++) {                echo "☆";            }            echo "</span>";        }        echo "<ul>";        if ($review_data["amazon_url"] != "") {            echo "<li><a href='{$review_data["amazon_url"]}'>Buy it on Amazon</a></li>";        }        if ($review_data["author_url"] != "") {            echo "<li><a href='{$review_data["author_url"]}'>Author's homepage</a></li>";        }        if ($review_data["book_url"] != "") {            echo "<li><a href='{$review_data["book_url"]}'>Publisher's details</a></li>";        }        echo "</ul>";    }    echo "</div>";}

In index.php, after the_content(); add:

edent_book_review_display(get_the_ID());

Then, on the website, it will look something like this:

Note the use of the Unicode Half Star for the ratings.

The source code of the site shows the output of the JSON LD:

When run through a Structured Data Testing Tool, it shows as a valid review:

And this means, when search engines access your blog, they will display rich snippets based on the semantic metadata.

You can see the final blog post to see how it works.

ToDo

My code is horrible and hasn't been tested, validated, or sanitised. It's only for my own blog, and I'm unlikely to hack myself, but that needs fixing.

I want to add review metadata for movies, games, and gadgets. That will either require multiple boxes, or a clever way to only show the necessary fields.

#metadata #php #schemaOrg #WordPress