惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

L
Lohrmann on Cybersecurity
Martin Fowler
Martin Fowler
Engineering at Meta
Engineering at Meta
腾讯CDC
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
Microsoft Azure Blog
Microsoft Azure Blog
G
Google Developers Blog
TaoSecurity Blog
TaoSecurity Blog
博客园_首页
Vercel News
Vercel News
Hugging Face - Blog
Hugging Face - Blog
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Last Week in AI
Last Week in AI
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
T
The Exploit Database - CXSecurity.com
量子位
Project Zero
Project Zero
A
Arctic Wolf
小众软件
小众软件
NISL@THU
NISL@THU
C
CERT Recently Published Vulnerability Notes
有赞技术团队
有赞技术团队
MongoDB | Blog
MongoDB | Blog
博客园 - 聂微东
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
N
News and Events Feed by Topic
宝玉的分享
宝玉的分享
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
T
Troy Hunt's Blog
P
Privacy & Cybersecurity Law Blog
Security Latest
Security Latest
B
Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
D
DataBreaches.Net
Schneier on Security
Schneier on Security
The Hacker News
The Hacker News
K
Kaspersky official blog
C
Check Point Blog
Hacker News: Ask HN
Hacker News: Ask HN
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
Webroot Blog
Webroot Blog
www.infosecurity-magazine.com
www.infosecurity-magazine.com
人人都是产品经理
人人都是产品经理
AI
AI
Cisco Talos Blog
Cisco Talos Blog
MyScale Blog
MyScale Blog
Cloudbric
Cloudbric
B
Blog RSS Feed
S
Schneier on Security
P
Palo Alto Networks Blog

Chip Cullen

