If you’re moving your website or blog from one platform to another, migrating your existing blog posts is essential for maintaining your content marketing and SEO strategies. However, this can be a tedious and often manual process. That’s why our team at HubSpot designed a new tool that allows you to automatically import your blog into HubSpot from virtually any CMS. We call it Smart Copy.
Smart Copy imports your blog content 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 your existing blog template markup automatically. In these cases, we ask you to manually enter a CSS selector to help the tool import that feature. We’ve written this post to help you understand exactly how to do this.
But first of all, what are CSS Selectors?
CSS selectorsidentify HTML elements on a webpage so that they can be targeted by other code, such as CSS stylesheets or JavaScript. The main types of CSS selectors are:- Tag - A tag/type selector is the name of the tag <>. Examples:
- Class - A class selector is the name of the class preceded by a dot. Examples:
- ID - An ID selector is the name of the ID preceded by a hashtag. Examples:
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.
How can I find a CSS Selector?
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 extensionsthat can help you to find and copy CSS selectors. 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.
What makes a good CSS Selector?
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:
Blog Post 2:
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, but only one that will work well. Let’s break down each option below:
Option 1: The tag div
The tagdiv is too broad, as there are multiple divs in the source code. 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
The ID#post-about-CSS-selectors-content is too specific. 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.Option 3: The class .blog-post-content
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. However, there may 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 included within the blog post content, and one <p>, paragraph, with the actual blog post content.
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. Here is an example:
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:
Tips & Tricks for CSS Selectors with Smart Copy
When choosing a CSS selector for your blog’s author or publish date, you can target an element that includes more content than just the author’s name or publish date. In these cases, Smart Copy will strip out everything else (e.g., “Posted”, “Published on”, “by“, special characters, punctuation marks, etc.)Examples:
The CSS selector div.publish-date will return 06/05/2020, even though the phrase "Published on" is included in the same div.
The CSS selector span#author-name will return "HubSpot", even though the phrase "Written by" is also included in the same span.
When importing your blog post body, the Smart Copy tool won’t import any elements that have already been specified for other feature mappings (e.g. blog post title, or publish date). This does not apply to the featured image, which will still be included in your blog post body.
When targeting the featured image, you can specify an <img> tag, a <div> that contains the <img> tag within it, or a <div> that has the featured image specified as a background image within its style attribute.
Example:
The CSS selector div#banner-header will return the image my-blog-image.jpg.
If tags are listed as separate <a> elements, you can input a selector for the <ul>, <section>, or <div> that immediately surrounds these <a> elements, and the Smart Copy tool will know to identify these as separate tags.
Example:
The CSS selector div.blog-tags or .blog-content ul will return the tags: Marketing, Sales and CMS.
Further Reading / Resources:
- Information about Smart Copy
- Knowledge Base Article about Smart Copy
- What are CSS Selectors
- Finding Good CSS Selectors
