Aug 24, 2020 10:22 AM - edited Aug 24, 2020 12:02 PM
Smart Copy automatically imports your blog into HubSpot by using a combination of CSS, schema markup, and meta tag selectors to find all your blog post features (e.g., author, title, post body, etc.).
However, blogs across the web are built with different markup depending on the developer or the CMS. This can sometimes make it difficult for the tool to read the blog template’s markup. In these cases, we ask you to manually enter a CSS selector that will help us import that feature.
By inputting a CSS selector within Smart Copy, you’re giving us the information we need to import the right feature into your HubSpot blog.
We cover finding CSS selectors using the Chrome browser in the Smart Copy Knowledge Base article. This article includes links to developer resources for other web browsers. There are also Chrome extensions that can help you to find and copy a CSS selector. For the best results, refer to the documentation for the web browser you’re using.
However, when working with Smart Copy, it’s not sufficient to find and copy any CSS selector. It’s important to find a good CSS selector, which often involves inspecting the source code of your blog.
A good CSS selector is one that is both broad enough to work on every blog post, while also being specific enough to identify the right content. Consider the examples below:
Blog Post 1:
<div class="blog-post-container"> <h1>My Blog Post Title About CSS</h1> <div class="blog-post-content" id="post-about-CSS"> My blog post content for the post: My Blog Post Title About CSS, is contained here. </div> </div>
Blog Post 2:
<div class="blog-post-container"> <h1>My Blog Post Title About JS</h1> <div class="blog-post-content" id="post-about-JS"> My blog post content for the post: My Blog Post Title About JS, is contained here. </div> </div>
Say we are looking for Smart Copy to target the blog post body content across our blog. In this case, there are three potential CSS selectors to choose from:
Option 1: The tag div
Option 2: The class .blog-post-content
Option 3: The ID #post-about-CSS
Even though there are three CSS selectors to choose from, there’s one CSS selector that will work best. Let’s break down each option below:
Option 1: The tag div is too broad, as there are multiple divs in the source code — the div surrounding the blog post content: <div class=”blog-post-container”>, for example. In this instance, Smart Copy would find the first occurrence of “div” on the page and then select not only the blog post content, but also the <h1> containing the blog post title.
Option 2: The ID #post-about-CSS-selectors-content is too specific as if we look at the source code of the second blog post, the ID is different. We want to be able to select the blog post content in every blog post and not just in the first blog post.
Option 3: In this case, the class .blog-post-content is the best CSS selector because it exists on every div that only contains blog post content.
There may also be a time when you need to use a parent selector to target the correct feature.
If we refer to the example source code below, we can see that the HTML element <div> with the class .blog-post-content now contains two HTML elements, one <div> with author information that we don’t want to be included within the blog post content, and one <p>, paragraph, with the actual blog post content.
<div class="blog-post-container"> <h1>My Blog Post Title About JS</h1> <div class="blog-post-content" id="post-about-JS"> <div class="author-name">My author information </div> <p>My blog post content for the post: My Blog Post Title About JS, is contained here.</p> </div> </div>
In this case, we can use .blog-post-content as the parent selector for the <p> tag containing the blog post content, using a combination of a class and tag selector to achieve our goal. In this case .blog-post-content p is a good CSS selector.
For best results, choose a selector that can target the feature on all blog posts, but at the same time is specific enough to target the exact feature that you’re looking to import.
Smart Copy will help you along the way by displaying the value that your CSS selector found. You can use this to confirm the accuracy of your selector:
<div class="publish-date">Published on 06/05/2020</div>
<span id="author-name">Written by HubSpot</span>
<div id="banner-header" style="background-image: url('my-blog-image.jpg');"> <h1 class="banner-title">Title</h1> </div>
The CSS selector div#banner-header will return the image my-blog-image.jpg.
The CSS selector div.blog-tags or .blog-content ul will return the tags: Marketing, Sales and CMS.
<div class="blog-content blog-tags"> <ul> <li><a>Marketing</a></li> <li><a>Sales</a></li> <li><a>CMS</a></li> </ul> </div>