diff --git a/public/app/features/explore/Wrapper.test.tsx b/public/app/features/explore/Wrapper.test.tsx
index 32feaf20d7f..a70f4e2f006 100644
--- a/public/app/features/explore/Wrapper.test.tsx
+++ b/public/app/features/explore/Wrapper.test.tsx
@@ -255,9 +255,34 @@ describe('Wrapper', () => {
     await screen.findByText(`loki Editor input: { label="value"}`);
   });
 
-  it('changes the document title of the explore page', async () => {
-    setup({ datasources: [] });
-    await waitFor(() => expect(document.title).toEqual('Explore - Grafana'));
+  it('changes the document title of the explore page to include the datasource in use', async () => {
+    const query = {
+      left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]),
+    };
+    const { datasources } = setup({ query });
+    (datasources.loki.query as Mock).mockReturnValue(makeLogsQueryResponse());
+    // This is mainly to wait for render so that the left pane state is initialized as that is needed for the title
+    // to include the datasource
+    await screen.findByText(`loki Editor input: { label="value"}`);
+
+    await waitFor(() => expect(document.title).toEqual('Explore - loki - Grafana'));
+  });
+  it('changes the document title to include the two datasources in use in split view mode', async () => {
+    const query = {
+      left: JSON.stringify(['now-1h', 'now', 'loki', { expr: '{ label="value"}' }]),
+    };
+    const { datasources, store } = setup({ query });
+    (datasources.loki.query as Mock).mockReturnValue(makeLogsQueryResponse());
+    (datasources.elastic.query as Mock).mockReturnValue(makeLogsQueryResponse());
+
+    // This is mainly to wait for render so that the left pane state is initialized as that is needed for splitOpen
+    // to work
+    await screen.findByText(`loki Editor input: { label="value"}`);
+
+    store.dispatch(
+      splitOpen<any>({ datasourceUid: 'elastic', query: { expr: 'error' } }) as any
+    );
+    await waitFor(() => expect(document.title).toEqual('Explore - loki | elastic - Grafana'));
   });
 });
 
diff --git a/public/app/features/explore/Wrapper.tsx b/public/app/features/explore/Wrapper.tsx
index f76de76346b..94772b6f85b 100644
--- a/public/app/features/explore/Wrapper.tsx
+++ b/public/app/features/explore/Wrapper.tsx
@@ -6,7 +6,6 @@ import { lastSavedUrl, resetExploreAction, richHistoryUpdatedAction } from './st
 import { getRichHistory } from '../../core/utils/richHistory';
 import { ExplorePaneContainer } from './ExplorePaneContainer';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
-import { NavModel } from '@grafana/data';
 import { Branding } from '../../core/components/Branding/Branding';
 
 import { getNavModel } from '../../core/selectors/navModel';
@@ -18,6 +17,7 @@ interface OwnProps {}
 const mapStateToProps = (state: StoreState) => {
   return {
     navModel: getNavModel(state.navIndex, 'explore'),
+    exploreState: state.explore,
   };
 };
 
@@ -30,14 +30,6 @@ const connector = connect(mapStateToProps, mapDispatchToProps);
 
 type Props = OwnProps & RouteProps & ConnectedProps<typeof connector>;
 class WrapperUnconnected extends PureComponent<Props> {
-  updatePageDocumentTitle(navModel: NavModel) {
-    if (navModel) {
-      document.title = `${navModel.main.text} - ${Branding.AppTitle}`;
-    } else {
-      document.title = Branding.AppTitle;
-    }
-  }
-
   componentWillUnmount() {
     this.props.resetExploreAction({});
   }
@@ -48,7 +40,16 @@ class WrapperUnconnected extends PureComponent<Props> {
 
     const richHistory = getRichHistory();
     this.props.richHistoryUpdatedAction({ richHistory });
-    this.updatePageDocumentTitle(this.props.navModel);
+  }
+
+  componentDidUpdate() {
+    const { left, right } = this.props.queryParams;
+    const hasSplit = Boolean(left) && Boolean(right);
+    const datasourceTitle = hasSplit
+      ? `${this.props.exploreState.left.datasourceInstance?.name} | ${this.props.exploreState.right?.datasourceInstance?.name}`
+      : `${this.props.exploreState.left.datasourceInstance?.name}`;
+    const documentTitle = `${this.props.navModel.main.text} - ${datasourceTitle} - ${Branding.AppTitle}`;
+    document.title = documentTitle;
   }
 
   render() {