The need for importance, and AI: Chip Cullen An updated Colorosetta: Chip Cullen The Return of the Font Combinator!: Chip Cullen Changing the number of an item in an ordered list: Chip Cullen My pizza dough recipe as of May 2025: Chip Cullen Gonna try to be a bit more personal: Chip Cullen How I built dynamic social media images in Eleventy using Cloudinary: Chip Cullen My current approach to AI : Chip Cullen Lessons Learned Surviving a Major Product Launch: Chip Cullen How to Build a Drop Down Menu with Modern CSS: Chip Cullen How to stop page scrolling when you have an open dialog element: Chip Cullen Distraction Driven Development: Chip Cullen How I learned to code: the art of letting go: Chip Cullen In praise of the switch statement: Chip Cullen Project stuck? Think about how you’re breaking it down & question everything: Chip Cullen So how did the onboarding experiment go?: Chip Cullen Ideas for an Onboarding Checklist: Chip Cullen I really like Post Mortems: Chip Cullen Raise Red Flags Early: Chip Cullen How to mock fetch requests in React Testing Librarty tests: Chip Cullen Running a Structured Meeting: Chip Cullen Adding the View Transitions API to my personal site: Chip Cullen A Lightweight Way to Read GraphQL Data: Chip Cullen How to make a color changing favicon: Chip Cullen Using a Pros/Cons list to help navigate technical discussions: Chip Cullen How to use variable fonts from Google Fonts: Chip Cullen A new website: now on Eleventy!: Chip Cullen How to Truncate Type at More Than One Line with Just CSS: Chip Cullen Colorosetta: the VS Code Extension!: Chip Cullen Using CSS Custom Properties and Logical Properties Together: Chip Cullen Browser Dev Tools: Element Inspector Popover: Chip Cullen The Link with rel=preload is a Seperate Thing: Chip Cullen How to have Dark & Light Mode Images that also works with User Choice: Chip Cullen Don’t use Viewport Units for Font Size on their own: Chip Cullen A little known Media Query: Aspect Ratio: Chip Cullen Meta thinking: Managing Decisions: Chip Cullen Give Your To-Do's Context: Chip Cullen Say What the Impact is when Reporting Issues: Chip Cullen Firefighting 101: How to Manage Breakages: Chip Cullen How to Deal With Large Pieces of Technical Debt: Chip Cullen Make Your Request Clear: Chip Cullen Analytics events, HTML classes, and protecting against refactoring: Chip Cullen How We Removed jQuery from a large app: Chip Cullen New tool: ColoRosetta: Chip Cullen What width and height attributes should you use with responsive images?: Chip Cullen Django 3.1 gotcha: Referrer Policy has a new default, and it might break iframes and links: Chip Cullen A Javascript Component Pattern: Chip Cullen CSS min(), max() and clamp() Functions: Chip Cullen Pointer Events and Inline Elements in Chrome: Chip Cullen Resolving a github repo and a new Create React App: Chip Cullen How to POST *Data* with the Fetch API: Chip Cullen The Contrast Triangle: Chip Cullen Advice on interviewing for Junior Developers: Chip Cullen Life Lessons Learned From Running a Marathon: How to do something really hard: Chip Cullen Javascript Fallback Values on Variables and Booleans - a hard lesson: Chip Cullen Alfred Tip: Quickly Access Common URLs: Chip Cullen Responsive Images in Hugo - by Laura Kalbag: Chip Cullen Making a Gatsby Site with Multiple Content Types: Chip Cullen How to Create and Use Fixtures in Cypress Tests: Chip Cullen Fixing the 'Bad Interpreter' Error from AWS and Python 3.7: Chip Cullen Creating a Canonical Tag in a Django Template: Chip Cullen Responsive spacing with viewport and ch units: Chip Cullen Welcome to my New Design - 2019: Chip Cullen Django Templates: Block and If statements don’t work like you might expect: Chip Cullen Books I Read in 2018: Chip Cullen Lifehack: 4 ways to help tame common email noise: Chip Cullen How to make better Pull Requests: Adding Steps to Test: Chip Cullen The unsung develpment tool: Spreadsheets: Chip Cullen Troubleshooting Adding and Removing EventListeners: with Arguments, Debounced, and in a React Class: Chip Cullen How to Fake the Window Object in Jest and Enzyme: Chip Cullen Migrating From Wordpress to Hugo: Chip Cullen Background Repeat and its Possibilities: Chip Cullen Getting Started With Front End Tests: a Mindset: Chip Cullen Migrating a Blog - An Opportunity for a Content Inventory: Chip Cullen Moving to Hugo: Chip Cullen JavaScript events: .target vs .currentTarget: Chip Cullen Things I wish I knew when starting with Python: Chip Cullen Leading Ampersands for modifiers in Sass: An anti-pattern: Chip Cullen How to get rid of the "You have mail" message in your terminal: Chip Cullen Why three typefaces rule the web, and what you can do about it: Chip Cullen You shouldn't worry about Section 508 - it's Section 504: Chip Cullen Looping Video Backgrounds: pointers and pitfalls: Chip Cullen How to “preview” a click event tag in the Google Tag Manager console: Chip Cullen Moving on from a technology, or: life after Drupal: Chip Cullen Don’t be a dumb developer: Chip Cullen Two level breadcrumbs with CSS :only-child: Chip Cullen Simplicity comes with experience: Chip Cullen Do the least amount possible: Chip Cullen SVGs vs. Icon Fonts: Two points in favor of Icon Fonts: Chip Cullen Accessible links without underlines: Chip Cullen The Strategic Job Hunt: Chip Cullen Surviving Getting Laid Off: Chip Cullen How to structure your typography in Sass: Chip Cullen Layer Cake: A Responsive Design Layout Pattern: Chip Cullen Creativity is yet to come in Web Design: Chip Cullen Front End Testing with Wraith: A Step by Step Recipe: Chip Cullen Where to begin? How I start a visual design for the web: Chip Cullen If you could only have five Google Fonts: Chip Cullen Why SVG is so cool (or: what happens when you're late to the party on something): Chip Cullen How to apply classes to elements with CKEditor 4, in Drupal 7: Chip Cullen
A (Brief) intro to Search Engine Structured Data: Chip Cullen
2019-08-15 · via Chip Cullen

A Caveat

I feel a little weird writing this blog post, because of a few factors:

  • I am not a Search Engine Optimization (SEO) expert by any means. I've worked with such experts, and respect their knowledge and ability, and won't pretend to be anything close.
  • I've seen almost no mention of this subject in my usual reading circles of web development blogs. Any information on this tends to be found exclusively in SEO blogs. But this seems so crucial that I'm surprised it hasn't come up more.

So, I don't know if I'm missing something, but I'm here to share something that I've learned about structured data and it's impact on a website.

What is structured data?

Structured data is a blob of structured data that is added to individual web pages. That data is constructed in such a way that a search engine crawler can parse it, and get a better understanding about your content.

Why should I care about structured data?

If your site is primarily content based (as opposed to say, a single page app), and you care about getting traffic from search engines, you should probably care. This is one of the best ways that you can signal to search engines certain things about your content that they might not otherwise understand.

To quote Google:

Structured data can help Google properly classify your page in search results, and also make your page eligible for future search result features.

Okay, I'm listening. What does this look like?

The short version is that you add data into your page that isn't generally seen by normal users, but they could if they 'view source'd it.

There are three ways to introduce this data:

  • A specially tagged JSON object that includes certain keys that search engines are looking for
  • Microdata in the form of attributes that are added to individual pieces of markup
  • RFDa ... I'll be honest, I didn't look into this too much

Google has specified that it prefers the JSON object approach,

Google recommends using JSON-LD for structured data whenever possible.

but, depending on how your data is organized and the way you can retrieve it, it may not be possible to implement. Do what you can.

For the purposes of this article, I'm going to focus on JSON.

Give me an example of a JSON object

When adding this data to a page, typically this JSON object will apply to that entire page, or URI. So, the first thing you need to consider is: what kind of content is this?

The reason is that depending on the kind of content, there are different kinds of structured data that you will need to include, if you want a search engine to understand your content well.

For instance, lets say you have a blog. You could add something like this:

<!-- this would go somewhere in the <head> of an html document -->
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    "headline": "A (Brief) Intro Search Engine Structured Data",
    "dateModified": 2019-07-31T08:10:17-04:00,
    "datePublished": 2019-07-30T08:12:10-04:00,
    "image": "http://path/to/image.png"
  }
</script>

A few things to note:

  • There is a special script type attribute - "application/ld+json"
  • The "@context": "https://schema.org" indicates that this data follows the format laid out by https://schema.org
  • The "@type": "NewsArticle", indicates that this is an article. There are several @type's that Search Engines will understand. There is the list that Schema.org has, which is fairly long. However, Google only understands a subset of those @type's - you can see that list here.
  • The article @type requires certain key/value pairs in order to be considered valid, at least by Google's estimation. They spell out the required keys here. As you consider the types of content you have, think about which supporting pieces of data you will have available to you.
  • This must be valid JSON in order for it to be parsed correctly

Another example,

Let's say, for a TV Show:

<!-- this would go somewhere in the <head> of an html document -->
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "TVSeries",
    "description": "The 1980's, with monsters.",
    "genre": "Science Fiction Nostalgia",
    "image": "https://path.to.some/image.png",
    "name": "Stranger Things",
    "numberOfSeasons": "3",
    "containsSeason": [
      {
        "@type": "TVSeason",
        "name": "Season 1"
      },
      {
        "@type": "TVSeason",
        "name": "Season 2"
      },
      {
        "@type": "TVSeason",
        "name": "Season 3"
      }
    ]
  }
</script>

Note - this is considered Media by Google, but adding this structure allows Google to understand more about the relationship between pieces of media.

An example of a Logo

On a large site's homepage, which is really a landing page, you may want to just use that page to identify the organization itself. You can add a "Logo" JSON object like so:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "url": "https://yourwebsite.org",
    "logo": "https://yourwebsite.org/path/to/logo.png"
  }
</script>

What about AMP?

You will notice in a lot of Google's documentation, they mention AMP implementations. If that's your thing, go for it.

I personally find AMP super creepy. That being said, I'm fine adding some data to my site if it helps Google understand it better.

There are non-AMP implementations of structured data - you should follow those.

How do I test this?

Glad you asked! Google does provide a Structured Data Testing tool - you can give it either a publicly available URL, or paste in markup (if you're working locally). It can be super helpful in catching issues.

Conclusion

I hope this brief introduction has given you at least a glimpse into structured data, and made you think about how it could benefit the sites that you work on. I fully acknowledge that I'm not an authority on this, but I hope you find this helpful!